Load Passwords and Autofill in the corresponding sub page.

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

 // Copyright 2015 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 Runs the Polymer Password Settings tests. */
 
 /** @const {string} Path to root from chrome/test/data/webui/settings/. */
 var ROOT_PATH = '../../../../../';
 
 // Polymer BrowserTest fixture.
@@ skipping 17 matching lines @@
   browsePreload:
       'chrome://md-settings/passwords_and_forms_page/passwords_section.html',
 
   /** @override */
   extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
 
   /** @override */
   setUp: function() {
     PolymerTest.prototype.setUp.call(this);
 
+    // Override the PasswordManagerImpl for testing.
+    this.passwordManager = new TestPasswordManager();

[dpapad, 2017/01/28 00:10:30]

Some drive by questions: Can we use the Mocha suite()'s setup and teardown
instead of this one? This would simplify things by eliminating the need to do
var self = this; as follows

function helperFunction1(passwordManager) {
  //setup password manager here.
}

function validatePasswordList(...) {
  //  helpers as top-level functions, not methods.
}

suite('mytestsuite', function() {
  var passwordManager = null;

  setup(function() {
    passwordManager = .....;
  });

  test('mytest', function() {
    // refer to passwordManager here, or helper functions.
  });
});

This is also more robust since a new PasswordManager is created between Mocha
test cases (no need to cleanup after previous PasswordManager).

[hcarmona, 2017/02/14 00:59:38]

Awesome!

+    PasswordManagerImpl.instance_ = this.passwordManager;
+
     // Test is run on an individual element that won't have a page language.
     this.accessibilityAuditConfig.auditRulesToIgnore.push('humanLangMissing');
   },
 
+  tearDown: function() {
+    PasswordManagerImpl.instance_ = null;

[hcarmona, 2017/01/26 21:34:47]

Moved this here to clean up after the test.

[Dan Beam, 2017/01/27 01:11:32]

we're just re-creating on setup, why does this matter?

[hcarmona, 2017/01/27 18:28:16]

PasswordManagerImpl.instance_ is global. If 2 tests rely on this and it's not
reset, then we can get into a state where one test will depend on the other.
This leads to weird failures that depend on test order.

[Dan Beam, 2017/01/27 23:55:22]

i mean, you can leave this in, but nobody else does it ;)

overriding a global instance:
https://cs.chromium.org/search/?q=%22instance_+%3D+%22+chrome/test/data/webui...

tearing down a global instance:
https://cs.chromium.org/search/?q=%22instance_+%3D+null%22+chrome/test/data/w...

[hcarmona, 2017/02/14 00:59:38]

Going w/ dpapad@'s suggestion for Mocha suite setup and removing the teardown
since it doesn't make sense to keep it. Tests that need it will override it.

