Change SettingsLanguagesPageBrowserTest to CrSettingsLanguagesPageTest

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

-// 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();
+    /** @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;
 
-    var languagesSection;
-    var languagesPage;
-    var languagesCollapse;
-    var languageHelper;
-    var actionMenu;
+    // Enabled language pref name for the platform.
+    const languagesPref =
+        cr.isChromeOS ? 'settings.language.preferred_languages'
+                      : 'intl.accept_languages';
 
-    /**
-     * @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);
-      });
-    }
+    // 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();
-
-      // Close the section if we're in a sub-page.
-      if (settings.getCurrentRoute().isSubpage()) {
-        settings.navigateTo(settings.Route.BASIC);
-        setTimeout(done);
-      } else {
-        done();
-      }
+      testing.Test.disableAnimationsAndTransitions();
+      PolymerTest.clearBody();
+      CrSettingsPrefs.deferInitialization = true;
     });
 
-    suite('add languages dialog', function() {
+    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(TestNames.AddLanguagesDialog, function() {
       var dialog;
       var dialogItems;
       var cancelButton;
       var actionButton;
 
       setup(function(done) {
         var addLanguagesButton =
             languagesCollapse.querySelector('#addLanguages');
         MockInteractions.tap(addLanguagesButton);
 
@@ skipping 26 matching lines @@
         Polymer.dom.flush();
         assertEquals(null, languagesPage.$$('settings-add-languages-dialog'));
       });
 
       test('cancel', function() {
         // Canceling the dialog should close and remove it.
         MockInteractions.tap(cancelButton);
       });
 
       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();
         assertEquals(dialog, languagesPage.$$('settings-add-languages-dialog'));
 
         // Check and uncheck one language.
         MockInteractions.tap(dialogItems[0]);
         assertFalse(actionButton.disabled);
         MockInteractions.tap(dialogItems[0]);
         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.
        */
       function getMenuItem(i18nKey) {
         var i18nString = assert(loadTimeData.getString(i18nKey));
         var menuItems = actionMenu.querySelectorAll('.dropdown-item');
         var menuItem = Array.from(menuItems).find(
             item => item.textContent.trim() == i18nString);
         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.
        */
       function assertMenuItemButtonsVisible(buttonVisibility) {
         assertTrue(actionMenu.open);
         for (var buttonKey of Object.keys(buttonVisibility)) {
           var buttonItem = getMenuItem(buttonKey);
           assertEquals(!buttonVisibility[buttonKey], buttonItem.hidden,
                        'Menu item "' + buttonKey + '" hidden');
         }
       }
 
-      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');
         assertTrue(!!languageOptionsDropdownTrigger);
         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);
 
         // Disable Translate. On platforms that can't change the UI language,
         // this hides all the checkboxes, so the separator isn't needed.
         // Chrome OS and Windows still show a checkbox and thus the separator.
         languageHelper.setPrefValue('translate.enabled', false);
         assertEquals(
             cr.isChromeOS || cr.isWindows ? 1 : 0, separator.offsetHeight);
       });
 
       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.
         assertTrue(actionMenu.open);
         // 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);
       });
 
       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);
         MockInteractions.tap(languageOptionsDropdownTrigger);
         assertTrue(actionMenu.open);
 
         // The language-specific translation option should be hidden.
         var translateOption = actionMenu.querySelector('#offerTranslations');
         assertTrue(!!translateOption);
         assertTrue(translateOption.hidden);
       });
 
       test('remove language', function() {
-        var numEnabled = languagesPage.languages.enabled.length;
+        // Enable a language which we can then disable.
+        languageHelper.enableLanguage('no');
 
-        // Enabled a language which we can then disable.
-        var newLanguage = assert(getAvailableLanguages()[0]);
-        languageHelper.enableLanguage(newLanguage.code);
+        // Populate the dom-repeat.
+        Polymer.dom.flush();
 
-        // 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.code == 'no';
+        });
 
-          // 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'));
 
-          // 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);
 
-          assertTrue(actionMenu.open);
-          var removeMenuItem = getMenuItem('removeLanguage');
-          assertFalse(removeMenuItem.disabled);
-          MockInteractions.tap(removeMenuItem);
-          assertFalse(actionMenu.open);
-
-          // We should go back down to the original number of enabled languages.
-          return whenNumEnabledLanguagesBecomes(numEnabled);
-        }).then(function() {
-          assertFalse(languageHelper.isLanguageEnabled(newLanguage.code));
-        });
+        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);
+        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);
 
-        return whenNumEnabledLanguagesBecomes(numEnabled + 4).then(function() {
-          Polymer.dom.flush();
+        Polymer.dom.flush();
 
-          var menuButtons =
-              languagesCollapse.querySelectorAll(
-                  '.list-item paper-icon-button[icon="cr:more-vert"]');
+        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();
+        // 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();
+        // 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();
+        // 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();
+        // 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) {
         assertTrue(inputMethodSettingsExist);
         var manageInputMethodsButton =
             inputMethodsCollapse.querySelector('#manageInputMethods');
         MockInteractions.tap(manageInputMethodsButton);
         assertTrue(!!languagesPage.$$('settings-manage-input-methods-page'));
       } else {
         assertFalse(inputMethodSettingsExist);
       }
     });
 
-    test('spellcheck', function() {
+    test(TestNames.Spellcheck, function() {
       var spellCheckCollapse = languagesPage.$.spellCheckCollapse;
       var spellCheckSettingsExist = !!spellCheckCollapse;
       if (cr.isMac) {
         assertFalse(spellCheckSettingsExist);
       } 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 a secondary row specifying which language
+        // spell check is enabled for.
+        var triggerRow = languagesPage.$.spellCheckSubpageTrigger;
 
-        // The row button should have the extra row only if some language has
-        // spell check enabled.
-        var triggerRow = languagesPage.$.spellCheckSubpageTrigger;
+        // 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);
-
-        languagesPage.set(
-            'languages.enabled.0.language.supportsSpellcheck', true);
-        languagesPage.set('languages.enabled.0.spellCheckEnabled', true);
-        assertTrue(triggerRow.classList.contains('two-line'));
-        assertLT(
-            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};
 });