Merge pull request #51 from brave/561

support open settings and reload actions
brave · Jul 25, 2018 · 3395adb · 3395adb
2 parents 266ceff + 21018e5
commit 3395adb
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 9 deletions.
diff --git a/app/components/braveShields/braveShields.tsx b/app/components/braveShields/braveShields.tsx
@@ -73,7 +73,7 @@ export default class BraveShields extends React.Component<BraveShieldsProps, {}>
           allowScriptOriginsOnce={actions.allowScriptOriginsOnce}
           changeNoScriptSettings={actions.changeNoScriptSettings}
         />
-        <BraveShieldsFooter />
+        <BraveShieldsFooter tabId={shieldsPanelTabData.id} />
       </div>
     )
   }

diff --git a/app/components/braveShields/braveShieldsFooter.tsx b/app/components/braveShields/braveShieldsFooter.tsx
@@ -4,25 +4,48 @@
 
 import * as React from 'react'
 import { Grid, Column } from 'brave-ui/gridSystem'
-import Anchor from 'brave-ui/anchor'
 import UnstyledButton from 'brave-ui/unstyledButton'
 import { getMessage } from '../../background/api/localeAPI'
 import theme from '../../theme'
+import * as tabsAPI from '../../background/api/tabsAPI'
+
+export interface BraveShieldsStatsProps {
+  tabId: number
+}
+
+export default class BraveShieldsFooter extends React.PureComponent<BraveShieldsStatsProps, {}> {
+  constructor (props: BraveShieldsStatsProps) {
+    super(props)
+    this.openSettings = this.openSettings.bind(this)
+    this.reloadShields = this.reloadShields.bind(this)
+  }
+
+  openSettings () {
+    tabsAPI.createTab({ url: 'chrome://settings' })
+      .catch((err) => console.log(err))
+  }
+
+  reloadShields () {
+    tabsAPI.reloadTab(this.props.tabId, true)
+      .catch((err) => console.log(err))
+  }
 
-export default class BraveShieldsFooter extends React.PureComponent<{}, {}> {
   render () {
     return (
       <Grid id='braveShieldsFooter' theme={theme.braveShieldsFooter}>
         <Column size={9} theme={theme.columnStart}>
-          <Anchor
-            theme={theme.editLink}
-            href='chrome://settings'
-            target='_blank'
+          <UnstyledButton
+            theme={theme.noUserSelect}
+            onClick={this.openSettings}
             text={getMessage('shieldsFooterEditDefault')}
           />
         </Column>
         <Column size={3} theme={theme.columnEnd}>
-          <UnstyledButton theme={theme.noUserSelect} text={getMessage('shieldsFooterReload')} />
+          <UnstyledButton
+            onClick={this.reloadShields}
+            theme={theme.noUserSelect}
+            text={getMessage('shieldsFooterReload')}
+          />
         </Column>
       </Grid>
     )

diff --git a/test/app/components/braveShields/braveShieldsFooterTest.tsx b/test/app/components/braveShields/braveShieldsFooterTest.tsx
@@ -5,16 +5,54 @@
 
 import 'mocha'
 import * as React from 'react'
+import * as sinon from 'sinon'
 import * as assert from 'assert'
 import BraveShieldsFooter from '../../../../app/components/braveShields/braveShieldsFooter'
+import * as tabsAPI from '../../../../app/background/api/tabsAPI'
 import { shallow } from 'enzyme'
 
 describe('BraveShieldsFooter component', () => {
-  const baseComponent = () => <BraveShieldsFooter />
+  const tabId = 123123
+  const baseComponent = () => <BraveShieldsFooter tabId={tabId} />
 
   it('renders the component', () => {
     const wrapper = shallow(baseComponent())
     const assertion = wrapper.find('#braveShieldsFooter').length === 1
     assert.equal(assertion, true)
   })
+
+  describe('when reload is clicked', () => {
+    before(function () {
+      this.spy = sinon.spy(chrome.tabs, 'reload')
+      tabsAPI.reloadTab(tabId, true)
+    })
+
+    after(function () {
+      this.spy.restore()
+    })
+
+    it('calls chrome.tab.reload', function () {
+      assert(this.spy.calledOnce)
+      assert.deepEqual(this.spy.getCall(0).args[0], tabId)
+    })
+  })
+
+  describe('when edit default settings is clicked', () => {
+    before(function () {
+      this.spy = sinon.spy(chrome.tabs, 'create')
+      this.url = 'https://clifton-is-a-mercedes-benz-ambassador.com'
+      tabsAPI.createTab({ url: this.url })
+    })
+
+    after(function () {
+      this.spy.restore()
+    })
+
+    it('calls chrome.tab.create', function () {
+      assert(this.spy.calledOnce)
+      assert.deepEqual(this.spy.getCall(0).args[0], {
+        url: this.url
+      })
+    })
+  })
 })