forked from mirrors/gecko-dev
381332c51e
This was generated with the script at https://bug1544051.bmoattachments.org/attachment.cgi?id=9058672 Differential Revision: https://phabricator.services.mozilla.com/D27761 --HG-- extra : moz-landing-system : lando
323 lines
10 KiB
HTML
323 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test the paymentOptions address-picker
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test the paymentOptions address-picker</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="payments_common.js"></script>
|
|
|
|
<script src="../../res/unprivileged-fallbacks.js"></script>
|
|
<script src="autofillEditForms.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../res/components/rich-select.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../../res/components/address-option.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<p id="display" style="height: 100vh; margin: 0;">
|
|
<iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"
|
|
sandbox="allow-same-origin"
|
|
style="float: left;"></iframe>
|
|
</p>
|
|
<div id="content" style="display: none">
|
|
|
|
</div>
|
|
<pre id="test">
|
|
</pre>
|
|
<script type="module">
|
|
/** Test the payer requested details functionality **/
|
|
|
|
import PaymentDialog from "../../res/containers/payment-dialog.js";
|
|
|
|
function isVisible(elem) {
|
|
let result = elem.getBoundingClientRect().height > 0;
|
|
return result;
|
|
}
|
|
|
|
function setPaymentOptions(requestStore, options) {
|
|
let {request} = requestStore.getState();
|
|
request = Object.assign({}, request, {
|
|
paymentOptions: options,
|
|
});
|
|
return requestStore.setState({ request });
|
|
}
|
|
|
|
const SAVED_ADDRESSES = {
|
|
"48bnds6854t": {
|
|
"address-level1": "MI",
|
|
"address-level2": "Some City",
|
|
"country": "US",
|
|
"guid": "48bnds6854t",
|
|
"name": "Mr. Foo",
|
|
"postal-code": "90210",
|
|
"street-address": "123 Sesame Street,\nApt 40",
|
|
"tel": "+1 519 555-5555",
|
|
"email": "foo@example.com",
|
|
},
|
|
"68gjdh354j": {
|
|
"address-level1": "CA",
|
|
"address-level2": "Mountain View",
|
|
"country": "US",
|
|
"guid": "68gjdh354j",
|
|
"name": "Mrs. Bar",
|
|
"postal-code": "94041",
|
|
"street-address": "P.O. Box 123",
|
|
"tel": "+1 650 555-5555",
|
|
"email": "bar@example.com",
|
|
},
|
|
};
|
|
|
|
let DUPED_ADDRESSES = {
|
|
"a9e830667189": {
|
|
"street-address": "Unit 1\n1505 Northeast Kentucky Industrial Parkway \n",
|
|
"address-level2": "Greenup",
|
|
"address-level1": "KY",
|
|
"postal-code": "41144",
|
|
"country": "US",
|
|
"email": "bob@example.com",
|
|
"guid": "a9e830667189",
|
|
"name": "Bob Smith",
|
|
},
|
|
"72a15aed206d": {
|
|
"street-address": "1 New St",
|
|
"address-level2": "York",
|
|
"address-level1": "SC",
|
|
"postal-code": "29745",
|
|
"country": "US",
|
|
"guid": "72a15aed206d",
|
|
"email": "mary@example.com",
|
|
"name": "Mary Sue",
|
|
},
|
|
"2b4dce0fbc1f": {
|
|
"street-address": "123 Park St",
|
|
"address-level2": "Springfield",
|
|
"address-level1": "OR",
|
|
"postal-code": "97403",
|
|
"country": "US",
|
|
"email": "rita@foo.com",
|
|
"guid": "2b4dce0fbc1f",
|
|
"name": "Rita Foo",
|
|
},
|
|
"46b2635a5b26": {
|
|
"street-address": "432 Another St",
|
|
"address-level2": "Springfield",
|
|
"address-level1": "OR",
|
|
"postal-code": "97402",
|
|
"country": "US",
|
|
"guid": "46b2635a5b26",
|
|
"name": "Rita Foo",
|
|
"tel": "+19871234567",
|
|
},
|
|
};
|
|
|
|
let elPicker;
|
|
let elDialog;
|
|
let initialState;
|
|
|
|
add_task(async function setup_once() {
|
|
registerConsoleFilter(function consoleFilter(msg) {
|
|
return msg.errorMessage &&
|
|
msg.errorMessage.toString().includes("selectedPayerAddress option a9e830667189 " +
|
|
"does not exist");
|
|
});
|
|
|
|
let templateFrame = document.getElementById("templateFrame");
|
|
await SimpleTest.promiseFocus(templateFrame.contentWindow);
|
|
|
|
let displayEl = document.getElementById("display");
|
|
importDialogDependencies(templateFrame, displayEl);
|
|
|
|
elDialog = new PaymentDialog();
|
|
displayEl.appendChild(elDialog);
|
|
elPicker = elDialog.querySelector("address-picker.payer-related");
|
|
|
|
let {request} = elDialog.requestStore.getState();
|
|
initialState = Object.assign({}, {
|
|
changesPrevented: false,
|
|
request: Object.assign({}, request, { completeStatus: "" }),
|
|
orderDetailsShowing: false,
|
|
});
|
|
});
|
|
|
|
async function setup() {
|
|
// reset the store back to a known, default state
|
|
elDialog.requestStore.setState(deepClone(initialState));
|
|
await asyncElementRendered();
|
|
}
|
|
|
|
add_task(async function test_empty() {
|
|
await setup();
|
|
|
|
let {request, savedAddresses} = elPicker.requestStore.getState();
|
|
ok(!savedAddresses || !savedAddresses.length,
|
|
"Check initial state has no saved addresses");
|
|
|
|
let {paymentOptions} = request;
|
|
let payerRequested = paymentOptions.requestPayerName ||
|
|
paymentOptions.requestPayerEmail ||
|
|
paymentOptions.requestPayerPhone;
|
|
ok(!payerRequested, "Check initial state has no payer details requested");
|
|
ok(elPicker, "Check elPicker exists");
|
|
is(elPicker.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
|
|
is(isVisible(elPicker), false, "The address-picker is not visible");
|
|
});
|
|
|
|
// paymentOptions properties are acurately reflected in the address-fields attribute
|
|
add_task(async function test_visible_fields() {
|
|
await setup();
|
|
let requestStore = elPicker.requestStore;
|
|
setPaymentOptions(requestStore, {
|
|
requestPayerName: true,
|
|
requestPayerEmail: true,
|
|
requestPayerPhone: true,
|
|
});
|
|
|
|
requestStore.setState({
|
|
savedAddresses: SAVED_ADDRESSES,
|
|
selectedPayerAddress: "48bnds6854t",
|
|
});
|
|
|
|
await asyncElementRendered();
|
|
|
|
let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
|
|
is(elPicker.dropdown.popupBox.children.length, 2, "Check dropdown has 2 addresses");
|
|
is(closedRichOption.getAttribute("guid"), "48bnds6854t", "expected option is visible");
|
|
|
|
for (let fieldName of ["name", "email", "tel"]) {
|
|
let elem = closedRichOption.querySelector(`.${fieldName}`);
|
|
ok(elem, `field ${fieldName} exists`);
|
|
ok(isVisible(elem), `field ${fieldName} is visible`);
|
|
}
|
|
ok(!closedRichOption.querySelector(".street-address"), "street-address element is not present");
|
|
});
|
|
|
|
add_task(async function test_selective_fields() {
|
|
await setup();
|
|
let requestStore = elPicker.requestStore;
|
|
|
|
requestStore.setState({
|
|
savedAddresses: SAVED_ADDRESSES,
|
|
selectedPayerAddress: "48bnds6854t",
|
|
});
|
|
|
|
let payerFieldVariations = [
|
|
{requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true },
|
|
{requestPayerName: true, requestPayerEmail: false, requestPayerPhone: false },
|
|
{requestPayerName: false, requestPayerEmail: true, requestPayerPhone: false },
|
|
{requestPayerName: false, requestPayerEmail: false, requestPayerPhone: true },
|
|
{requestPayerName: true, requestPayerEmail: true, requestPayerPhone: false },
|
|
{requestPayerName: false, requestPayerEmail: true, requestPayerPhone: true },
|
|
{requestPayerName: true, requestPayerEmail: false, requestPayerPhone: true },
|
|
];
|
|
|
|
for (let payerFields of payerFieldVariations) {
|
|
setPaymentOptions(requestStore, payerFields);
|
|
await asyncElementRendered();
|
|
|
|
let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
|
|
let elName = closedRichOption.querySelector(".name");
|
|
let elEmail = closedRichOption.querySelector(".email");
|
|
let elPhone = closedRichOption.querySelector(".tel");
|
|
|
|
is(!!elName && isVisible(elName), payerFields.requestPayerName,
|
|
"name field is correctly toggled");
|
|
is(!!elEmail && isVisible(elEmail), payerFields.requestPayerEmail,
|
|
"email field is correctly toggled");
|
|
is(!!elPhone && isVisible(elPhone), payerFields.requestPayerPhone,
|
|
"tel field is correctly toggled");
|
|
|
|
let numPayerFieldsRequested = [...Object.values(payerFields)].filter(val => val).length;
|
|
is(elPicker.getAttribute("break-after-nth-field"), numPayerFieldsRequested == 3 ? "1" : null,
|
|
"Check @break-after-nth-field");
|
|
if (numPayerFieldsRequested == 3) {
|
|
is(closedRichOption.breakAfterNthField, "1",
|
|
"Make sure @break-after-nth-field was propagated to <address-option>");
|
|
} else {
|
|
is(closedRichOption.breakAfterNthField, null, "Make sure @break-after-nth-field was cleared");
|
|
}
|
|
}
|
|
});
|
|
|
|
add_task(async function test_filtered_options() {
|
|
await setup();
|
|
let requestStore = elPicker.requestStore;
|
|
setPaymentOptions(requestStore, {
|
|
requestPayerName: true,
|
|
requestPayerEmail: true,
|
|
});
|
|
|
|
requestStore.setState({
|
|
savedAddresses: DUPED_ADDRESSES,
|
|
selectedPayerAddress: "a9e830667189",
|
|
});
|
|
|
|
await asyncElementRendered();
|
|
|
|
let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
|
|
is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 4 addresses");
|
|
is(closedRichOption.getAttribute("guid"), "a9e830667189", "expected option is visible");
|
|
|
|
for (let fieldName of ["name", "email"]) {
|
|
let elem = closedRichOption.querySelector(`.${fieldName}`);
|
|
ok(elem, `field ${fieldName} exists`);
|
|
ok(isVisible(elem), `field ${fieldName} is visible`);
|
|
}
|
|
|
|
// The selectedPayerAddress (a9e830667189) doesn't have a phone number and
|
|
// therefore will cause an error.
|
|
SimpleTest.expectUncaughtException(true);
|
|
|
|
setPaymentOptions(requestStore, {
|
|
requestPayerPhone: true,
|
|
});
|
|
await asyncElementRendered();
|
|
|
|
is(elPicker.dropdown.popupBox.children.length, 1, "Check dropdown has 1 addresses");
|
|
|
|
setPaymentOptions(requestStore, {});
|
|
await asyncElementRendered();
|
|
|
|
is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 4 addresses");
|
|
});
|
|
|
|
add_task(async function test_no_matches() {
|
|
await setup();
|
|
let requestStore = elPicker.requestStore;
|
|
setPaymentOptions(requestStore, {
|
|
requestPayerPhone: true,
|
|
});
|
|
|
|
// The selectedPayerAddress (a9e830667189) doesn't have a phone number and
|
|
// therefore will cause an error.
|
|
SimpleTest.expectUncaughtException(true);
|
|
|
|
requestStore.setState({
|
|
savedAddresses: {
|
|
"2b4dce0fbc1f": {
|
|
"email": "rita@foo.com",
|
|
"guid": "2b4dce0fbc1f",
|
|
"name": "Rita Foo",
|
|
},
|
|
"46b2635a5b26": {
|
|
"guid": "46b2635a5b26",
|
|
"name": "Rita Foo",
|
|
},
|
|
},
|
|
selectedPayerAddress: "a9e830667189",
|
|
});
|
|
|
|
await asyncElementRendered();
|
|
|
|
let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
|
|
is(elPicker.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
|
|
ok(closedRichOption.localName !== "address-option", "No option is selected and visible");
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|