Bug 1480719 - Require credit card expiration month and year before saving credit cards. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D4485

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2018-08-31 16:36:34 +00:00
parent 79c02971f8
commit cd49c65e14
2 changed files with 21 additions and 3 deletions

View File

@ -116,6 +116,17 @@ add_task(async function test_saveButton() {
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");
@ -381,6 +392,8 @@ add_task(async function test_field_validity_updates() {
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");
@ -388,10 +401,15 @@ add_task(async function test_field_validity_updates() {
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");

View File

@ -28,7 +28,7 @@
<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>
@ -46,7 +46,7 @@
<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"/>