MD Settings: On Startup, extract dialog to its own file.

chrome/test/data/webui/settings/startup_urls_page_test.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.
 
 cr.define('settings_startup_urls_page', function() {
   /**
    * @constructor
    * @implements {settings.StartupUrlsPageBrowserProxy}
    * @extends {settings.TestBrowserProxy}
    */
   function TestStartupUrlsPageBrowserProxy() {
     settings.TestBrowserProxy.call(this, [
+      'addStartupPage',
+      'loadStartupPages',
+      'useCurrentPages',
       'validateStartupPage',

[Dan Beam, 2016/04/08 23:24:42]

nit: you may want to alphabetize the @interface as well, then

[dpapad, 2016/04/09 00:02:19]

Done.

-      'addStartupPage',
     ]);
+
+    /** @private {boolean} */
+    this.urlIsValid_ = true;
   }
 
   TestStartupUrlsPageBrowserProxy.prototype = {
     __proto__: settings.TestBrowserProxy.prototype,
 
-    urlsAreValid: false,
-
-    /** @override */
-    loadStartupPages: function() {},
+    /** @param {boolean} isValid */
+    setUrlValidity: function(isValid) {

[Dan Beam, 2016/04/08 23:24:42]

this isn't really functionally different than what I had before, just more code,
but if it makes you happy!

[dpapad, 2016/04/09 00:02:18]

Agreed, functionally is (almost) the same. Almost, because it was on the
prototype and now is in the constructor.
Regarding calling a setFoo() VS assigning a variable to public foo, I have a
very slight preference of calling the method over assigning the var, but only
very slightly.

+      this.urlIsValid_ = isValid;
+    },
 
     /** @override */
     validateStartupPage: function(url) {
-      this.methodCalled('validateStartupPage');
-      var resolver = new PromiseResolver;
-      resolver.promise = Promise.resolve(this.urlsAreValid);
-      return resolver;
+      this.methodCalled('validateStartupPage', url);
+      return Promise.resolve(this.urlIsValid_);
+    },
+
+    /** @override */
+    loadStartupPages: function() {
+      this.methodCalled('loadStartupPages');
+    },
+
+    /** @override */
+    useCurrentPages: function() {
+      this.methodCalled('useCurrentPages');
     },
 
     /** @override */
     addStartupPage: function(url) {
-      this.methodCalled('addStartupPage');
+      this.methodCalled('addStartupPage', url);
+      return Promise.resolve(this.urlIsValid_);
     },
   };
 
+  suite('StartupUrlDialog', function() {
+    /** @type {?SettingsStartupUrlDialogElement} */
+    var dialog = null;
+
+    var browserProxy = null;
+
+    /**
+     * Triggers an 'input' event on the given text input field, which triggers
+     * validation to occur.
+     * @param {!PaperInputElement} element
+     */
+    function triggerInputEvent(element) {

[Dan Beam, 2016/04/08 23:24:42]

nit: pressSpace

[dpapad, 2016/04/09 00:02:18]

If you are referring to
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/polyme...,
then it does not work for this case (tried it). The reason is that validation is
triggered on 'input' event, whereas pressSpace() triggers 'keyDown' and 'keyUp'.

[Dan Beam, 2016/04/09 00:03:40]

hah! no, I just meant "can we rename triggerInputEvent to pressSpace?".

[dpapad, 2016/04/09 00:19:57]

Done.

+      // The actual key code is irrelevant for these tests.
+      MockInteractions.keyEventOn(element, 'input', 32 /* space key code */);
+    }
+
+    setup(function() {
+      browserProxy = new TestStartupUrlsPageBrowserProxy();
+      settings.StartupUrlsPageBrowserProxyImpl.instance_ = browserProxy;
+      PolymerTest.clearBody();
+      dialog = document.createElement('settings-startup-url-dialog');
+      document.body.appendChild(dialog);
+    });
+
+    teardown(function() { dialog.remove(); });
+
+    // Test that validation occurs as the user is typing, and that the action
+    // button is updated accordingly.
+    test('Validation', function() {
+      assertTrue(dialog.$.dialog.opened);
+      var addButton = dialog.$.add;
+      assertTrue(!!addButton);
+      assertTrue(addButton.disabled);
+
+      var inputElement = dialog.$.url;
+      assertTrue(!!inputElement);
+
+      var expectedUrl = "dummy-foo.com";
+      inputElement.value = expectedUrl;
+      browserProxy.setUrlValidity(false);
+      triggerInputEvent(inputElement);
+
+      return browserProxy.whenCalled('validateStartupPage').then(function(url) {
+        assertEquals(expectedUrl, url);
+        assertTrue(addButton.disabled);
+
+        browserProxy.setUrlValidity(true);
+        browserProxy.resetResolver('validateStartupPage');
+        triggerInputEvent(inputElement);
+
+        return browserProxy.whenCalled('validateStartupPage');
+      }).then(function() {
+        assertFalse(addButton.disabled);
+      });
+    });
+
+    test('AddStartupPage', function() {
+      assertTrue(dialog.$.dialog.opened);
+      var addButton = dialog.$.add;
+
+      // Test that the dialog remains open if the user somehow manages to submit
+      // an invalid URL.
+      browserProxy.setUrlValidity(false);
+      MockInteractions.tap(addButton);
+      return browserProxy.whenCalled('addStartupPage').then(function() {
+        assertTrue(dialog.$.dialog.opened);
+
+        // Test that dialog is closed if the user submits a valid URL.
+        browserProxy.setUrlValidity(true);
+        browserProxy.resetResolver('addStartupPage');
+        MockInteractions.tap(addButton);
+        return browserProxy.whenCalled('addStartupPage');
+      }).then(function() {
+        assertFalse(dialog.$.dialog.opened);
+      });
+  });
+
   suite('StartupUrlsPage', function() {
     /** @type {?SettingsStartupUrlsPageElement} */
     var page = null;
 
     var browserProxy = null;
 
     setup(function() {
       browserProxy = new TestStartupUrlsPageBrowserProxy();
       settings.StartupUrlsPageBrowserProxyImpl.instance_ = browserProxy;
       PolymerTest.clearBody();
       page = document.createElement('settings-startup-urls-page');
       document.body.appendChild(page);
     });
 
     teardown(function() { page.remove(); });
 
-    test('validate', function() {
-      browserProxy.whenCalled('validateStartupPage').then(function() {
-        var addButton = page.$.add;
-        assertTrue(!!addButton);
-        assertFalse(browserProxy.urlsAreValid);
-        assertTrue(addButton.disabled);
+    // Test that the page is requesting information from the browser.
+    test('Initialization', function() {
+      return browserProxy.whenCalled('loadStartupPages');
+    });
 
-        browserProxy.resetResolver('validateStartupPage');
-        browserProxy.whenCalled('validateStartupPage').then(function() {
-          page.async(function() {
-            assertFalse(addButton.disabled);
-            MockInteractions.tap(addButton);
-          });
-        });
+    test('UseCurrentPages', function() {
+      var useCurrentPagesButton = page.$.useCurrentPages;
+      assertTrue(!!useCurrentPagesButton);
+      MockInteractions.tap(useCurrentPagesButton);
+      return browserProxy.whenCalled('useCurrentPages');
+    });
 
-        browserProxy.urlsAreValid = true;
-        page.$.newUrl.value = "overriding validation anyway";
-      });
+    test('AddPage_OpensDialog', function() {
+      var addPageButton = page.$.addPage;
+      assertTrue(!!addPageButton);
+      assertFalse(!!page.$$('settings-startup-url-dialog'));
 
-      return browserProxy.whenCalled('addStartupPage');
+      MockInteractions.tap(addPageButton);
+      Polymer.dom.flush();
+      assertTrue(!!page.$$('settings-startup-url-dialog'));
     });
   });
 });