+  },
+
   /**
    * Helper method that validates a that elements in the password list match
    * the expected data.
    * @param {!Element} listElement The iron-list element that will be checked.
    * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList The
    *     expected data.
    * @private
    */
   validatePasswordList: function(listElement, passwordList) {

[dpapad, 2017/01/28 00:10:30]

A lot of the methods on SettingsPasswordSectionBrowserTest's prototype do not
need any access to |this|. Should we just convert them to top-level functions
instead of methods (related to previous comments code snippet).

     assertEquals(passwordList.length, listElement.items.length);
     if (passwordList.length > 0) {
       // The first child is a template, skip and get the real 'first child'.
       var node = Polymer.dom(listElement).children[1];
       assert(node);
       var passwordInfo = passwordList[0];
       assertEquals(passwordInfo.loginPair.originUrl,
           node.querySelector('#originUrl').textContent.trim());
       assertEquals(passwordInfo.linkUrl,
           node.querySelector('#originUrl').href);
@@ skipping 38 matching lines @@
   },
 
   /**
    * Helper method used to create a password section for the given lists.
    * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList
    * @param {!Array<!chrome.passwordsPrivate.ExceptionPair>} exceptionList
    * @return {!Object}
    * @private
    */
   createPasswordsSection_: function(passwordList, exceptionList) {
+    // Override the PasswordManager data for testing.
+    this.passwordManager.data.passwords = passwordList;
+    this.passwordManager.data.exceptions = exceptionList;
+
     // Create a passwords-section to use for testing.
     var passwordsSection = document.createElement('passwords-section');
-    passwordsSection.savedPasswords = passwordList;
-    passwordsSection.passwordExceptions = exceptionList;
     document.body.appendChild(passwordsSection);
     this.flushPasswordSection_(passwordsSection);
     return passwordsSection;
   },
 
   /**
    * Helper method used to create a password editing dialog.
    * @param {!chrome.passwordsPrivate.PasswordUiEntry} passwordItem
    * @return {!Object}
    * @private
@@ skipping 117 matching lines @@
         FakeDataMaker.passwordEntry('six', 'one', 6),
       ];
 
       var passwordsSection = self.createPasswordsSection_(passwordList, []);
 
       // The first child is a template, skip and get the real 'first child'.
       var firstNode = Polymer.dom(passwordsSection.$.passwordList).children[1];
       assert(firstNode);
       var firstPassword = passwordList[0];
 
-      // Listen for the remove event. If this event isn't received, the test
-      // will time out and fail.
-      passwordsSection.addEventListener('remove-saved-password',
-                                        function(event) {
+      self.passwordManager.onRemoveSavedPassword = function(detail) {

[dpapad, 2017/01/28 00:10:30]

The PasswordManager class seems to be just like any other "browser proxy".  Can
you use TestBrowserProxy to intercept calls to the browser instead? I would also
suggest renaming PasswordManager to PasswordBrowserProxy or something like that,
given that it calls chrome.* APIs.

         // Verify that the event matches the expected value.
-        assertEquals(firstPassword.loginPair.originUrl,
-                     event.detail.originUrl);
-        assertEquals(firstPassword.loginPair.username,
-                     event.detail.username);
+        assertEquals(firstPassword.loginPair.originUrl, detail.originUrl);
+        assertEquals(firstPassword.loginPair.username, detail.username);
+
+        // Clean up after self.
+        self.passwordManager.onRemoveSavedPassword = null;
+
         done();
-      });
+      };
 
       // Click the remove button on the first password.
       MockInteractions.tap(firstNode.querySelector('#passwordMenu'));
       MockInteractions.tap(passwordsSection.$.menuRemovePassword);
     });
 
     test('verifyFilterPasswords', function() {
       var passwordList = [
         FakeDataMaker.passwordEntry('one.com', 'show', 5),
         FakeDataMaker.passwordEntry('two.com', 'shower', 3),
@@ skipping 119 matching lines @@
           self.getDomRepeatChildren_(passwordsSection.$.passwordExceptionsList);
 
       // The index of the button currently being checked.
       var index = 0;
 
       var clickRemoveButton = function() {
         MockInteractions.tap(
             exceptions[index].querySelector('#removeExceptionButton'));
       };
 
-      // Listen for the remove event. If this event isn't received, the test
-      // will time out and fail.
-      passwordsSection.addEventListener('remove-password-exception',

[Dan Beam, 2017/01/27 01:11:32]

why can't we just use events like we were before?

[hcarmona, 2017/01/27 18:28:16]

The event was fired so the parent element could handle it because the
passwordsSection did not know about the passwordManager. The passwordsSection
can interact directly with the passwordManager now that it has a reference to
it.

I can put the event back in, but it seems unnecessary now.

-                                        function(event) {
+      self.passwordManager.onRemoveException = function(detail) {
         // Verify that the event matches the expected value.
         assertTrue(index < exceptionList.length);
-        assertEquals(exceptionList[index].exceptionUrl, event.detail);
+        assertEquals(exceptionList[index].exceptionUrl, detail);
 
-        if (++index < exceptionList.length)
+        if (++index < exceptionList.length) {
           clickRemoveButton();  // Click 'remove' on all passwords, one by one.
-        else
+        } else {
+          // Clean up after self.
+          self.passwordManager.onRemoveException = null;
+
           done();
-      });
+        }
+      };
 
       // Start removing.
       clickRemoveButton();
     });
 
     test('showSavedPassword', function() {
       var PASSWORD = 'bAn@n@5';
       var item = FakeDataMaker.passwordEntry('goo.gl', 'bart', PASSWORD.length);
       var passwordDialog = self.createPasswordDialog_(item);
 
@@ skipping 19 matching lines @@
         assertEquals(item.loginPair.username, event.detail.username);
         done();
       });
 
       MockInteractions.tap(passwordDialog.$.showPasswordButton);
     });
   });
 
   mocha.run();
 });