Add dialog to edit and save credit cards.

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

Index: chrome/test/data/webui/settings/settings_autofill_section_browsertest.js
diff --git a/chrome/test/data/webui/settings/settings_autofill_section_browsertest.js b/chrome/test/data/webui/settings/settings_autofill_section_browsertest.js
index 7876c3376c433577ff303ea59ce9b0c8052c3ed8..867e9f73eb8264470bc7cd42052252eb50d80f7e 100644
--- a/chrome/test/data/webui/settings/settings_autofill_section_browsertest.js
+++ b/chrome/test/data/webui/settings/settings_autofill_section_browsertest.js
@@ -31,6 +31,20 @@ SettingsAutofillSectionBrowserTest.prototype = {
   /** @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);
@@ -49,6 +63,7 @@ SettingsAutofillSectionBrowserTest.prototype = {
     autofillSection.$.creditCardList.notifyResize();
     Polymer.dom.flush();
   },
+
   /**
    * Creates the autofill section for the given lists.
    * @param {!Array<!chrome.passwordsPrivate.PasswordUiEntry>} passwordList
@@ -57,7 +72,6 @@ SettingsAutofillSectionBrowserTest.prototype = {
    * @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;
@@ -65,6 +79,21 @@ SettingsAutofillSectionBrowserTest.prototype = {
     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;
+  },
 };
 
 /**
@@ -107,6 +136,105 @@ TEST_F('SettingsAutofillSectionBrowserTest', 'uiTests', function() {
                    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(),