Bug 1497225 - Update the required asterisk display when changing countries. r=sfoster,MattN

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2018-11-02 20:53:12 +00:00
parent 5ea5fccd29
commit ed95c3076b
3 changed files with 121 additions and 4 deletions

View File

@ -209,6 +209,9 @@ export default class AddressForm extends PaymentStateSubscriberMixin(PaymentRequ
handleEvent(event) {
switch (event.type) {
case "change": {
if (event.target.id == "country") {
this.updateRequiredState();
}
this.updateSaveButtonState();
break;
}

View File

@ -734,3 +734,81 @@ add_task(async function test_hiddenFieldRemovedWhenCountryChanged() {
});
await cleanupFormAutofillStorage();
});
add_task(async function test_countrySpecificFieldsGetRequiredness() {
await setup();
await BrowserTestUtils.withNewTab({
gBrowser,
url: BLANK_PAGE_URL,
}, async browser => {
let {win, frame} =
await setupPaymentDialog(browser, {
methodData: [PTU.MethodData.basicCard],
details: Object.assign({}, PTU.Details.twoShippingOptions, PTU.Details.total2USD),
options: PTU.Options.requestShippingOption,
merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
}
);
await navigateToAddAddressPage(frame);
const EXPECTED_ADDRESS = {
"country": "MO",
"given-name": "First",
"family-name": "Last",
"street-address": "12345 FooFoo Bar",
};
await fillInShippingAddressForm(frame, EXPECTED_ADDRESS);
await submitAddressForm(frame, EXPECTED_ADDRESS, {expectPersist: true});
await navigateToAddAddressPage(frame);
await selectPaymentDialogShippingAddressByCountry(frame, "MO");
await spawnPaymentDialogTask(frame, async () => {
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
let editLink = content.document.querySelector("address-picker .edit-link");
is(editLink.textContent, "Edit", "Edit link text");
editLink.click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page" && !!state["address-page"].guid;
}, "Check edit page state");
let provinceField = content.document.getElementById("address-level1");
let provinceContainer = provinceField.parentNode;
is(provinceContainer.style.display, "none", "Province should be hidden for Macau");
let countryField = content.document.getElementById("country");
await content.fillField(countryField, "CA");
info("changed selected country to Canada");
isnot(provinceContainer.style.display, "none", "Province should be visible for Canada");
ok(provinceContainer.hasAttribute("required"),
"Province container should have required attribute");
let provinceSpan = provinceContainer.querySelector("span");
is(provinceSpan.getAttribute("fieldRequiredSymbol"), "*",
"Province span should have asterisk as fieldRequiredSymbol");
is(content.window.getComputedStyle(provinceSpan, "::after").content,
"attr(fieldRequiredSymbol)",
"Asterisk should be on Province");
let addressBackButton = content.document.querySelector("address-form .back-button");
addressBackButton.click();
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "payment-summary";
}, "Switched back to payment-summary");
});
info("clicking cancel");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
});
await cleanupFormAutofillStorage();
});

View File

@ -22,14 +22,14 @@ add_task(async function test_cancelEditAddressDialogWithESC() {
});
add_task(async function test_defaultCountry() {
SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "CA"]]});
await SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "CA"]]});
await testDialog(EDIT_ADDRESS_DIALOG_URL, win => {
let doc = win.document;
is(doc.querySelector("#country").value, "CA",
"Default country set to Canada");
doc.querySelector("#cancel").click();
});
SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "DE"]]});
await SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "DE"]]});
await testDialog(EDIT_ADDRESS_DIALOG_URL, win => {
let doc = win.document;
is(doc.querySelector("#country").value, "DE",
@ -37,14 +37,14 @@ add_task(async function test_defaultCountry() {
doc.querySelector("#cancel").click();
});
// Test unsupported country
SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "XX"]]});
await SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "XX"]]});
await testDialog(EDIT_ADDRESS_DIALOG_URL, win => {
let doc = win.document;
is(doc.querySelector("#country").value, "",
"Default country set to empty");
doc.querySelector("#cancel").click();
});
SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "US"]]});
await SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "US"]]});
});
add_task(async function test_saveAddress() {
@ -479,3 +479,39 @@ add_task(async function test_hiddenFieldRemovedWhenCountryChanged() {
is(addresses[0].country, "DE", "country changed");
await removeAllRecords();
});
add_task(async function test_countrySpecificFieldsGetRequiredness() {
await SpecialPowers.pushPrefEnv({set: [[DEFAULT_REGION_PREF, "RO"]]});
await testDialog(EDIT_ADDRESS_DIALOG_URL, async win => {
let doc = win.document;
is(doc.querySelector("#country").value, "RO",
"Default country set to Romania");
let provinceField = doc.getElementById("address-level1");
ok(!provinceField.required, "address-level1 should not be marked as required");
ok(provinceField.disabled, "address-level1 should be marked as disabled");
is(provinceField.parentNode.style.display, "none",
"address-level1 is hidden for Romania");
doc.querySelector("#country").focus();
EventUtils.synthesizeKey("United States", {}, win);
await TestUtils.waitForCondition(() => {
return provinceField.parentNode.style.display != "none";
}, "Wait for address-level1 to become visible", 10);
ok(provinceField.required, "address-level1 should be marked as required");
ok(!provinceField.disabled, "address-level1 should not be marked as disabled");
doc.querySelector("#country").focus();
EventUtils.synthesizeKey("Romania", {}, win);
await TestUtils.waitForCondition(() => {
return provinceField.parentNode.style.display == "none";
}, "Wait for address-level1 to become hidden", 10);
ok(provinceField.required, "address-level1 will still be marked as required");
ok(provinceField.disabled, "address-level1 should be marked as disabled");
doc.querySelector("#cancel").click();
});
});