Bug 1480719 - Require credit card expiration month and year before saving credit cards. r=MattN
authorJared Wein <jwein@mozilla.com>
Fri, 31 Aug 2018 16:36:34 +0000
changeset 434348 ee00cb44157bcc4a066cb4a5275288e4782b2f4d
parent 434347 79c83e9cc25496913956e534c07738d1b441517d
child 434349 ad88fc39b67b3bfe04391548b84919e7f4624ea6
push id107338
push useraciure@mozilla.com
push dateFri, 31 Aug 2018 23:45:51 +0000
treeherdermozilla-inbound@ee4f4e66f861 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1480719
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1480719 - Require credit card expiration month and year before saving credit cards. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D4485
browser/components/payments/test/mochitest/test_basic_card_form.html
browser/extensions/formautofill/content/editCreditCard.xhtml
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -111,16 +111,27 @@ add_task(async function test_saveButton(
   fillField(form.form.querySelector("#cc-exp-month"), "11");
   let year = (new Date()).getFullYear().toString();
   fillField(form.form.querySelector("#cc-exp-year"), year);
   fillField(form.form.querySelector("#cc-type"), "visa");
   form.saveButton.focus();
   ok(!form.saveButton.disabled,
      "Save button should be enabled since the required fields are filled");
 
+  fillField(form.form.querySelector("#cc-exp-month"), "");
+  fillField(form.form.querySelector("#cc-exp-year"), "");
+  form.saveButton.focus();
+  ok(form.saveButton.disabled,
+     "Save button should be disabled since the required fields are empty");
+  fillField(form.form.querySelector("#cc-exp-month"), "11");
+  fillField(form.form.querySelector("#cc-exp-year"), year);
+  form.saveButton.focus();
+  ok(!form.saveButton.disabled,
+     "Save button should be enabled since the required fields are filled again");
+
   info("blanking the cc-number field");
   fillField(form.form.querySelector("#cc-number"), "");
   ok(form.saveButton.disabled, "Save button is disabled after blanking cc-number");
   form.form.querySelector("#cc-number").blur();
   let fieldsVisiblyInvalid = form.querySelectorAll(":-moz-ui-invalid");
   is(fieldsVisiblyInvalid.length, 1, "Check 1 field visibly invalid after blanking and blur");
   is(fieldsVisiblyInvalid[0].id, "cc-number", "Check #cc-number is visibly invalid");
 
@@ -376,27 +387,34 @@ add_task(async function test_field_valid
   let form = new BasicCardForm();
   form.dataset.updateButtonLabel = "Add";
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   let ccNumber = form.form.querySelector("#cc-number");
   let nameInput = form.form.querySelector("#cc-name");
+  let monthInput = form.form.querySelector("#cc-exp-month");
+  let yearInput = form.form.querySelector("#cc-exp-year");
 
   info("test with valid cc-number but missing cc-name");
   fillField(ccNumber, "4111111111111111");
   ok(ccNumber.checkValidity(), "cc-number field is valid with good input");
   ok(!nameInput.checkValidity(), "cc-name field is invalid when empty");
   ok(form.saveButton.disabled, "Save button should be disabled with incomplete input");
 
-  info("correct by adding cc-name value");
+  info("correct by adding cc-name and expiration values");
   fillField(nameInput, "First");
+  fillField(monthInput, "11");
+  let year = (new Date()).getFullYear().toString();
+  fillField(yearInput, year);
   ok(ccNumber.checkValidity(), "cc-number field is valid with good input");
   ok(nameInput.checkValidity(), "cc-name field is valid with a value");
+  ok(monthInput.checkValidity(), "cc-exp-month field is valid with a value");
+  ok(yearInput.checkValidity(), "cc-exp-year field is valid with a value");
   ok(!form.saveButton.disabled, "Save button should not be disabled with good input");
 
   info("edit to make the cc-number invalid");
   ccNumber.focus();
   sendString("aa");
   nameInput.focus();
   sendString("Surname");
 
--- a/browser/extensions/formautofill/content/editCreditCard.xhtml
+++ b/browser/extensions/formautofill/content/editCreditCard.xhtml
@@ -23,17 +23,17 @@
         order to get proper label styling with :focus and :moz-ui-invalid.
       -->
     <label id="cc-number-container" class="container">
       <span id="invalidCardNumberString" hidden="hidden" data-localization="invalidCardNumber"></span>
       <input id="cc-number" type="text" required="required" minlength="9" pattern="[- 0-9]+"/>
       <span data-localization="cardNumber" class="label-text"/>
     </label>
     <label id="cc-exp-month-container" class="container">
-      <select id="cc-exp-month">
+      <select id="cc-exp-month" required="required">
         <option/>
         <option value="1">01</option>
         <option value="2">02</option>
         <option value="3">03</option>
         <option value="4">04</option>
         <option value="5">05</option>
         <option value="6">06</option>
         <option value="7">07</option>
@@ -41,17 +41,17 @@
         <option value="9">09</option>
         <option value="10">10</option>
         <option value="11">11</option>
         <option value="12">12</option>
       </select>
       <span data-localization="cardExpiresMonth" class="label-text"/>
     </label>
     <label id="cc-exp-year-container" class="container">
-      <select id="cc-exp-year">
+      <select id="cc-exp-year" required="required">
         <option/>
       </select>
       <span data-localization="cardExpiresYear" class="label-text"/>
     </label>
     <label id="cc-name-container" class="container">
       <input id="cc-name" type="text" required="required"/>
       <span data-localization="nameOnCard" class="label-text"/>
     </label>