Replace Manage Languages with dialog and dropdown item

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

 // Copyright 2016 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.
@@ skipping 33 matching lines @@
 TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
   suite('languages page', function() {
     testing.Test.disableAnimationsAndTransitions();
 
     this.toggleAdvanced();
     var advanced = this.getPage('advanced');
 
     var languagesSection;
     var languagesPage;
     var languageHelper;
+
+    /**
+     * @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 a supported language that is not enabled, for testing.
+    function getAvailableLanguage() {
+      return languagesPage.languages.supported.find(function(language) {
+        return !languageHelper.isLanguageEnabled(language.code);
+      });
+    }
+
     suiteSetup(function() {
       advanced.set('pageVisibility.languages', true);
       Polymer.dom.flush();
 
       languagesSection = this.getSection(advanced, 'languages');
       assertTrue(!!languagesSection);
       languagesPage = languagesSection.querySelector('settings-languages-page');
       assertTrue(!!languagesPage);
 
       languageHelper = languagesPage.languageHelper;
       return languageHelper.whenReady();
     }.bind(this));
 
     teardown(function(done) {
       // Close the section if we're in a sub-page.
       if (settings.getCurrentRoute().isSubpage()) {
-        settings.navigateTo(settings.Route.ADVANCED);
+        settings.navigateTo(settings.Route.BASIC);
         setTimeout(done);
       } else {
         done();
       }
     });
 
-    test('manage languages', function() {
-      var manageLanguagesButton =
-          languagesPage.$.languagesCollapse.querySelector(
-              '.list-button:last-of-type');
-      MockInteractions.tap(manageLanguagesButton);
-      assertTrue(!!languagesPage.$$('settings-manage-languages-page'));
+    suite('add languages dialog', function() {
+      var dialog;
+      var dialogItems;
+      var cancelButton;
+      var actionButton;
+
+      setup(function(done) {
+        var addLanguagesButton = languagesPage.$.languagesCollapse
+            .querySelector('.list-button:last-of-type');
+        MockInteractions.tap(addLanguagesButton);
+
+        // The page stamps the dialog and registers listeners asynchronously.
+        Polymer.Base.async(function() {
+          dialog = languagesPage.$$('settings-add-languages-dialog');
+          assertTrue(!!dialog);
+
+          actionButton = assert(dialog.$$('.action-button'));
+          cancelButton = assert(dialog.$$('.cancel-button'));
+
+          // The fixed-height dialog's iron-list should stamp far fewer than
+          // 50 items.
+          dialogItems =
+              dialog.$.dialog.querySelectorAll('.list-item:not([hidden])');
+          assertGT(dialogItems.length, 1);
+          assertLT(dialogItems.length, 50);
+
+          // No languages have been checked, so the action button is disabled.
+          assertTrue(actionButton.disabled);
+          assertFalse(cancelButton.disabled);
+
+          done();
+        });
+      });
+
+      // After every test, check that the dialog is removed from the DOM.
+      teardown(function() {
+        Polymer.dom.flush();
+        assertEquals(null, languagesPage.$$('settings-add-languages-dialog'));
+      });
+
+      test('cancel', function() {
+        // Canceling the dialog should close and remove it.

[stevenjb, 2016/08/24 15:45:18]

I gues what is not obvious to me is where this test would fail if the dialog was
not closed, i.e. if the close fails?

[michaelpg, 2016/08/24 20:46:41]

in teardown: "After every test, check that the dialog is removed from the DOM."

+        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]);
+
+        // 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);
+          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]);
+        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);
+      });
     });
 
     test('Should not set UI language', function() {
       var languagesCollapse = languagesPage.$.languagesCollapse;
       var languageOptionsDropdownTrigger = languagesCollapse.querySelector(
           'paper-icon-button');
       assertTrue(!!languageOptionsDropdownTrigger);
 
       // This shouldn't get called.
       languageHelper.setUILanguage = assertNotReached;
 
       MockInteractions.tap(languageOptionsDropdownTrigger);
     });
 
+    test('remove language', function() {
+      var numEnabled = languagesPage.languages.enabled.length;
+
+      // Enabled a language which we can then disable.
+      var newLanguage = getAvailableLanguage();
+      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 languagesCollapse = languagesPage.$.languagesCollapse;
+        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'));
+        var removeMenuItem = assert(item.querySelector(
+            '.dropdown-content .dropdown-item:last-of-type'));
+        assertFalse(removeMenuItem.disabled);
+        MockInteractions.tap(removeMenuItem);
+
+        // We should go back down to the original number of enabled languages.
+        return whenNumEnabledLanguagesBecomes(numEnabled).then(function() {
+          assertFalse(languageHelper.isLanguageEnabled(newLanguage.code));
+        });
+      });
+    });
+
     test('language detail', function() {
       var languagesCollapse = languagesPage.$.languagesCollapse;
       var languageDetailMenuItem = languagesCollapse.querySelectorAll(
           '.dropdown-content .dropdown-item')[2];
       assertTrue(!!languageDetailMenuItem);
       MockInteractions.tap(languageDetailMenuItem);
 
       var languageDetailPage =
-          languagesPage.$$('settings-language-detail-page');
+        languagesPage.$$('settings-language-detail-page');

[michaelpg, 2016/08/23 23:37:07]

hmm oops, i'll revert this

       assertTrue(!!languageDetailPage);
       assertEquals('en-US', languageDetailPage.detail.language.code);
     });
 
     test('manage input methods', function() {
       var inputMethodsCollapse = languagesPage.$.inputMethodsCollapse;
       var inputMethodSettingsExist = !!inputMethodsCollapse;
       if (cr.isChromeOS) {
         assertTrue(inputMethodSettingsExist);
         var manageInputMethodsButton =
-            inputMethodsCollapse.querySelector('.list-button:last-of-type');
+          inputMethodsCollapse.querySelector('.list-button:last-of-type');

[michaelpg, 2016/08/23 23:37:07]

and this

         MockInteractions.tap(manageInputMethodsButton);
         assertTrue(!!languagesPage.$$('settings-manage-input-methods-page'));
       } else {
         assertFalse(inputMethodSettingsExist);
       }
     });
 
     test('spellcheck', function() {
       var spellCheckCollapse = languagesPage.$.spellCheckCollapse;
       var spellCheckSettingsExist = !!spellCheckCollapse;
       if (cr.isMac) {
         assertFalse(spellCheckSettingsExist);
       } else {
         assertTrue(spellCheckSettingsExist);
         MockInteractions.tap(
             spellCheckCollapse.querySelector('.list-button:last-of-type'));
         assertTrue(!!languagesPage.$$('settings-edit-dictionary-page'));
       }
     });
   }.bind(this));
 
   // TODO(michaelpg): Test more aspects of the languages UI.
 
   // Run all registered tests.
   mocha.run();
 });