diff --git a/app/common/state/siteSettingsState.js b/app/common/state/siteSettingsState.js index e3266f60005..51066dd8e74 100644 --- a/app/common/state/siteSettingsState.js +++ b/app/common/state/siteSettingsState.js @@ -1,7 +1,7 @@ const appConfig = require('../../../js/constants/appConfig') const siteSettings = require('../../../js/state/siteSettings') -const siteSettingsState = { +const api = { getAllSiteSettings: (state, isPrivate) => { if (isPrivate) { return state.get('siteSettings').mergeDeep(state.get('temporarySiteSettings')) @@ -9,9 +9,10 @@ const siteSettingsState = { return state.get('siteSettings') }, - isNoScriptEnabled (state, settings) { + isNoScriptEnabled (state, isPrivate) { + const settings = api.getAllSiteSettings(state, isPrivate) return siteSettings.activeSettings(settings, state, appConfig).noScript === true } } -module.exports = siteSettingsState +module.exports = api diff --git a/app/common/state/windowState.js b/app/common/state/windowState.js index f11b25cc0b3..8f3ca51baab 100644 --- a/app/common/state/windowState.js +++ b/app/common/state/windowState.js @@ -4,6 +4,8 @@ const { makeImmutable, isMap, isList } = require('./immutableUtil') const assert = require('assert') +const defaultBrowserState = require('./defaultBrowserState') +const shieldState = require('./shieldState') // TODO(bridiver) - make these generic validation functions const validateId = function (propName, id) { @@ -155,6 +157,28 @@ const api = { // TODO(bridiver) handle restoring state state = makeImmutable(state) return state.delete('windows') + }, + + shouldAllowWindowDrag: (state, windowState, frame, isFocused) => { + const braveryPanelIsVisible = shieldState.braveShieldsEnabled(frame) && + windowState.get('braveryPanelDetail') + const checkDefaultBrowserDialogIsVisible = isFocused && + defaultBrowserState.shouldDisplayDialog(state) + + return !state.get('contextMenuDetail') && + !windowState.get('bookmarkDetail') && + !windowState.getIn(['ui', 'siteInfo', 'isVisible']) && + !braveryPanelIsVisible && + !windowState.getIn(['ui', 'isClearBrowsingDataPanelVisible']) && + !windowState.get('importBrowserDataDetail') && + !windowState.getIn(['widevinePanelDetail', 'shown']) && + !windowState.get('autofillAddressDetail') && + !windowState.get('autofillCreditCardDetail') && + !windowState.getIn(['ui', 'releaseNotes', 'isVisible']) && + !checkDefaultBrowserDialogIsVisible && + !windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) && + frame && !frame.getIn(['security', 'loginRequiredDetail']) && + !windowState.getIn(['ui', 'menubar', 'selectedIndex']) } } diff --git a/app/renderer/components/browserAction.js b/app/renderer/components/browserAction.js index 6fe7a32e2ea..aaccbd43037 100644 --- a/app/renderer/components/browserAction.js +++ b/app/renderer/components/browserAction.js @@ -3,16 +3,26 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ const React = require('react') -const ImmutableComponent = require('./immutableComponent') const electron = require('electron') const ipc = electron.ipcRenderer +const {StyleSheet, css} = require('aphrodite') + +// Components +const ReduxComponent = require('./reduxComponent') const BrowserButton = require('./common/browserButton') const BrowserActionBadge = require('../../renderer/components/browserActionBadge') + +// State const extensionState = require('../../common/state/extensionState') +const tabState = require('../../common/state/tabState') + +// Actions const windowActions = require('../../../js/actions/windowActions') -const {StyleSheet, css} = require('aphrodite') -class BrowserAction extends ImmutableComponent { +// Utils +const {getCurrentWindowId} = require('../currentWindow') + +class BrowserAction extends React.Component { constructor () { super() this.onClick = this.onClick.bind(this) @@ -39,39 +49,59 @@ class BrowserAction extends ImmutableComponent { offsetX: e.nativeEvent.offsetX, offsetY: e.nativeEvent.offsetY } - ipc.send('chrome-browser-action-clicked', this.props.extensionId, this.props.tabId, this.props.browserAction.get('title'), props) + ipc.send('chrome-browser-action-clicked', this.props.extensionId, this.props.activeTabId, this.props.title, props) + } + + mergeProps (state, dispatchProps, ownProps) { + const currentWindow = state.get('currentWindow') + const activeTab = tabState.getActiveTabValue(state, getCurrentWindowId()) + const activeTabId = activeTab && activeTab.get('tabId') + const browserActions = extensionState.getBrowserActionByTabId(state, ownProps.extensionId, activeTabId) + + const props = {} + // used in renderer + props.title = browserActions.get('title') + props.text = browserActions.get('text') + props.color = browserActions.get('color') + props.image = extensionState.browserActionBackgroundImage(browserActions, activeTabId) + + // used in other functions + props.popupWindowSrc = currentWindow.getIn(['popupWindowDetail', 'src']) + props.activeTabId = activeTabId + + return Object.assign({}, ownProps, props) } render () { - const browserBadgeText = this.props.browserAction.get('text') - const browserBadgeColor = this.props.browserAction.get('color') // TODO(bridiver) should have some visual notification of hover/press return
- - { browserBadgeText - ? + onClick={this.onClick} + /> + { + this.props.text + ? : null }
} } +module.exports = ReduxComponent.connect(BrowserAction) + const styles = StyleSheet.create({ browserActionButton: { position: 'relative' } }) - -module.exports = BrowserAction diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js index b2b0c0ca3f9..7945bf380d4 100644 --- a/app/renderer/components/navigation/navigationBar.js +++ b/app/renderer/components/navigation/navigationBar.js @@ -29,6 +29,8 @@ const {getCurrentWindowId} = require('../../currentWindow') // State const tabState = require('../../../common/state/tabState') const frameStateUtil = require('../../../../js/state/frameStateUtil') +const menuBarState = require('../../../common/state/menuBarState') +const siteSettingsState = require('../../../common/state/siteSettingsState') class NavigationBar extends React.Component { constructor (props) { @@ -125,6 +127,7 @@ class NavigationBar extends React.Component { const loading = activeFrame.get('loading') const location = activeFrame.get('location') || '' const navbar = activeFrame.get('navbar') || Immutable.Map() + const isPrivate = activeFrame.get('isPrivate') || false const hasTitle = title && location && title !== location.replace(/^https?:\/\//, '') const titleMode = activeTabShowingMessageBox || @@ -151,9 +154,9 @@ class NavigationBar extends React.Component { props.loading = loading props.bookmarkDetail = bookmarkDetail props.mouseInTitlebar = mouseInTitlebar - props.enableNoScript = ownProps.enableNoScript + props.enableNoScript = siteSettingsState.isNoScriptEnabled(state, isPrivate) props.settings = state.get('settings') - props.menubarVisible = ownProps.menubarVisible + props.menubarVisible = menuBarState.isMenuBarVisible(windowState) props.siteSettings = state.get('siteSettings') props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map() props.activeTabShowingMessageBox = activeTabShowingMessageBox diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js index 74e48002b78..f214f8fba1d 100644 --- a/app/renderer/components/navigation/navigator.js +++ b/app/renderer/components/navigation/navigator.js @@ -12,7 +12,7 @@ const appActions = require('../../../../js/actions/appActions') const windowActions = require('../../../../js/actions/windowActions') // Components -const ImmutableComponent = require('../immutableComponent') +const ReduxComponent = require('../reduxComponent') const NavigationBar = require('./navigationBar') const LongPressButton = require('../../../../js/components/longPressButton') const MenuBar = require('./menuBar') @@ -24,11 +24,12 @@ const BrowserAction = require('../browserAction') const tabState = require('../../../common/state/tabState') const extensionState = require('../../../common/state/extensionState') const siteSettingsState = require('../../../common/state/siteSettingsState') +const menuBarState = require('../../../common/state/menuBarState') +const windowState = require('../../../common/state/windowState') // Util -const {getCurrentWindowId, isMaximized, isFullScreen} = require('../../currentWindow') -const {makeImmutable} = require('../../../common/state/immutableUtil') -const platformUtil = require('../../../common/lib/platformUtil') +const {getCurrentWindowId, isMaximized, isFullScreen, isFocused} = require('../../currentWindow') +const {isWindows} = require('../../../common/lib/platformUtil') const {braveShieldsEnabled} = require('../../../common/state/shieldState') const eventUtil = require('../../../../js/lib/eventUtil') const {isNavigatableAboutPage, getBaseUrl} = require('./../../../../js/lib/appUrlUtil') @@ -40,7 +41,7 @@ const cx = require('../../../../js/lib/classSet') const messages = require('../../../../js/constants/messages') const appConfig = require('../../../../js/constants/appConfig') -class Navigator extends ImmutableComponent { +class Navigator extends React.Component { constructor () { super() this.onBack = this.onBack.bind(this) @@ -54,68 +55,24 @@ class Navigator extends ImmutableComponent { } onNav (e, navCheckProp, navType, navAction) { - const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState) - const activeTab = tabState.getActiveTab(this.props.appState) - const activeTabId = tabState.getActiveTabId(this.props.appState) - const isNavigable = isNavigatableAboutPage(getBaseUrl(activeFrame.get('location'))) - if (e && eventUtil.isForSecondaryAction(e) && isNavigable) { - if (activeTab && activeTab.get(navCheckProp)) { - appActions.tabCloned(activeTabId, { + if (e && eventUtil.isForSecondaryAction(e) && this.props.isNavigable) { + if (this.props[navCheckProp]) { + appActions.tabCloned(this.props.activeTabId, { [navType]: true, active: !!e.shiftKey }) } } else { - navAction.call(this, this.props.activeTab.get('tabId')) + navAction.call(this, this.props.activeTabId) } } - getTotalBlocks (frames) { - if (!frames) { - return false - } - - frames = makeImmutable(frames) - - const ads = frames.getIn(['adblock', 'blocked']) - const trackers = frames.getIn(['trackingProtection', 'blocked']) - const scripts = frames.getIn(['noScript', 'blocked']) - const fingerprint = frames.getIn(['fingerprintingProtection', 'blocked']) - const blocked = (ads && ads.size ? ads.size : 0) + - (trackers && trackers.size ? trackers.size : 0) + - (scripts && scripts.size ? scripts.size : 0) + - (fingerprint && fingerprint.size ? fingerprint.size : 0) - - return (blocked === 0) - ? false - : ((blocked > 99) - ? '99+' - : blocked) - } - get extensionButtons () { - const activeTabId = tabState.getActiveTabId(this.props.appState) - const enabledExtensions = extensionState.getEnabledExtensions(this.props.appState) - const extensionBrowserActions = enabledExtensions - .map((extension) => extensionState.getBrowserActionByTabId(this.props.appState, extension.get('id'), activeTabId)) - .filter((browserAction) => browserAction) - - let buttons = extensionBrowserActions.map((browserAction, id) => - - ).values() + let buttons = this.props.extensionBrowserActions.map((id) => ).values() buttons = Array.from(buttons) - if (buttons.length > 0) { - buttons.push() - } - return buttons - } + buttons.push() - get activeFrame () { - return this.props.frames[this.props.windowState.get('activeFrameKey')] + return buttons } onBack (e) { @@ -127,18 +84,16 @@ class Navigator extends ImmutableComponent { } onBackLongPress (target) { - const activeTab = this.props.activeTab const rect = target.parentNode.getBoundingClientRect() - appActions.onGoBackLong(activeTab.get('tabId'), { + appActions.onGoBackLong(this.props.activeTabId, { left: rect.left, bottom: rect.bottom }) } onForwardLongPress (target) { - const activeTab = this.props.activeTab const rect = target.parentNode.getBoundingClientRect() - appActions.onGoForwardLong(activeTab.get('tabId'), { + appActions.onGoForwardLong(this.props.activeTabId, { left: rect.left, bottom: rect.bottom }) @@ -159,16 +114,14 @@ class Navigator extends ImmutableComponent { return windowActions.newFrame({location: path, title: file.name}) }) } else if (e.dataTransfer.getData('text/plain')) { - let activeFrame = frameStateUtil.getActiveFrame(this.props.windowState) - if (activeFrame) { - windowActions.loadUrl(activeFrame, e.dataTransfer.getData('text/plain')) + if (this.props.activeTabId) { + appActions.loadURLRequested(this.props.activeTabId, e.dataTransfer.getData('text/plain')) } } } onBraveMenu () { - const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState) - if (braveShieldsEnabled(activeFrame)) { + if (this.props.shieldEnabled) { windowActions.setBraveryPanelDetail({}) } } @@ -190,24 +143,57 @@ class Navigator extends ImmutableComponent { ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward) } - render () { - const activeTab = this.props.activeTab - const activeTabShowingMessageBox = !!(activeTab && tabState.isShowingMessageBox(this.props.appState, activeTab.get('tabId'))) - const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState) - const totalBlocks = activeFrame ? this.getTotalBlocks(activeFrame) : false - const braverySettings = siteSettings.activeSettings(this.props.activeSiteSettings, this.props.appState, appConfig) - const shieldEnabled = braveShieldsEnabled(activeFrame) + mergeProps (state, dispatchProps, ownProps) { + const currentWindow = state.get('currentWindow') + const activeTab = tabState.getActiveTabValue(state, getCurrentWindowId()) + const activeTabId = activeTab && activeTab.get('tabId') + const activeTabShowingMessageBox = !!(activeTab && tabState.isShowingMessageBox(state, activeTabId)) + const activeFrame = frameStateUtil.getActiveFrame(currentWindow) + const allSiteSettings = siteSettingsState.getAllSiteSettings(state, activeFrame) + const braverySettings = siteSettings.activeSettings(allSiteSettings, state, appConfig) + const enabledExtensions = extensionState.getEnabledExtensions(state) + const extensionBrowserActions = enabledExtensions + .map((extension) => { + const browserAction = extensionState.getBrowserActionByTabId(state, extension.get('id'), activeTabId) + return browserAction ? extension.get('id') : false + }) + .filter((browserAction) => browserAction) + + const props = {} + // used in renderer + props.canGoBack = activeTab && activeTab.get('canGoBack') && !activeTabShowingMessageBox + props.canGoForward = activeTab && activeTab.get('canGoForward') && !activeTabShowingMessageBox + props.totalBlocks = activeFrame ? frameStateUtil.getTotalBlocks(activeFrame) : false + props.shieldsDown = !braverySettings.shieldsUp + props.shieldEnabled = braveShieldsEnabled(activeFrame) + props.menuBarVisible = menuBarState.isMenuBarVisible(currentWindow) + props.isMaximized = isMaximized() || isFullScreen() + props.isCaptionButton = isWindows() && !props.menuBarVisible + props.activeTabShowingMessageBox = activeTabShowingMessageBox + props.extensionBrowserActions = extensionBrowserActions + props.showBrowserActions = !activeTabShowingMessageBox && + extensionBrowserActions && + extensionBrowserActions.size > 0 + props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused()) + + // used in other functions + props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location'))) + props.activeTabId = activeTabId + return Object.assign({}, ownProps, props) + } + + render () { return
{ - this.props.customTitlebar.menubarVisible + this.props.menuBarVisible ?
- +
: null } @@ -223,12 +209,12 @@ class Navigator extends ImmutableComponent {
@@ -236,58 +222,54 @@ class Navigator extends ImmutableComponent {
- +
{ - activeTabShowingMessageBox - ? null - : this.extensionButtons + this.props.showBrowserActions + ? this.extensionButtons + : null }
{ - this.props.customTitlebar.captionButtonsVisible && !this.props.customTitlebar.menubarVisible + this.props.isCaptionButton ? : null } @@ -295,14 +277,16 @@ class Navigator extends ImmutableComponent {
{ - this.props.customTitlebar.captionButtonsVisible && !this.props.customTitlebar.menubarVisible - ? + this.props.isCaptionButton + ? : null }
} } +module.exports = ReduxComponent.connect(Navigator) + const styles = StyleSheet.create({ lionBadge: { left: 'calc(50% - 1px)', @@ -327,5 +311,3 @@ const styles = StyleSheet.create({ position: 'relative' } }) - -module.exports = Navigator diff --git a/js/components/main.js b/js/components/main.js index f66cd9f8d24..56aed297fb7 100644 --- a/js/components/main.js +++ b/js/components/main.js @@ -56,9 +56,9 @@ const siteUtil = require('../state/siteUtil') const searchProviders = require('../data/searchProviders') const defaultBrowserState = require('../../app/common/state/defaultBrowserState') const shieldState = require('../../app/common/state/shieldState') -const tabState = require('../../app/common/state/tabState') const siteSettingsState = require('../../app/common/state/siteSettingsState') const menuBarState = require('../../app/common/state/menuBarState') +const windowState = require('../../app/common/state/windowState.js') // Util const _ = require('underscore') @@ -658,12 +658,10 @@ class Main extends ImmutableComponent { enabled: isWindows(), captionButtonsVisible: isWindows(), menubarVisible: menubarVisible, - menubarTemplate: menubarVisible ? this.props.appState.getIn(['menu', 'template']) : null, menubarSelectedIndex: this.props.windowState.getIn(['ui', 'menubar', 'selectedIndex']), contextMenuSelectedIndex: typeof selectedIndex === 'object' && Array.isArray(selectedIndex) && selectedIndex.length > 0 ? selectedIndex : null, - lastFocusedSelector: this.props.windowState.getIn(['ui', 'menubar', 'lastFocusedSelector']), isMaximized: isMaximized() || isFullScreen() } } @@ -692,7 +690,6 @@ class Main extends ImmutableComponent { const autofillAddressPanelIsVisible = this.props.windowState.get('autofillAddressDetail') const autofillCreditCardPanelIsVisible = this.props.windowState.get('autofillCreditCardDetail') const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) - const activeTab = tabState.getActiveTabValue(this.props.appState, getCurrentWindowId()) const releaseNotesIsVisible = this.props.windowState.getIn(['ui', 'releaseNotes', 'isVisible']) const checkDefaultBrowserDialogIsVisible = isFocused() && defaultBrowserState.shouldDisplayDialog(this.props.appState) @@ -700,20 +697,7 @@ class Main extends ImmutableComponent { const loginRequiredDetail = activeFrame ? basicAuthState.getLoginRequiredDetail(this.props.appState, activeFrame.get('tabId')) : null const customTitlebar = this.customTitlebar const contextMenuDetail = this.props.windowState.get('contextMenuDetail') - const shouldAllowWindowDrag = !contextMenuDetail && - !this.props.windowState.get('bookmarkDetail') && - !siteInfoIsVisible && - !braveryPanelIsVisible && - !clearBrowsingDataPanelIsVisible && - !importBrowserDataPanelIsVisible && - !widevinePanelIsVisible && - !autofillAddressPanelIsVisible && - !autofillCreditCardPanelIsVisible && - !releaseNotesIsVisible && - !checkDefaultBrowserDialogIsVisible && - !noScriptIsVisible && - activeFrame && !activeFrame.getIn(['security', 'loginRequiredDetail']) && - !customTitlebar.menubarSelectedIndex + const shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(this.props.appState, this.props.windowState, activeFrame, isFocused()) const appStateSites = this.props.appState.get('sites') @@ -745,14 +729,7 @@ class Main extends ImmutableComponent { : null }
- + { siteInfoIsVisible ? 99) ? '99+' : blocked) +} + const frameStatePath = (windowState, key) => ['frames', findIndexForFrameKey(windowState.get('frames'), key)] @@ -782,5 +803,6 @@ module.exports = { tabStatePathForFrame, getLastCommittedURL, getFrameByLastAccessedTime, - onFindBarHide + onFindBarHide, + getTotalBlocks } diff --git a/test/unit/app/renderer/components/navigation/navigatorTest.js b/test/unit/app/renderer/components/navigation/navigatorTest.js index 8c94b799f48..f73934f48d4 100644 --- a/test/unit/app/renderer/components/navigation/navigatorTest.js +++ b/test/unit/app/renderer/components/navigation/navigatorTest.js @@ -5,10 +5,51 @@ require('../../../../braveUnit') const mockery = require('mockery') -const {shallow} = require('enzyme') +const {mount} = require('enzyme') const assert = require('assert') const Immutable = require('immutable') -let Navigator +let Navigator, windowStore, appStore + +const defaultWindowStore = Immutable.fromJS({ + activeFrameKey: 0, + frames: [{ + key: 0, + tabId: 1, + location: 'http://brave.com' + }], + tabs: [] +}) + +const appStoreRenderer = Immutable.fromJS({ + extensions: { + }, + settings: { + }, + siteSettings: { + 'https?://brave.com': { + example3: true + } + }, + tabs: [{ + active: true, + tabId: 1, + canGoBack: true, + canGoForward: true, + windowId: 1 + }], + windows: [] +}) + +const fakeWindowState = { + shouldAllowWindowDrag: () => false +} + +const fakeCurrentWindow = { + isMaximized: () => false, + isFullScreen: () => false, + isFocused: () => false, + getCurrentWindowId: () => 1 +} describe('Navigator component unit tests', function () { before(function () { @@ -25,72 +66,25 @@ describe('Navigator component unit tests', function () { mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg') mockery.registerMock('../../../../img/url-bar-no-script.svg', {}) mockery.registerMock('electron', require('../../../../lib/fakeElectron')) + mockery.registerMock('../../../common/state/windowState', fakeWindowState) + mockery.registerMock('../../currentWindow', fakeCurrentWindow) + mockery.registerMock('./navigationBar', () => null) + appStore = require('../../../../../../js/stores/appStoreRenderer') + windowStore = require('../../../../../../js/stores/windowStore') Navigator = require('../../../../../../app/renderer/components/navigation/navigator') - appStoreRenderer = require('../../../../../../js/stores/appStoreRenderer') }) after(function () { mockery.disable() }) - let appStoreRenderer = require('../../../../../../js/stores/appStoreRenderer') - - const windowState = Immutable.fromJS({ - activeFrameKey: 0, - frames: [{ - key: 0, - tabId: 1, - location: 'http://brave.com' - }], - tabs: [] - }) - - const appState = Immutable.fromJS({ - extensions: { - }, - settings: { - }, - siteSettings: { - 'https?://brave.com': { - example3: true - } - }, - tabs: [{ - tabId: 1, - canGoBack: true, - canGoForward: true - }], - windows: [] - }) - - const customTitlebar = { - enabled: false, - captionButtonsVisible: false, - menubarVisible: false, - menubarTemplate: null, - menubarSelectedIndex: undefined, - contextMenuSelectedIndex: null, - lastFocusedSelector: undefined, - isMaximized: false - } - - const activeTab = appState.getIn(['tabs', 0]) - describe('when user has history going forwards and backwards', function () { let wrapper before(function () { - appStoreRenderer.state = Immutable.fromJS(appState) - wrapper = shallow( - - ) + appStore.state = appStoreRenderer + windowStore.state = defaultWindowStore + wrapper = mount() }) it('both back/forward navigationButtonContainers are enabled', function () { @@ -98,13 +92,18 @@ describe('Navigator component unit tests', function () { }) it('back navigation button is enabled', function () { - const node = wrapper.find('div.backforward > div.navigationButtonContainer > .backButton').node - assert.equal(node.props.disabled, false) + const node = wrapper.find('div.backforward > div.navigationButtonContainer .backButton').getDOMNode() + assert.equal(node.disabled, false) }) it('forward navigation button is enabled', function () { - const node = wrapper.find('div.backforward > div.navigationButtonContainer > .forwardButton').node - assert.equal(node.props.disabled, false) + const node = wrapper.find('div.backforward > div.navigationButtonContainer .forwardButton').getDOMNode() + assert.equal(node.disabled, false) + }) + + it('lion icon is enabled', function () { + const node = wrapper.find('[data-test-id="braveShieldButton"]').getDOMNode() + assert.equal(node.disabled, false) }) }) @@ -112,24 +111,16 @@ describe('Navigator component unit tests', function () { let wrapper before(function () { - const appState2 = appState.mergeIn(['tabs', 0], { + const appState2 = appStoreRenderer.mergeIn(['tabs', 0], { messageBoxDetail: { message: 'sample message', title: 'sample title' } }) - appStoreRenderer.state = Immutable.fromJS(appState2) - wrapper = shallow( - - ) + appStore.state = appState2 + windowStore.state = defaultWindowStore + wrapper = mount() }) it('disables both back/forward navigationButtonContainers', function () { @@ -137,101 +128,18 @@ describe('Navigator component unit tests', function () { }) it('disables the back navigation button', function () { - const node = wrapper.find('div.backforward > div.navigationButtonContainer > .backButton').node - assert.equal(node.props.disabled, true) + const node = wrapper.find('div.backforward > div.navigationButtonContainer .backButton').getDOMNode() + assert.equal(node.disabled, true) }) it('disables the forward navigation button', function () { - const node = wrapper.find('div.backforward > div.navigationButtonContainer > .forwardButton').node - assert.equal(node.props.disabled, true) + const node = wrapper.find('div.backforward > div.navigationButtonContainer .forwardButton').getDOMNode() + assert.equal(node.disabled, true) }) it('disables the lion icon', function () { - const node = wrapper.find('[testId="braveShieldButton"]').node - assert.equal(node.props.disabled, true) - }) - }) - - describe('getTotalBlocks', function () { - let instance - - before(function () { - appStoreRenderer.state = Immutable.fromJS(appState) - let wrapper = shallow( - - ) - instance = wrapper.instance() - }) - - it('returns false if there are no units blocked', function () { - const frames = Immutable.fromJS({ - adblock: { blocked: [] }, - trackingProtection: { blocked: [] }, - noScript: { blocked: [] }, - fingerprintingProtection: { blocked: [] } - }) - const result = instance.getTotalBlocks(frames) - assert.equal(result, false) - }) - - it('returns total of items (ads / trackers / scripts / fingerprints) blocked', function () { - const frames = Immutable.fromJS({ - adblock: { blocked: [1] }, - trackingProtection: { blocked: [1, 2] }, - noScript: { blocked: [1, 2, 3, 4] }, - fingerprintingProtection: { blocked: [1, 2, 3, 4, 5, 6, 7, 8] } - }) - const result = instance.getTotalBlocks(frames) - assert.equal(result, 15) - }) - - it('defaults values to 0 if element is not a list or is not present', function () { - const frames = Immutable.fromJS({ - adblock: { blocked: 'not a list' }, - trackingProtection: {}, - noScript: { blocked: [1] }, - fingerprintingProtection: { blocked: {} } - }) - const result = instance.getTotalBlocks(frames) - assert.equal(result, 1) - }) - - it('returns false if the input is falsey', function () { - assert.equal(instance.getTotalBlocks(), false) - assert.equal(instance.getTotalBlocks(undefined), false) - assert.equal(instance.getTotalBlocks(null), false) - assert.equal(instance.getTotalBlocks(false), false) - }) - - it('converts the input to an immutable object', function () { - const mutableFrames = { - adblock: { blocked: [1] }, - trackingProtection: { blocked: [1, 2] }, - noScript: { blocked: [1, 2, 3, 4] }, - fingerprintingProtection: { blocked: [1, 2, 3, 4, 5, 6, 7, 8] } - } - const result = instance.getTotalBlocks(mutableFrames) - assert.equal(result, 15) - }) - - it('returns "99+" if tracker count is > 99', function () { - const mutableFrames = { - adblock: { blocked: [] } - } - - for (let i = 1; i < 101; i++) { - mutableFrames.adblock.blocked.push(i) - } - - const result = instance.getTotalBlocks(mutableFrames) - assert.equal(result, '99+') + const node = wrapper.find('[data-test-id="braveShieldButton"]').getDOMNode() + assert.equal(node.disabled, true) }) }) }) diff --git a/test/unit/state/frameStateUtilTest.js b/test/unit/state/frameStateUtilTest.js index dbc70f315c4..2c0042766f9 100644 --- a/test/unit/state/frameStateUtilTest.js +++ b/test/unit/state/frameStateUtilTest.js @@ -392,4 +392,70 @@ describe('frameStateUtil', function () { assert.equal(-1, result) }) }) + + describe('getTotalBlocks', function () { + it('returns false if there are no units blocked', function () { + const frames = Immutable.fromJS({ + adblock: { blocked: [] }, + trackingProtection: { blocked: [] }, + noScript: { blocked: [] }, + fingerprintingProtection: { blocked: [] } + }) + const result = frameStateUtil.getTotalBlocks(frames) + assert.equal(result, false) + }) + + it('returns total of items (ads / trackers / scripts / fingerprints) blocked', function () { + const frames = Immutable.fromJS({ + adblock: { blocked: [1] }, + trackingProtection: { blocked: [1, 2] }, + noScript: { blocked: [1, 2, 3, 4] }, + fingerprintingProtection: { blocked: [1, 2, 3, 4, 5, 6, 7, 8] } + }) + const result = frameStateUtil.getTotalBlocks(frames) + assert.equal(result, 15) + }) + + it('defaults values to 0 if element is not a list or is not present', function () { + const frames = Immutable.fromJS({ + adblock: { blocked: 'not a list' }, + trackingProtection: {}, + noScript: { blocked: [1] }, + fingerprintingProtection: { blocked: {} } + }) + const result = frameStateUtil.getTotalBlocks(frames) + assert.equal(result, 1) + }) + + it('returns false if the input is falsey', function () { + assert.equal(frameStateUtil.getTotalBlocks(), false) + assert.equal(frameStateUtil.getTotalBlocks(undefined), false) + assert.equal(frameStateUtil.getTotalBlocks(null), false) + assert.equal(frameStateUtil.getTotalBlocks(false), false) + }) + + it('converts the input to an immutable object', function () { + const mutableFrames = { + adblock: { blocked: [1] }, + trackingProtection: { blocked: [1, 2] }, + noScript: { blocked: [1, 2, 3, 4] }, + fingerprintingProtection: { blocked: [1, 2, 3, 4, 5, 6, 7, 8] } + } + const result = frameStateUtil.getTotalBlocks(mutableFrames) + assert.equal(result, 15) + }) + + it('returns "99+" if tracker count is > 99', function () { + const mutableFrames = { + adblock: { blocked: [] } + } + + for (let i = 1; i < 101; i++) { + mutableFrames.adblock.blocked.push(i) + } + + const result = frameStateUtil.getTotalBlocks(mutableFrames) + assert.equal(result, '99+') + }) + }) })