Change SettingsLanguagesPageBrowserTest to CrSettingsLanguagesPageTest

chrome/test/data/webui/settings/languages_page_tests.js

Index: chrome/test/data/webui/settings/languages_page_tests.js
diff --git a/chrome/test/data/webui/settings/languages_page_browsertest.js b/chrome/test/data/webui/settings/languages_page_tests.js
similarity index 46%
rename from chrome/test/data/webui/settings/languages_page_browsertest.js
rename to chrome/test/data/webui/settings/languages_page_tests.js
index ae7dfab6a551a5c136e3f01768bb1afa2edb1b84..8bccfad534280762cb873ba0299faaa60d106d9c 100644
--- a/chrome/test/data/webui/settings/languages_page_browsertest.js
+++ b/chrome/test/data/webui/settings/languages_page_tests.js
@@ -1,117 +1,78 @@
-// Copyright 2016 The Chromium Authors. All rights reserved.
+// Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/** @fileoverview Suite of tests for settings-languages-page. */
-
-/** @const {string} Path to root from chrome/test/data/webui/settings/. */
-var ROOT_PATH = '../../../../../';
-
-// Polymer BrowserTest fixture.
-GEN_INCLUDE(
-    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
-// SettingsPageBrowserTest fixture.
-GEN_INCLUDE([ROOT_PATH +
-             'chrome/test/data/webui/settings/settings_page_browsertest.js']);
-
-/**
- * Test class for settings-languages-page UI.
- * @constructor
- * @extends {SettingsPageBrowserTest}
- */
-function SettingsLanguagesPageBrowserTest() {}
-
-SettingsLanguagesPageBrowserTest.prototype = {
-  __proto__: SettingsPageBrowserTest.prototype,
-
-  /** @override */
-  preLoad: function() {
-    SettingsPageBrowserTest.prototype.preLoad.call(this);
-    settingsHidePagesByDefaultForTest = true;
-  },
-};
-
-// Flaky on Windows, Mac and Linux. See https://crbug.com/641400.
-//
-// May time out on debug builders and memory bots because the Settings page can
-// take several seconds to load in a Release build and several times that in a
-// Debug build. See https://crbug.com/558434.
-//
-// Disabling this test in general.
-GEN('#define MAYBE_LanguagesPage DISABLED_LanguagesPage');
-
-// Runs languages page tests.
-TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
-  var self = this;
-
-  suiteSetup(function() {
-    self.toggleAdvanced();
-  });
+cr.define('languages_page_tests', function() {
+  /** @enum {string} */
+  const TestNames = {

[dpapad, 2017/04/25 20:41:17]

See other comment in this file about ES6 usage.

[michaelpg, 2017/05/04 22:54:19]

Acknowledged.

+    AddLanguagesDialog: 'add languages dialog',
+    LanguageMenu: 'language menu',
+    InputMethods: 'input methods',
+    Spellcheck: 'spellcheck',
+  };
 
   suite('languages page', function() {
-    testing.Test.disableAnimationsAndTransitions();
-
-    var languagesSection;
-    var languagesPage;
-    var languagesCollapse;
-    var languageHelper;
-    var actionMenu;
-
-    /**
-     * @param {numExpected} Expected number of languages to eventually be
-     *     enabled.
-     * @return {!Promise} Resolved when the number of enabled languages changes
-     *     to match expectations.
-     */
-    function whenNumEnabledLanguagesBecomes(numExpected) {
-      assert(!!languagesPage);
-      return new Promise(function(resolve, reject) {
-        languagesPage.addEventListener('languages-changed', function changed() {
-          if (languagesPage.languages.enabled.length != numExpected)
-            return;
-          resolve();
-          languagesPage.removeEventListener('languages-changed', changed);
-        });
-      });
-    }
-
-    // Returns supported languages that are not enabled.
-    function getAvailableLanguages() {
-      return languagesPage.languages.supported.filter(function(language) {
-        return !languageHelper.isLanguageEnabled(language.code);
-      });
-    }
+    /** @type {?LanguageHelper} */
+    var languageHelper = null;
+    /** @type {?SettingsLanguagesPageElement} */
+    var languagesPage = null;
+    /** @type {?IronCollapseElement} */
+    var languagesCollapse = null;
+    /** @type {?CrActionMenuElement} */
+    var actionMenu = null;
+    /** @type {?settings.LanguagesBrowserProxy} */
+    var browserProxy = null;
+
+    // Enabled language pref name for the platform.
+    const languagesPref =
+        cr.isChromeOS ? 'settings.language.preferred_languages'
+                      : 'intl.accept_languages';
+
+    // Initial value of enabled languages pref used in tests.
+    const initialLanguages = 'en-US,sw';
 
     suiteSetup(function() {
-      var page = self.basicPage;
-      page.set('pageVisibility.languages', true);
-      Polymer.dom.flush();
-
-      languagesSection = assert(this.getSection(page, 'languages'));
-      languagesPage = assert(
-          languagesSection.querySelector('settings-languages-page'));
-      languagesCollapse = languagesPage.$.languagesCollapse;
-      languagesCollapse.opened = true;
-      actionMenu = languagesPage.$.menu.get();
-
-      languageHelper = languagesPage.languageHelper;
-      return languageHelper.whenReady();
-    }.bind(this));
-
-    teardown(function(done) {
-      if (actionMenu.open)
-        actionMenu.close();
+      testing.Test.disableAnimationsAndTransitions();
+      PolymerTest.clearBody();
+      CrSettingsPrefs.deferInitialization = true;
+    });
 
-      // Close the section if we're in a sub-page.
-      if (settings.getCurrentRoute().isSubpage()) {
-        settings.navigateTo(settings.Route.BASIC);
-        setTimeout(done);
-      } else {
-        done();
-      }
+    setup(function() {
+      var settingsPrefs = document.createElement('settings-prefs');
+      var settingsPrivate =
+          new settings.FakeSettingsPrivate(settings.getFakeLanguagePrefs());
+      settingsPrefs.initialize(settingsPrivate);
+      document.body.appendChild(settingsPrefs);
+      return CrSettingsPrefs.initialized.then(function() {
+        // Set up test browser proxy.
+        browserProxy = new settings.TestLanguagesBrowserProxy();
+        settings.LanguagesBrowserProxyImpl.instance_ = browserProxy;
+
+        // Set up fake languageSettingsPrivate API.
+        var languageSettingsPrivate = browserProxy.getLanguageSettingsPrivate();
+        languageSettingsPrivate.setSettingsPrefs(settingsPrefs);
+
+        languagesPage = document.createElement('settings-languages-page');
+
+        // Prefs would normally be data-bound to settings-languages-page.
+        languagesPage.prefs = settingsPrefs.prefs;
+        test_util.fakeDataBind(settingsPrefs, languagesPage, 'prefs');
+
+        document.body.appendChild(languagesPage);
+        languagesCollapse = languagesPage.$.languagesCollapse;
+        languagesCollapse.opened = true;
+        actionMenu = languagesPage.$.menu.get();
+
+        languageHelper = languagesPage.languageHelper;
+        return languageHelper.whenReady();
+      });
+    });
+
+    teardown(function() {
+      PolymerTest.clearBody();
     });
 
-    suite('add languages dialog', function() {
+    suite(TestNames.AddLanguagesDialog, function() {
       var dialog;
       var dialogItems;
       var cancelButton;
@@ -158,25 +119,21 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       });
 
       test('add languages and cancel', function(done) {
-        var numEnabled = languagesPage.languages.enabled.length;
-
         // Check some languages.
-        MockInteractions.tap(dialogItems[0]);
-        MockInteractions.tap(dialogItems[1]);
+        MockInteractions.tap(dialogItems[1]);  // en-CA.
+        MockInteractions.tap(dialogItems[2]);  // tk.
 
         // Canceling the dialog should close and remove it without enabling
         // the checked languages. A small timeout lets us check this.
         MockInteractions.tap(cancelButton);
         setTimeout(function() {
-          // Number of enabled languages should be the same.
-          assertEquals(numEnabled, languagesPage.languages.enabled.length);
+          assertEquals(initialLanguages,
+                       languageHelper.getPref(languagesPref).value);
           done();
         }, 100);
       });
 
       test('add languages and confirm', function() {
-        var numEnabled = languagesPage.languages.enabled.length;
-
         // No languages have been checked, so the action button is inert.
         MockInteractions.tap(actionButton);
         Polymer.dom.flush();
@@ -189,23 +146,22 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
         assertTrue(actionButton.disabled);
 
         // Check multiple languages.
-        MockInteractions.tap(dialogItems[0]);
-        MockInteractions.tap(dialogItems[1]);
+        MockInteractions.tap(dialogItems[0]);  // en.
+        MockInteractions.tap(dialogItems[2]);  // tk.
         assertFalse(actionButton.disabled);
 
         // The action button should close and remove the dialog, enabling the
         // checked languages.
         MockInteractions.tap(actionButton);
 
-        // Wait for the languages to be enabled by the browser.
-        return whenNumEnabledLanguagesBecomes(numEnabled + 2);
+        assertEquals(
+            initialLanguages + ',en,tk',
+            languageHelper.getPref(languagesPref).value);
       });
     });
 
-    suite('language menu', function() {
-      var origTranslateEnabled;
-
-      /**
+    suite(TestNames.LanguageMenu, function() {
+      /*
        * Finds, asserts and returns the menu item for the given i18n key.
        * @param {string} i18nKey Name of the i18n string for the item's text.
        * @return {!HTMLElement} Menu item.
@@ -218,7 +174,7 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
         return assert(menuItem, 'Menu item "' + i18nKey + '" not found');
       }
 
-      /**
+      /*
        * Checks the visibility of each expected menu item button.
        * param {!Object<boolean>} Dictionary from i18n keys to expected
        *     visibility of those menu items.
@@ -232,18 +188,6 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
         }
       }
 
-      suiteSetup(function() {
-        // Cache the value of Translate to avoid side effects.
-        origTranslateEnabled = languageHelper.prefs.translate.enabled.value;
-      });
-
-      suiteTeardown(function() {
-        var cur = languageHelper.prefs.translate.enabled.value;
-        // Restore the value of Translate.
-        languageHelper.setPrefValue('translate.enabled', origTranslateEnabled);
-        cur = languageHelper.prefs.translate.enabled.value;
-      });
-
       test('structure', function() {
         var languageOptionsDropdownTrigger = languagesCollapse.querySelector(
             'paper-icon-button');
@@ -251,9 +195,6 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
         MockInteractions.tap(languageOptionsDropdownTrigger);
         assertTrue(actionMenu.open);
 
-        // Enable Translate so the menu always shows the Translate checkbox.
-        languageHelper.setPrefValue('translate.enabled', true);
-
         var separator = actionMenu.querySelector('hr');
         assertEquals(1, separator.offsetHeight);
 
@@ -266,37 +207,36 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       });
 
       test('test translate.enable toggle', function() {
-        languageHelper.setPrefValue('translate.enabled', true);
-        var toggle = languagesPage.$.offerTranslateOtherLangs.root
-            .querySelectorAll('paper-toggle-button')[0];
-        assertTrue(!!toggle);
+        var settingsToggle = languagesPage.$.offerTranslateOtherLangs;
+        assertTrue(!!settingsToggle);
+        var paperToggle = settingsToggle.$$('paper-toggle-button');
+        assertTrue(!!paperToggle);
 
-        // Clicking on toggle switch it to false.
-        MockInteractions.tap(toggle);
+        // Clicking on the toggle switches it to false.
+        MockInteractions.tap(paperToggle);

[dpapad, 2017/04/25 20:41:17]

Is taping the internal paper-toggle necessary? Would it work if we just tap the
outer settings-toggle-button?

[michaelpg, 2017/05/04 22:54:19]

Yes, it's necessary; nothing forwards the mock tap on the settings-toggle-button
to the paper-toggle-button.

         var newToggleValue = languageHelper.prefs.translate.enabled.value;
         assertFalse(newToggleValue);
 
-        // Clicking on toggle switch it to true again.
-        MockInteractions.tap(toggle);
+        // Clicking on the toggle switches it to true again.
+        MockInteractions.tap(paperToggle);
         newToggleValue = languageHelper.prefs.translate.enabled.value;
         assertTrue(newToggleValue);
       });
 
       test('toggle translate for a specific language', function(done) {
-        // Enable Translate so the menu always shows the Translate checkbox.
-        languageHelper.setPrefValue('translate.enabled', true);
-        languagesPage.set('languages.translateTarget', 'foo');
-        languagesPage.set('languages.enabled.1.supportsTranslate', true);
-
+        // Open options for 'sw'.
         var languageOptionsDropdownTrigger =
             languagesCollapse.querySelectorAll('paper-icon-button')[1];
         assertTrue(!!languageOptionsDropdownTrigger);
         MockInteractions.tap(languageOptionsDropdownTrigger);
         assertTrue(actionMenu.open);
 
-        // Toggle the translate option.
+        // 'sw' supports translate to the target language ('en').
         var translateOption = getMenuItem('offerToTranslateInThisLanguage');
         assertFalse(translateOption.disabled);
+        assertTrue(translateOption.checked);
+
+        // Toggle the translate option.
         MockInteractions.tap(translateOption);
 
         // Menu should stay open briefly.
@@ -304,6 +244,9 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
         // Guaranteed to run later than the menu close delay.
         setTimeout(function() {
           assertFalse(actionMenu.open);
+          assertDeepEquals(
+              ['en-US', 'sw'],
+              languageHelper.prefs.translate_blocked_languages.value);
           done();
         }, settings.kMenuCloseDelay + 1);
       });
@@ -311,10 +254,8 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       test('disable translate hides language-specific option', function() {
         // Disables translate.
         languageHelper.setPrefValue('translate.enabled', false);
-        languagesPage.set('languages.translateTarget', 'foo');
-        languagesPage.set('languages.enabled.1.supportsTranslate', true);
 
-        // Makes sure language-specific menu exists.
+        // Open options for 'sw'.
         var languageOptionsDropdownTrigger =
             languagesCollapse.querySelectorAll('paper-icon-button')[1];
         assertTrue(!!languageOptionsDropdownTrigger);
@@ -328,88 +269,76 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       });
 
       test('remove language', function() {
-        var numEnabled = languagesPage.languages.enabled.length;
-
-        // Enabled a language which we can then disable.
-        var newLanguage = assert(getAvailableLanguages()[0]);
-        languageHelper.enableLanguage(newLanguage.code);
-
-        // Wait for the language to be enabled.
-        return whenNumEnabledLanguagesBecomes(numEnabled + 1).then(function() {
-          // Populate the dom-repeat.
-          Polymer.dom.flush();
-
-          // Find the new language item.
-          var items = languagesCollapse.querySelectorAll('.list-item');
-          var domRepeat = assert(
-              languagesCollapse.querySelector('template[is="dom-repeat"]'));
-          var item = Array.from(items).find(function(el) {
-            return domRepeat.itemForElement(el) &&
-                domRepeat.itemForElement(el).language == newLanguage;
-          });
-
-          // Open the menu and select Remove.
-          MockInteractions.tap(item.querySelector('paper-icon-button'));
-
-          assertTrue(actionMenu.open);
-          var removeMenuItem = getMenuItem('removeLanguage');
-          assertFalse(removeMenuItem.disabled);
-          MockInteractions.tap(removeMenuItem);
-          assertFalse(actionMenu.open);
+        // Enable a language which we can then disable.
+        languageHelper.enableLanguage('no');
 
-          // We should go back down to the original number of enabled languages.
-          return whenNumEnabledLanguagesBecomes(numEnabled);
-        }).then(function() {
-          assertFalse(languageHelper.isLanguageEnabled(newLanguage.code));
+        // Populate the dom-repeat.
+        Polymer.dom.flush();
+
+        // Find the new language item.
+        var items = languagesCollapse.querySelectorAll('.list-item');
+        var domRepeat = assert(
+            languagesCollapse.querySelector('template[is="dom-repeat"]'));
+        var item = Array.from(items).find(function(el) {
+          return domRepeat.itemForElement(el) &&
+              domRepeat.itemForElement(el).language.code == 'no';
         });
+
+        // Open the menu and select Remove.
+        MockInteractions.tap(item.querySelector('paper-icon-button'));
+
+        assertTrue(actionMenu.open);
+        var removeMenuItem = getMenuItem('removeLanguage');
+        assertFalse(removeMenuItem.disabled);
+        MockInteractions.tap(removeMenuItem);
+        assertFalse(actionMenu.open);
+
+        assertEquals(
+            initialLanguages, languageHelper.getPref(languagesPref).value);
       });
 
       test('move up/down buttons', function() {
         // Add several languages.
-        var numEnabled = languagesPage.languages.enabled.length;
-        var available = getAvailableLanguages();
-        for (var i = 0; i < 4; i++)
-          languageHelper.enableLanguage(assert(available[i]).code);
-
-        return whenNumEnabledLanguagesBecomes(numEnabled + 4).then(function() {
-          Polymer.dom.flush();
-
-          var menuButtons =
-              languagesCollapse.querySelectorAll(
-                  '.list-item paper-icon-button[icon="cr:more-vert"]');
-
-          // First language should not have "Move up" or "Move to top".
-          MockInteractions.tap(menuButtons[0]);
-          assertMenuItemButtonsVisible({
-            moveToTop: false, moveUp: false, moveDown: true,
-          });
-          actionMenu.close();
-
-          // Second language should not have "Move up".
-          MockInteractions.tap(menuButtons[1]);
-          assertMenuItemButtonsVisible({
-            moveToTop: true, moveUp: false, moveDown: true,
-          });
-          actionMenu.close();
-
-          // Middle languages should have all buttons.
-          MockInteractions.tap(menuButtons[2]);
-          assertMenuItemButtonsVisible({
-            moveToTop: true, moveUp: true, moveDown: true,
-          });
-          actionMenu.close();
-
-          // Last language should not have "Move down".
-          MockInteractions.tap(menuButtons[menuButtons.length - 1]);
-          assertMenuItemButtonsVisible({
-            moveToTop: true, moveUp: true, moveDown: false,
-          });
-          actionMenu.close();
+        for (var language of ['en-CA', 'en-US', 'tk', 'no'])

[dpapad, 2017/04/25 20:41:17]

Technically the guide at
https://chromium.googlesource.com/chromium/src/+/master/docs/es6_chromium.md#...,
should be the authority on which ES6 features are OK to use in Chromium's WebUI
code and which not. Until recently me had paused that process (being busy with
MD Settings launch).

Can we hold off starting using ES6 features from test code, until our toolchain
is updated to support ES6? I am actively working on this
(https://codereview.chromium.org/2829933003), and hoping this will happen fairly
soon.

[michaelpg, 2017/05/04 22:54:19]

As discussed in standup, since our tests already use these features (and I think
this test predates that guide) I will leave as-is.

+          languageHelper.enableLanguage(language);
+
+        Polymer.dom.flush();
+
+        var menuButtons =
+            languagesCollapse.querySelectorAll(
+                '.list-item paper-icon-button[icon="cr:more-vert"]');
+
+        // First language should not have "Move up" or "Move to top".
+        MockInteractions.tap(menuButtons[0]);
+        assertMenuItemButtonsVisible({
+          moveToTop: false, moveUp: false, moveDown: true,
+        });
+        actionMenu.close();
+
+        // Second language should not have "Move up".
+        MockInteractions.tap(menuButtons[1]);
+        assertMenuItemButtonsVisible({
+          moveToTop: true, moveUp: false, moveDown: true,
+        });
+        actionMenu.close();
+
+        // Middle languages should have all buttons.
+        MockInteractions.tap(menuButtons[2]);
+        assertMenuItemButtonsVisible({
+          moveToTop: true, moveUp: true, moveDown: true,
+        });
+        actionMenu.close();
+
+        // Last language should not have "Move down".
+        MockInteractions.tap(menuButtons[menuButtons.length - 1]);
+        assertMenuItemButtonsVisible({
+          moveToTop: true, moveUp: true, moveDown: false,
         });
+        actionMenu.close();
       });
     });
 
-    test('manage input methods', function() {
+    test(TestNames.InputMethods, function() {
       var inputMethodsCollapse = languagesPage.$.inputMethodsCollapse;
       var inputMethodSettingsExist = !!inputMethodsCollapse;
       if (cr.isChromeOS) {
@@ -423,7 +352,7 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       }
     });
 
-    test('spellcheck', function() {
+    test(TestNames.Spellcheck, function() {
       var spellCheckCollapse = languagesPage.$.spellCheckCollapse;
       var spellCheckSettingsExist = !!spellCheckCollapse;
       if (cr.isMac) {
@@ -431,31 +360,36 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
       } else {
         assertTrue(spellCheckSettingsExist);
 
-        // Ensure no language has spell check enabled.
-        for (var i = 0; i < languagesPage.languages.enabled.length; i++) {
-          languagesPage.set(
-              'languages.enabled.' + i + '.spellCheckEnabled', false);
-        }
-
-        // The row button should have the extra row only if some language has
-        // spell check enabled.
+        // The row button should have a secondary row specifying which language
+        // spell check is enabled for.
         var triggerRow = languagesPage.$.spellCheckSubpageTrigger;
-        assertFalse(triggerRow.classList.contains('two-line'));
-        assertEquals(
-            0, triggerRow.querySelector('.secondary').textContent.length);
 
-        languagesPage.set(
-            'languages.enabled.0.language.supportsSpellcheck', true);
-        languagesPage.set('languages.enabled.0.spellCheckEnabled', true);
+        // en-US starts with spellcheck enabled, so the secondary row is
+        // populated.
         assertTrue(triggerRow.classList.contains('two-line'));
         assertLT(
             0, triggerRow.querySelector('.secondary').textContent.length);
+
+        MockInteractions.tap(triggerRow);
+        Polymer.dom.flush();
+
+        // Disable spellcheck for en-US.
+        var spellcheckLanguageToggle =
+            spellCheckCollapse.querySelector('paper-toggle-button[checked]');
+        assertTrue(!!spellcheckLanguageToggle);
+        MockInteractions.tap(spellcheckLanguageToggle);
+        assertFalse(spellcheckLanguageToggle.checked);
+        assertEquals(
+            0,
+            languageHelper.prefs.spellcheck.dictionaries.value.length);
+
+        // Now the secondary row is empty, so it shouldn't be shown.
+        assertFalse(triggerRow.classList.contains('two-line'));
+        assertEquals(
+            0, triggerRow.querySelector('.secondary').textContent.length);
       }
     });
-  }.bind(this));
-
-  // TODO(michaelpg): Test more aspects of the languages UI.
+  });
 
-  // Run all registered tests.
-  mocha.run();
+  return {TestNames: TestNames};
 });