Replace Manage Languages with dialog and dropdown item

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

Index: chrome/test/data/webui/settings/languages_page_browsertest.js
diff --git a/chrome/test/data/webui/settings/languages_page_browsertest.js b/chrome/test/data/webui/settings/languages_page_browsertest.js
index d43dc028a04011cba2ea119b172bbb1ffc6560c4..d4eb6d3f1c840fac2ab00bf7ac9b4a37509695fd 100644
--- a/chrome/test/data/webui/settings/languages_page_browsertest.js
+++ b/chrome/test/data/webui/settings/languages_page_browsertest.js
@@ -67,19 +67,72 @@ TEST_F('SettingsLanguagesPageBrowserTest', 'MAYBE_LanguagesPage', function() {
     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 addLanguagesButton;

[stevenjb, 2016/08/23 17:08:04]

Not needed.

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

Done.

+      var cancelButton;
+      var actionButton;
+
+      setup(function(done) {
+        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 = dialog.$$('.action-button');
+          cancelButton = dialog.$$('.cancel-button');

[stevenjb, 2016/08/23 17:08:04]

assert these?

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

Done.

+          done();
+        });
+      });
+
+      teardown(function() {
+        // Test the dialog is removed from the DOM.
+        Polymer.dom.flush();
+        assertEquals(null, languagesPage.$$('settings-add-languages-dialog'));
+      });
+
+      test('cancel', function() {
+        assertFalse(cancelButton.disabled);
+        MockInteractions.tap(cancelButton);

[stevenjb, 2016/08/23 17:08:04]

Does this test anything?

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

Yes, it tests that the cancel button closes the dialog (via the teardown). I've
added comments.

+      });
+
+      test('add', function() {
+        // The fixed-height dialog's iron-list should stamp well below 50 items.
+        var items =
+            dialog.$.dialog.querySelectorAll('.list-item:not([hidden])');
+        assertGT(items.length, 1);
+        assertLT(items.length, 50);
+
+        // No languages have been checked.
+        assertTrue(actionButton.disabled);
+        MockInteractions.tap(actionButton);
+        Polymer.dom.flush();
+        assertEquals(dialog, languagesPage.$$('settings-add-languages-dialog'));
+
+        // Check and uncheck one language.
+        MockInteractions.tap(items[0]);
+        assertFalse(actionButton.disabled);
+        MockInteractions.tap(items[0]);
+        assertTrue(actionButton.disabled);
+
+        // Check multiple languages.
+        MockInteractions.tap(items[0]);
+        MockInteractions.tap(items[1]);
+        assertFalse(actionButton.disabled);
+
+        MockInteractions.tap(actionButton);
+      });
     });
 
     test('Should not set UI language', function() {