test and split TabsTab component

app/renderer/components/preferences/tabsTab.js

@@ -0,0 +1,128 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../immutableComponent')
+
+const {DefaultSectionTitle} = require('../common/sectionTitle')
+const {SettingsList, SettingItem, SettingCheckbox} = require('../common/settings')
+
+const {SettingDropdown} = require('../common/dropdown')
+
+const {tabCloseAction} = require('../../../common/constants/settingsEnums')
+const {changeSetting} = require('../../lib/settingsUtil')
+const getSetting = require('../../../../js/settings').getSetting
+const settings = require('../../../../js/constants/settings')
+
+class TabsTab extends ImmutableComponent {
+  get tabsPerTabPageOption () {
+    return [6, 8, 10, 20, 100]
+  }
+
+  get tabCloseActionOptions () {
+    return [
+      {
+        id: 'tabCloseActionLastActive',
+        action: tabCloseAction.LAST_ACTIVE
+      },
+      {
+        id: 'tabCloseActionNext',
+        action: tabCloseAction.NEXT
+      },
+      {
+        id: 'tabCloseActionParent',
+        action: tabCloseAction.PARENT
+      }
+    ]
+  }
+  render () {
+    return (
+      <div>
+        <DefaultSectionTitle data-l10n-id='tabSettings' />
+        <SettingsList>
+          <SettingItem dataL10nId='tabsPerTabPage'>
+            <SettingDropdown
+              data-test-id='tabsPerTabPage'
+              value={getSetting(settings.TABS_PER_PAGE, this.props.settings)}
+              data-type='number'
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
+              {// Sorry, Brad says he hates primes :'(
+              this.tabsPerTabPageOption.map(option =>
+                <option
+                  data-test-id='tabsPerTabPageOption'
+                  data-test-active={
+                    getSetting(settings.TABS_PER_PAGE, this.props.settings) === option
+                  }
+                  value={option}
+                  key={option}>
+                  {option}
+                </option>
+              )}
+            </SettingDropdown>
+          </SettingItem>
+          <SettingItem dataL10nId='tabCloseAction'>
+            <SettingDropdown
+              value={getSetting(settings.TAB_CLOSE_ACTION, this.props.settings)}
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TAB_CLOSE_ACTION)}>
+              {this.tabCloseActionOptions.map(option =>
+                <option
+                  data-l10n-id={option.id}
+                  data-test-id='tabCloseActionActiveOption'
+                  data-test-active={
+                    getSetting(settings.TAB_CLOSE_ACTION, this.props.settings) === option.action
+                  }
+                  value={option.action}
+                />
+              )}
+            </SettingDropdown>
+          </SettingItem>
+          <SettingCheckbox
+            dataL10nId='switchToNewTabs'
+            dataTestId='switchToNewTabs'
+            testIsEnabled={
+              getSetting(settings.SWITCH_TO_NEW_TABS, this.props.settings) === true
+            }
+            prefKey={settings.SWITCH_TO_NEW_TABS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingCheckbox
+            dataL10nId='paintTabs'
+            dataTestId='paintTabs'
+            testIsEnabled={
+              getSetting(settings.PAINT_TABS, this.props.settings) === true
+            }
+            prefKey={settings.PAINT_TABS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingCheckbox
+            dataL10nId='showTabPreviews'
+            dataTestId='showTabPreviews'
+            testIsEnabled={
+              getSetting(settings.SHOW_TAB_PREVIEWS, this.props.settings) === true
+            }
+            prefKey={settings.SHOW_TAB_PREVIEWS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingItem dataL10nId='dashboardSettingsTitle'>
+            <SettingCheckbox
+              dataL10nId='dashboardShowImages'
+              dataTestId='dashboardShowImages'
+              testIsEnabled={
+                getSetting(settings.SHOW_DASHBOARD_IMAGES, this.props.settings) === true
+              }
+              prefKey={settings.SHOW_DASHBOARD_IMAGES}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+            />
+          </SettingItem>
+        </SettingsList>
+      </div>
+    )
+  }
+}
+
+module.exports = TabsTab

js/about/preferences.js

@@ -20,6 +20,7 @@ const BrowserButton = require('../../app/renderer/components/common/browserButto
 
 // Tabs
 const PaymentsTab = require('../../app/renderer/components/preferences/paymentsTab')
+const TabsTab = require('../../app/renderer/components/preferences/tabsTab')
 const SyncTab = require('../../app/renderer/components/preferences/syncTab')
 const PluginsTab = require('../../app/renderer/components/preferences/pluginsTab')
 const ExtensionsTab = require('../../app/renderer/components/preferences/extensionsTab')
@@ -34,7 +35,7 @@ const messages = require('../constants/messages')
 const settings = require('../constants/settings')
 const {changeSetting} = require('../../app/renderer/lib/settingsUtil')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
-const {startsWithOption, newTabMode, bookmarksToolbarMode, tabCloseAction, fullscreenOption, autoplayOption} = require('../../app/common/constants/settingsEnums')
+const {startsWithOption, newTabMode, bookmarksToolbarMode, fullscreenOption, autoplayOption} = require('../../app/common/constants/settingsEnums')
 
 const aboutActions = require('./aboutActions')
 const appActions = require('../actions/appActions')
@@ -336,43 +337,6 @@ class SearchTab extends ImmutableComponent {
   }
 }
 
-class TabsTab extends ImmutableComponent {
-  render () {
-    return <div>
-      <DefaultSectionTitle data-l10n-id='tabSettings' />
-      <SettingsList>
-        <SettingItem dataL10nId='tabsPerTabPage'>
-          <SettingDropdown
-            value={getSetting(settings.TABS_PER_PAGE, this.props.settings)}
-            data-type='number'
-            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
-            {
-              // Sorry, Brad says he hates primes :'(
-              [6, 8, 10, 20, 100].map((x) =>
-                <option value={x} key={x}>{x}</option>)
-            }
-          </SettingDropdown>
-        </SettingItem>
-        <SettingItem dataL10nId='tabCloseAction'>
-          <SettingDropdown
-            value={getSetting(settings.TAB_CLOSE_ACTION, this.props.settings)}
-            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TAB_CLOSE_ACTION)}>
-            <option data-l10n-id='tabCloseActionLastActive' value={tabCloseAction.LAST_ACTIVE} />
-            <option data-l10n-id='tabCloseActionNext' value={tabCloseAction.NEXT} />
-            <option data-l10n-id='tabCloseActionParent' value={tabCloseAction.PARENT} />
-          </SettingDropdown>
-        </SettingItem>
-        <SettingCheckbox dataL10nId='switchToNewTabs' prefKey={settings.SWITCH_TO_NEW_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='paintTabs' prefKey={settings.PAINT_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='showTabPreviews' prefKey={settings.SHOW_TAB_PREVIEWS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingItem dataL10nId='dashboardSettingsTitle'>
-          <SettingCheckbox dataL10nId='dashboardShowImages' prefKey={settings.SHOW_DASHBOARD_IMAGES} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        </SettingItem>
-      </SettingsList>
-    </div>
-  }
-}
-
 class SitePermissionsPage extends React.Component {
   hasEntryForPermission (name) {
     return this.props.siteSettings.some((value) => {

test/lib/selectors.js

@@ -128,5 +128,9 @@ module.exports = {
   downloadRemoveFromList: '[data-test-id="downloadRemoveFromList"]',
 
   siteInfoDialog: '[data-test-id="siteInfoDialog"]',
-  viewCertificateButton: '[data-test-id="viewCertificate"]'
+  viewCertificateButton: '[data-test-id="viewCertificate"]',
+
+  // about:preferences#tabs
+  tabsPerTabPageActiveOption: '[data-test-id="tabsPerTabPageOption"][data-test-active="true"]',
+  tabCloseActionActiveOption: '[data-test-id="tabCloseActionActiveOption"][data-test-active="true"]'
 }