Add dialog to edit and save credit cards.

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.
@@ skipping 13 matching lines @@
 SettingsAutofillSectionBrowserTest.prototype = {
   __proto__: PolymerTest.prototype,
 
   /** @override */
   browsePreload:
       'chrome://md-settings/passwords_and_forms_page/autofill_section.html',
 
   /** @override */
   extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
 
+  /**
+   * Title used when adding an autofill item.
+   * @type: {string}
+   * @private
+   */
+  newTitle_: 'new-title',

[michaelpg, 2016/05/27 17:57:08]

you shouldn't have to set this in a test

[hcarmona, 2016/05/31 21:14:06]

Removed, but I had to change |browserPreload| because my element is
dependent on |loadTimeData|. Is there any way to create a fake one for
the test? The only test I could find that was using mocha and
loatTimeData was loading chrome://md-settings

[michaelpg, 2016/06/03 13:51:14]

dbeam, want to weigh in? Question is how to make conditional i18n work inside a
test: stub out loadTimeData, load the full WebUI instead of just the element
under test, or make the UI take strings as variables instead of doing the i18n
itself?

Compare credit_card_edit_dialog.js versions 1 and 3.

[Dan Beam, 2016/06/03 21:44:43]

I'm confused: why can't the element just do:

<link rel=import href=chrome://resources/js/load_time_data.html>
<link rel=import href=/strings.html>

if it depend on using loadTimeData?

[hcarmona, 2016/06/04 00:36:47]

Thanks guys, this helped me find a solution:
  Included load_time_data.js in the test.
  Added strings I care about to test (/strings.html doesn't exist)

+
+  /**
+   * Title used when editing an autofill item.
+   * @type: {string}
+   * @private
+   */
+  editTitle_: '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');
   },
 
   /**
    * Allow the iron-list to be sized properly.
    * @param {!Object} autofillSection
    * @private
    */
   flushAutofillSection_: function(autofillSection) {
     autofillSection.$.addressList.notifyResize();
     autofillSection.$.creditCardList.notifyResize();
     Polymer.dom.flush();
   },
+
   /**
    * Creates the autofill section for the given lists.
    * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList
    * @param {!Array<!chrome.passwordsPrivate.ExceptionPair>} exceptionList
    * @return {!Object}
    * @private
    */
   createAutofillSection_: function(addresses, creditCards) {
-    // Create a passwords-section to use for testing.
     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 Credit Card dialog.
+   * @param {!chrome.autofillPrivate.CreditCardEntry} creditCardItem
+   * @return {!Object}
+   */
+  createCreditCardDialog_: function(creditCardItem) {
+    var section = document.createElement('settings-credit-card-edit-dialog');
+    section.newTitle = this.newTitle_;
+    section.editTitle = this.editTitle_;
+    document.body.appendChild(section);
+    section.open(creditCardItem);  // Opening the dialog will add the item.
+    Polymer.dom.flush();
+    return section;
+  },
 };
 
 /**
  * This test will validate that the section is loaded with data.
  */
 TEST_F('SettingsAutofillSectionBrowserTest', 'uiTests', function() {
   var self = this;
 
   suite('AutofillSection', function() {
     test('verifyCreditCardCount', function() {
@@ skipping 22 matching lines @@
       var creditCardList = section.$.creditCardList;
       var row = creditCardList.children[1];  // Skip over the template.
       assertTrue(!!row);
 
       assertEquals(creditCard.metadata.summaryLabel,
                    row.querySelector('#creditCardLabel').textContent);
       assertEquals(creditCard.expirationMonth + '/' + creditCard.expirationYear,
                    row.querySelector('#creditCardExpiration').textContent);
     });
 
+    test('verifyAddCreditCardTitle', function() {
+      var creditCard = FakeDataMaker.emptyCreditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      assertEquals(self.newTitle_, creditCardDialog.title_);
+    }),
+
+    test('verifyEditCreditCardTitle', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      assertEquals(self.editTitle_, creditCardDialog.title_);
+    }),
+
+    test('verifyExpiredCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // 2015 is over unless time goes wobbly.
+      creditCard.expirationYear = 2015;
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      var now = new Date();
+
+      assertEquals('2015', firstSelectableYear.textContent);
+      assertEquals('' + (now.getFullYear() + 9),
+                   lastSelectableYear.textContent);
+    }),
+
+    test('verifyVeryFutureCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // Expiring 20 years from now is unusual.
+      var now = new Date();
+      var farFutureYear = now.getFullYear() + 20;
+      creditCard.expirationYear = farFutureYear;
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      assertEquals('' + now.getFullYear(), firstSelectableYear.textContent);
+      assertEquals('' + farFutureYear, lastSelectableYear.textContent);
+    }),
+
+    test('verifyVeryNormalCreditCardYear', function() {
+      var creditCard = FakeDataMaker.creditCardEntry();
+
+      // Expiring 2 years from now is not unusual.
+      var now = new Date();
+      var nearFutureYear = now.getFullYear() + 2;
+      creditCard.expirationYear = nearFutureYear;
+
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+      var selectableYears = creditCardDialog.$.yearList.items;
+      var firstSelectableYear = selectableYears[0];
+      var lastSelectableYear = selectableYears[selectableYears.length - 1];
+
+      assertEquals('' + now.getFullYear(), firstSelectableYear.textContent);
+      assertEquals('' + (now.getFullYear() + 9),
+                   lastSelectableYear.textContent);
+    }),
+
+    // Test will timeout if event is not received.
+    test('verifySaveCreditCardEdit', function(done) {
+      var creditCard = FakeDataMaker.emptyCreditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      creditCardDialog.addEventListener('save-credit-card', function(event) {
+        assertEquals(creditCard.guid, event.detail.guid);
+        done();
+      });
+
+      creditCardDialog.$.saveButton.click();
+    }),
+
+    test('verifyCancelCreditCardEdit', function(done) {
+      var creditCard = FakeDataMaker.emptyCreditCardEntry();
+      var creditCardDialog = self.createCreditCardDialog_(creditCard);
+
+      creditCardDialog.addEventListener('save-credit-card', function(event) {
+        // 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) {
+        // Finish test if dialog is closed.
+        done();
+      });
+
+      creditCardDialog.$.cancelButton.click();
+    }),
+
     test('verifyAddressCount', function() {
       var addresses = [
         FakeDataMaker.addressEntry(),
         FakeDataMaker.addressEntry(),
         FakeDataMaker.addressEntry(),
         FakeDataMaker.addressEntry(),
         FakeDataMaker.addressEntry(),
       ];
 
       var section = self.createAutofillSection_(addresses, []);
@@ skipping 16 matching lines @@
       var addressSummary = address.metadata.summaryLabel +
                            address.metadata.summarySublabel;
 
       assertEquals(addressSummary,
                    row.querySelector('#addressSummary').textContent);
     });
   });
 
   mocha.run();
 });