Add Edit/Create Address Dialog to MD Settings.

chrome/test/data/webui/settings/settings_autofill_section_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 Runs the Polymer Autofill Settings tests. */
 
 /** @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',
     ROOT_PATH +
         'chrome/test/data/webui/settings/passwords_and_autofill_fake_data.js',
     ROOT_PATH + 'ui/webui/resources/js/load_time_data.js',
 ]);
 
 /**
+ * Test implementation.
+ * @implements {settings.AddressEditDialog.CountryInformationHelper}
+ * @constructor
+ */
+function CountryInformationHelperTestImpl() {}
+CountryInformationHelperTestImpl.prototype = {
+  /** @override */
+  getCountryList: function(callback) {
+    callback([
+        {name: 'United States', countryCode: 'US'},
+        {name: undefined, countryCode: undefined},  // Spacer.

[michaelpg, 2016/06/22 00:25:14]

oh, I see. Should the browser/browser proxy really be responsible for this?
Seems like a strictly UI concern.

[hcarmona, 2016/06/24 18:27:51]

Spacer is provided by API to keep the default separate from the
alphabetized list of countries. I had it here to emulate the API return
values, but the tests don't need the spacer. List is now shorter, but
I kept US as first item b/c tests were assuming it as the default.

Default is remembered per user, which is why the API provides it.

+        {name: 'Israel', countryCode: 'IL'},
+        {name: 'United Kingdom', countryCode: 'GB'},
+        {name: 'United States', countryCode: 'US'},
+    ]);
+  },
+
+  /** @override */
+  getAddressFormat: function(countryCode, callback) {
+    chrome.autofillPrivate.getAddressComponents(countryCode || '', callback);
+  },
+};
+
+/**
  * @constructor
  * @extends {PolymerTest}
  */
 function SettingsAutofillSectionBrowserTest() {}
 
 SettingsAutofillSectionBrowserTest.prototype = {
   __proto__: PolymerTest.prototype,
 
   /** @override */
   browsePreload:
       'chrome://md-settings/passwords_and_forms_page/autofill_section.html',
 
   /** @override */
   extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
 
+  i18nStrings: {
+    addAddressTitle: 'add-title',
+    addCreditCardTitle: 'add-title',
+    editAddressTitle: 'add-title',

[michaelpg, 2016/06/22 00:25:14]

edit-title?

[hcarmona, 2016/06/24 18:27:51]

Done.

+    editCreditCardTitle: 'edit-title',
+  },
+
   /** @override */
   setUp: function() {
     PolymerTest.prototype.setUp.call(this);
 
     // Test is run on an individual element that won't have a page language.
     this.accessibilityAuditConfig.auditRulesToIgnore.push('humanLangMissing');
 
     // Faking 'strings.js' for this test.
-    loadTimeData.data = {
-      editCreditCardTitle: 'edit-title',
-      addCreditCardTitle: 'add-title'
-    };
+    loadTimeData.data = this.i18nStrings;
+
+    settings.AddressEditDialog.CountryInformationHelperImpl.instance_ =
+        new CountryInformationHelperTestImpl();
   },
 
   /**
    * Allow the iron-list to be sized properly.
    * @param {!Object} autofillSection
    * @private
    */
   flushAutofillSection_: function(autofillSection) {
     autofillSection.$.addressList.notifyResize();
     autofillSection.$.creditCardList.notifyResize();
@@ skipping 10 matching lines @@
   createAutofillSection_: function(addresses, creditCards) {
     var section = document.createElement('settings-autofill-section');
     section.addresses = addresses;
     section.creditCards = creditCards;
     document.body.appendChild(section);
     this.flushAutofillSection_(section);
     return section;
   },
 
   /**
+   * Creates the Edit Address dialog and fulfills the promise when the dialog
+   * has actually opened.
+   * @param {!chrome.autofillPrivate.AddressEntry} address
+   * @return {!Promise<Object>}
+   */
+  createAddressDialog_: function(address) {
+    return new Promise(function(resolve) {
+      var section = document.createElement('settings-address-edit-dialog');
+      document.body.appendChild(section);
+      var onOpen = function() {
+        resolve(section);
+      };
+      section.addEventListener('iron-overlay-opened', onOpen);
+      section.open(address);  // Opening the dialog will add the item.
+      Polymer.dom.flush();
+    });
+  },
+
+  /**
    * Creates the Edit Credit Card dialog.
    * @param {!chrome.autofillPrivate.CreditCardEntry} creditCardItem
    * @return {!Object}
    */
   createCreditCardDialog_: function(creditCardItem) {
     var section = document.createElement('settings-credit-card-edit-dialog');
     document.body.appendChild(section);
     section.open(creditCardItem);  // Opening the dialog will add the item.
     Polymer.dom.flush();
     return section;
@@ skipping 117 matching lines @@
         done();
       });
 
       MockInteractions.tap(creditCardDialog.$.saveButton);
     }),
 
     test('verifyCancelCreditCardEdit', function(done) {
       var creditCard = FakeDataMaker.emptyCreditCardEntry();
       var creditCardDialog = self.createCreditCardDialog_(creditCard);
 
-      creditCardDialog.addEventListener('save-credit-card', function(event) {
+      creditCardDialog.addEventListener('save-credit-card', function() {
         // Fail the test because the save event should not be called when cancel
         // is clicked.
         assertTrue(false);
         done();
       });
 
-      creditCardDialog.addEventListener('iron-overlay-closed', function(event) {
+      creditCardDialog.addEventListener('iron-overlay-closed', function() {
         // Test is |done| in a timeout in order to ensure that
         // 'save-credit-card' is NOT fired after this test.
         window.setTimeout(done, 100);
       });
 
       MockInteractions.tap(creditCardDialog.$.cancelButton);
     }),
 
     test('verifyAddressCount', function() {
       var addresses = [
@@ skipping 20 matching lines @@
       var addressList = section.$.addressList;
       var row = addressList.children[1];  // Skip over the template.
       assertTrue(!!row);
 
       var addressSummary = address.metadata.summaryLabel +
                            address.metadata.summarySublabel;
 
       assertEquals(addressSummary,
                    row.querySelector('#addressSummary').textContent);
     });
+
+    test('verifyAddAddressDialog', function(done) {

[michaelpg, 2016/06/22 00:25:14]

here & below: return the Promise instead of using a done callback, it's cleaner

[hcarmona, 2016/06/24 18:27:51]

Nice! Didn't know you could return a promise in the tests.

[michaelpg, 2016/06/27 21:29:18]

Yep. See last paragraph:
https://www.chromium.org/developers/updating-webui-for-material-design/testin...

+      self.createAddressDialog_(
+          FakeDataMaker.emptyAddressEntry()).then(function(dialog){

[michaelpg, 2016/06/22 00:25:14]

missing space before {

[hcarmona, 2016/06/24 18:27:51]

Done.

+        var title = dialog.$$('.title');
+        assertEquals(self.i18nStrings.addAddressTitle, title.textContent);
+        // Shouldn't be possible to save until something is typed in.
+        assertTrue(dialog.$.saveButton.disabled);
+        done();
+      });
+    });
+
+    test('verifyEditAddressDialog', function(done) {
+      self.createAddressDialog_(

[michaelpg, 2016/06/22 00:25:14]

return self.createAddressDialog_(...

[hcarmona, 2016/06/24 18:27:51]

Done.

+          FakeDataMaker.addressEntry()).then(function(dialog){

[michaelpg, 2016/06/22 00:25:14]

missing space before {

[hcarmona, 2016/06/24 18:27:51]

Done.

+        var title = dialog.$$('.title');
+        assertEquals(self.i18nStrings.editAddressTitle, title.textContent);
+        // Should be possible to save when editing because fields are populated.
+        assertFalse(dialog.$.saveButton.disabled);
+        done();
+      });
+    });
+
+    test('verifyCountryIsSaved', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+      self.createAddressDialog_(address).then(function(dialog) {
+        assertEquals(undefined, dialog.$.countryList.selected);
+        assertEquals(undefined, address.countryCode);
+        dialog.$.countryList.selected = 'US';
+        Polymer.dom.flush();
+        assertEquals('US', dialog.$.countryList.selected);
+        assertEquals('US', address.countryCode);
+        done();
+      });
+    });
+
+    test('verifyPhoneAndEmailAreSaved', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+      self.createAddressDialog_(address).then(function(dialog) {
+        assertFalse(!!dialog.$.phoneInput.value);

[michaelpg, 2016/06/22 00:25:14]

why not assertEqual('', dialog.$.phoneInput.value), isn't that what it should
be?

[hcarmona, 2016/06/24 18:27:51]

Done.

+        assertFalse(!!(address.phoneNumbers && address.phoneNumbers[0]));
+
+        assertFalse(!!dialog.$.emailInput.value);
+        assertFalse(!!(address.emailAddresses && address.emailAddresses[0]));
+
+        var phoneNumber = '(555) 555-5555';
+        var emailAddress = 'no-reply@chromium.org';
+
+        dialog.$.phoneInput.value = phoneNumber;
+        dialog.$.emailInput.value = emailAddress;
+
+        Polymer.dom.flush();
+
+        assertEquals(phoneNumber, dialog.$.phoneInput.value);
+        assertEquals(phoneNumber, address.phoneNumbers[0]);
+
+        assertEquals(emailAddress, dialog.$.emailInput.value);
+        assertEquals(emailAddress, address.emailAddresses[0]);
+
+        done();
+      });
+    });
+
+    // Test will set a value of 'foo' in each text field and verify that the
+    // save button is enabled, then it will clear the field and verify that the
+    // save button is disabled. Test passes after all elements have been tested.
+    test('verifySaveIsNotClickableIfAllInputFieldsAreEmpty', function(done) {
+      self.createAddressDialog_(
+          FakeDataMaker.emptyAddressEntry()).then(function(dialog){
+        var saveButton = dialog.$.saveButton;
+        var testElements =
+            dialog.$.dialog.querySelectorAll('paper-input,paper-textarea');
+
+        // Default country is 'US' expecting: Name, Organization,
+        // Street address, City, State, ZIP code, Phone, and Email.
+        assertEquals(8, testElements.length);
+
+        var testFunctions = {
+          index: 0,
+          currentInput: null,
+          nextTest: null,
+
+          beginTest: function() {
+            this.updateCurrentInput();
+          },
+
+          ensureDisabledAndPopulateInput: function() {
+            this.nextTest = this.ensureEnabledAndClearInput.bind(this);
+
+            assertTrue(saveButton.disabled);
+            this.currentInput.value = 'foo';
+            Polymer.dom.flush();
+          },
+
+          ensureEnabledAndClearInput: function() {
+            this.nextTest = this.updateCurrentInput.bind(this);
+
+            assertFalse(saveButton.disabled);
+            this.currentInput.value = '';
+            Polymer.dom.flush();
+          },
+
+          updateCurrentInput: function() {
+            this.currentInput = testElements[this.index++];
+
+            if (this.currentInput)
+              this.ensureDisabledAndPopulateInput();
+            else
+              this.finishTest();
+          },
+
+          finishTest: function() {
+            this.nextTest = null;
+
+            assertTrue(saveButton.disabled);
+            done();
+          },
+        };
+
+        dialog.addEventListener('on-update-can-save', function() {
+          if (testFunctions.nextTest)
+            testFunctions.nextTest();
+        });
+
+        testFunctions.beginTest();
+      });
+    });
+
+    // Setting the country should allow the address to be saved.
+    test('verifySaveIsNotClickableIfCountryNotSet', function(done) {
+      self.createAddressDialog_(
+          FakeDataMaker.emptyAddressEntry()).then(function(dialog){
+        var saveButton = dialog.$.saveButton;
+        var countries = dialog.$.countryList;
+
+        var testFunctions = {
+          nextTest: null,
+
+          beginTest: function() {
+            this.ensureDisabledAndPopulateInput();
+          },
+
+          ensureDisabledAndPopulateInput: function() {
+            this.nextTest = this.ensureEnabledAndClearInput.bind(this);
+
+            assertTrue(saveButton.disabled);
+            countries.selected = 'US';
+            Polymer.dom.flush();
+          },
+
+          ensureEnabledAndClearInput: function() {
+            this.nextTest = this.finishTest.bind(this);
+
+            assertFalse(saveButton.disabled);
+            countries.selected = '';
+            Polymer.dom.flush();
+          },
+
+          finishTest: function() {
+            this.nextTest = null;
+
+            assertTrue(saveButton.disabled);
+            done();
+          },
+        };
+
+        dialog.addEventListener('on-update-can-save', function() {
+          if (testFunctions.nextTest)
+            testFunctions.nextTest();
+        });
+
+        testFunctions.beginTest();
+      });
+    });
+
+    // Test will timeout if save-address event is not fired.
+    test('verifyDefaultCountryIsAppliedWhenSaving', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+      address.companyName = 'Google';
+      self.createAddressDialog_(address).then(function(dialog) {
+        // Verify |countryCode| is not set.
+        assertFalse(!!address.countryCode);
+
+        // Finish the test after dialog has fired the 'save-address' event.
+        dialog.addEventListener('save-address', function(event) {
+          // 'US' is the default country for these tests.
+          assertEquals('US', event.detail.countryCode);
+          done();
+        });
+
+        MockInteractions.tap(dialog.$.saveButton);
+      });
+    });
+
+    test('verifyCancelDoesNotSaveAddress', function(done) {
+      self.createAddressDialog_(
+          FakeDataMaker.addressEntry()).then(function(dialog){
+        dialog.addEventListener('save-address', function() {
+          // Fail the test because the save event should not be called when
+          // cancel is clicked.
+          assertTrue(false);
+          done();
+        });
+
+        dialog.addEventListener('iron-overlay-closed', function() {
+          // Test is |done| in a timeout in order to ensure that
+          // 'save-address' is NOT fired after this test.
+          window.setTimeout(done, 100);
+        });
+
+        MockInteractions.tap(dialog.$.cancelButton);
+      });
+    });
+
+    // US address has 3 fields on the same line.
+    test('verifyEditingUSAddress', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+
+      address.fullNames = [ 'Name' ];
+      address.companyName = 'Organization';
+      address.addressLines = 'Street address';
+      address.addressLevel2 = 'City';
+      address.addressLevel1 = 'State';
+      address.postalCode = 'ZIP code';
+      address.countryCode = 'US';
+      address.phoneNumbers = [ 'Phone' ];
+      address.emailAddresses = [ 'Email' ];
+
+      self.createAddressDialog_(address).then(function(dialog) {
+        var rows = dialog.$.dialog.querySelectorAll('.address-row');
+        assertEquals(6, rows.length);
+
+        // Name
+        var row = rows[0];
+        var cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.fullNames[0], cols[0].value);
+        // Organization
+        row = rows[1];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.companyName, cols[0].value);
+        // Street address
+        row = rows[2];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.addressLines, cols[0].value);
+        // City, State, ZIP code
+        row = rows[3];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(3, cols.length);
+        assertEquals(address.addressLevel2, cols[0].value);
+        assertEquals(address.addressLevel1, cols[1].value);
+        assertEquals(address.postalCode, cols[2].value);
+        // Country
+        row = rows[4];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals('United States', cols[0].value);
+        // Phone, Email
+        row = rows[5];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(2, cols.length);
+        assertEquals(address.phoneNumbers[0], cols[0].value);
+        assertEquals(address.emailAddresses[0], cols[1].value);
+
+        done();
+      });
+    });
+
+    // GB address has 1 field per line for all lines that change.
+    test('verifyEditingGBAddress', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+
+      address.fullNames = [ 'Name' ];
+      address.companyName = 'Organization';
+      address.addressLines = 'Street address';
+      address.addressLevel2 = 'Post town';
+      address.addressLevel1 = 'County';
+      address.postalCode = 'Postal code';
+      address.countryCode = 'GB';
+      address.phoneNumbers = [ 'Phone' ];
+      address.emailAddresses = [ 'Email' ];
+
+      self.createAddressDialog_(address).then(function(dialog) {
+        var rows = dialog.$.dialog.querySelectorAll('.address-row');
+        assertEquals(8, rows.length);
+
+        // Name
+        var row = rows[0];
+        var cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.fullNames[0], cols[0].value);
+        // Organization
+        row = rows[1];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.companyName, cols[0].value);
+        // Street address
+        row = rows[2];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.addressLines, cols[0].value);
+        // Post Town
+        row = rows[3];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.addressLevel2, cols[0].value);
+        // County
+        row = rows[4];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.addressLevel1, cols[0].value);
+        // Postal code
+        row = rows[5];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.postalCode, cols[0].value);
+        // Country
+        row = rows[6];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals('United Kingdom', cols[0].value);
+        // Phone, Email
+        row = rows[7];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(2, cols.length);
+        assertEquals(address.phoneNumbers[0], cols[0].value);
+        assertEquals(address.emailAddresses[0], cols[1].value);
+
+        done();
+      });
+    });
+
+    // IL address has 2 fields on the same line and is an RTL locale.
+    // RTL locale shouldn't affect this test.
+    test('verifyEditingILAddress', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+
+      address.fullNames = [ 'Name' ];
+      address.companyName = 'Organization';
+      address.addressLines = 'Street address';
+      address.addressLevel2 = 'City';
+      address.postalCode = 'Postal code';
+      address.countryCode = 'IL';
+      address.phoneNumbers = [ 'Phone' ];
+      address.emailAddresses = [ 'Email' ];
+
+      self.createAddressDialog_(address).then(function(dialog) {
+        var rows = dialog.$.dialog.querySelectorAll('.address-row');
+        assertEquals(6, rows.length);
+
+        // Name
+        var row = rows[0];
+        var cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.fullNames[0], cols[0].value);
+        // Organization
+        row = rows[1];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.companyName, cols[0].value);
+        // Street address
+        row = rows[2];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals(address.addressLines, cols[0].value);
+        // City, Postal code
+        row = rows[3];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(2, cols.length);
+        assertEquals(address.addressLevel2, cols[0].value);
+        assertEquals(address.postalCode, cols[1].value);
+        // Country
+        row = rows[4];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(1, cols.length);
+        assertEquals('Israel', cols[0].value);
+        // Phone, Email
+        row = rows[5];
+        cols = row.querySelectorAll('.address-column');
+        assertEquals(2, cols.length);
+        assertEquals(address.phoneNumbers[0], cols[0].value);
+        assertEquals(address.emailAddresses[0], cols[1].value);
+
+        done();
+      });
+    });
+
+    // US has an extra field 'State'. Validate that this field is
+    // persisted when switching to IL then back to US.
+    test('verifyAddressPersistanceWhenSwitchingCountries', function(done) {
+      var address = FakeDataMaker.emptyAddressEntry();
+      address.countryCode = 'US';
+
+      self.createAddressDialog_(address).then(function(dialog) {
+        var city = 'Los Angeles';
+        var state = 'CA';
+        var zip = '90291';
+
+        // US:
+        var rows = dialog.$.dialog.querySelectorAll('.address-row');
+        assertEquals(6, rows.length);
+
+        // City, State, ZIP code
+        var row = rows[3];
+        var cols = row.querySelectorAll('.address-column');
+        assertEquals(3, cols.length);
+        cols[0].value = city;
+        cols[1].value = state;
+        cols[2].value = zip;
+
+        Polymer.dom.flush();
+
+        var validateCountry = 'IL';
+
+        // Triggered several times.
+        dialog.addEventListener('on-update-address-wrapper', function() {
+          // Country is still updating. Do nothing.
+          if (validateCountry != dialog.$.countryList.selected)
+            return;
+
+          if (validateCountry == 'IL') {
+            // IL:
+            rows = dialog.$.dialog.querySelectorAll('.address-row');
+            assertEquals(6, rows.length);
+
+            // City, Postal code
+            row = rows[3];
+            cols = row.querySelectorAll('.address-column');
+            assertEquals(2, cols.length);
+            assertEquals(city, cols[0].value);
+            assertEquals(zip, cols[1].value);
+
+            dialog.$.countryList.selected = 'US';
+            Polymer.dom.flush();
+
+            validateCountry = 'US';
+          } else if (validateCountry == 'US') {
+            // US:
+            var rows = dialog.$.dialog.querySelectorAll('.address-row');
+            assertEquals(6, rows.length);
+
+            // City, State, ZIP code
+            row = rows[3];
+            cols = row.querySelectorAll('.address-column');
+            assertEquals(3, cols.length);
+            assertEquals(city, cols[0].value);
+            assertEquals(state, cols[1].value);
+            assertEquals(zip, cols[2].value);
+
+            done();
+          } else {
+            assertTrue(false, 'Test state is invalid. Just fail.');
+            done();
+          }
+        });
+
+        dialog.$.countryList.selected = 'IL';
+        Polymer.dom.flush();
+      });
+    });
   });
 
   mocha.run();
 });