forked from mirrors/gecko-dev
4a3b48e09b
Differential Revision: https://phabricator.services.mozilla.com/D7473 --HG-- extra : moz-landing-system : lando
277 lines
9.8 KiB
HTML
277 lines
9.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test the payment-method-picker component
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test the payment-method-picker component</title>
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="application/javascript" src="/tests/SimpleTest/AddTask.js"></script>
|
|
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script src="payments_common.js"></script>
|
|
<script src="../../res/unprivileged-fallbacks.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../res/containers/rich-picker.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../../res/components/rich-select.css"/>
|
|
<link rel="stylesheet" type="text/css" href="../../res/components/basic-card-option.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<p id="display">
|
|
<payment-method-picker id="picker1"
|
|
data-invalid-label="picker1: Missing or invalid"
|
|
selected-state-key="selectedPaymentCard"></payment-method-picker>
|
|
</p>
|
|
<div id="content" style="display: none">
|
|
|
|
</div>
|
|
<pre id="test">
|
|
</pre>
|
|
<script type="module">
|
|
/** Test the payment-method-picker component **/
|
|
|
|
import "../../res/components/basic-card-option.js";
|
|
import "../../res/containers/payment-method-picker.js";
|
|
|
|
let picker1 = document.getElementById("picker1");
|
|
|
|
add_task(async function test_empty() {
|
|
ok(picker1, "Check picker1 exists");
|
|
let {savedBasicCards} = picker1.requestStore.getState();
|
|
is(Object.keys(savedBasicCards).length, 0, "Check empty initial state");
|
|
is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
|
|
});
|
|
|
|
add_task(async function test_initialSet() {
|
|
picker1.requestStore.setState({
|
|
savedBasicCards: {
|
|
"48bnds6854t": {
|
|
"cc-exp": "2017-02",
|
|
"cc-exp-month": 2,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "John Doe",
|
|
"cc-number": "************9999",
|
|
"cc-type": "mastercard",
|
|
"guid": "48bnds6854t",
|
|
},
|
|
"68gjdh354j": {
|
|
"cc-exp": "2017-08",
|
|
"cc-exp-month": 8,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "J Smith",
|
|
"cc-number": "***********1234",
|
|
"cc-type": "visa",
|
|
"guid": "68gjdh354j",
|
|
},
|
|
"123456789abc": {
|
|
"cc-name": "Jane Fields",
|
|
"cc-given-name": "Jane",
|
|
"cc-additional-name": "",
|
|
"cc-family-name": "Fields",
|
|
"cc-number": "************9876",
|
|
"guid": "123456789abc",
|
|
},
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
let options = picker1.dropdown.popupBox.children;
|
|
is(options.length, 3, "Check dropdown has all three cards");
|
|
ok(options[0].textContent.includes("John Doe"), "Check first card");
|
|
ok(options[1].textContent.includes("J Smith"), "Check second card");
|
|
ok(options[2].textContent.includes("Jane Fields"), "Check third card");
|
|
});
|
|
|
|
add_task(async function test_update() {
|
|
picker1.requestStore.setState({
|
|
savedBasicCards: {
|
|
"48bnds6854t": {
|
|
// Same GUID, different values to trigger an update
|
|
"cc-exp": "2017-09",
|
|
"cc-exp-month": 9,
|
|
"cc-exp-year": 2017,
|
|
// cc-name was cleared which means it's not returned
|
|
"cc-number": "************9876",
|
|
"cc-type": "amex",
|
|
"guid": "48bnds6854t",
|
|
},
|
|
"68gjdh354j": {
|
|
"cc-exp": "2017-08",
|
|
"cc-exp-month": 8,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "J Smith",
|
|
"cc-number": "***********1234",
|
|
"cc-type": "visa",
|
|
"guid": "68gjdh354j",
|
|
},
|
|
"123456789abc": {
|
|
"cc-name": "Jane Fields",
|
|
"cc-given-name": "Jane",
|
|
"cc-additional-name": "",
|
|
"cc-family-name": "Fields",
|
|
"cc-number": "************9876",
|
|
"guid": "123456789abc",
|
|
},
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
let options = picker1.dropdown.popupBox.children;
|
|
is(options.length, 3, "Check dropdown still has three cards");
|
|
ok(!options[0].textContent.includes("John Doe"), "Check cleared first cc-name");
|
|
ok(options[0].textContent.includes("9876"), "Check updated first cc-number");
|
|
ok(options[0].textContent.includes("09"), "Check updated first exp-month");
|
|
|
|
ok(options[1].textContent.includes("J Smith"), "Check second card is the same");
|
|
ok(options[2].textContent.includes("Jane Fields"), "Check third card is the same");
|
|
});
|
|
|
|
add_task(async function test_change_selected_card() {
|
|
let options = picker1.dropdown.popupBox.children;
|
|
is(picker1.dropdown.selectedOption, null, "Should default to no selected option");
|
|
let {
|
|
selectedPaymentCard,
|
|
selectedPaymentCardSecurityCode,
|
|
} = picker1.requestStore.getState();
|
|
is(selectedPaymentCard, null, "store should have no option selected");
|
|
is(selectedPaymentCardSecurityCode, null, "store should have no security code");
|
|
ok(!picker1.classList.contains("invalid-selected-option"), "No validation on an empty selection");
|
|
ok(isHidden(picker1.invalidLabel), "The invalid label should be hidden");
|
|
|
|
await SimpleTest.promiseFocus();
|
|
picker1.dropdown.popupBox.focus();
|
|
synthesizeKey("************9876", {});
|
|
await asyncElementRendered();
|
|
ok(true, "Focused the security code field");
|
|
ok(!picker1.open, "Picker should be closed");
|
|
|
|
let selectedOption = picker1.dropdown.selectedOption;
|
|
is(selectedOption, options[2], "Selected option should now be the third option");
|
|
selectedPaymentCard = picker1.requestStore.getState().selectedPaymentCard;
|
|
is(selectedPaymentCard, selectedOption.getAttribute("guid"),
|
|
"store should have third option selected");
|
|
selectedPaymentCardSecurityCode = picker1.requestStore.getState().selectedPaymentCardSecurityCode;
|
|
is(selectedPaymentCardSecurityCode, null, "store should have empty security code");
|
|
ok(picker1.classList.contains("invalid-selected-option"), "Missing fields for the third option");
|
|
ok(!isHidden(picker1.invalidLabel), "The invalid label should be visible");
|
|
is(picker1.invalidLabel.innerText, picker1.dataset.invalidLabel, "Check displayed error text");
|
|
|
|
await SimpleTest.promiseFocus();
|
|
picker1.dropdown.popupBox.focus();
|
|
synthesizeKey("visa", {});
|
|
await asyncElementRendered();
|
|
ok(true, "Focused the security code field");
|
|
ok(!picker1.open, "Picker should be closed");
|
|
|
|
selectedOption = picker1.dropdown.selectedOption;
|
|
is(selectedOption, options[1], "Selected option should now be the second option");
|
|
selectedPaymentCard = picker1.requestStore.getState().selectedPaymentCard;
|
|
is(selectedPaymentCard, selectedOption.getAttribute("guid"),
|
|
"store should have second option selected");
|
|
selectedPaymentCardSecurityCode = picker1.requestStore.getState().selectedPaymentCardSecurityCode;
|
|
is(selectedPaymentCardSecurityCode, null, "store should have empty security code");
|
|
ok(!picker1.classList.contains("invalid-selected-option"), "The second option has all fields");
|
|
ok(isHidden(picker1.invalidLabel), "The invalid label should be hidden");
|
|
|
|
let stateChangePromise = promiseStateChange(picker1.requestStore);
|
|
|
|
// Type in the security code field
|
|
picker1.securityCodeInput.querySelector("input").focus();
|
|
sendString("836");
|
|
sendKey("Tab");
|
|
let state = await stateChangePromise;
|
|
ok(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
|
|
});
|
|
|
|
add_task(async function test_delete() {
|
|
picker1.requestStore.setState({
|
|
savedBasicCards: {
|
|
// 48bnds6854t was deleted
|
|
"68gjdh354j": {
|
|
"cc-exp": "2017-08",
|
|
"cc-exp-month": 8,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "J Smith",
|
|
"cc-number": "***********1234",
|
|
"cc-type": "visa",
|
|
"guid": "68gjdh354j",
|
|
},
|
|
"123456789abc": {
|
|
"cc-name": "Jane Fields",
|
|
"cc-given-name": "Jane",
|
|
"cc-additional-name": "",
|
|
"cc-family-name": "Fields",
|
|
"cc-number": "************9876",
|
|
"guid": "123456789abc",
|
|
},
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
let options = picker1.dropdown.popupBox.children;
|
|
is(options.length, 2, "Check dropdown has two remaining cards");
|
|
ok(options[0].textContent.includes("J Smith"), "Check remaining card #1");
|
|
ok(options[1].textContent.includes("Jane Fields"), "Check remaining card #2");
|
|
});
|
|
|
|
add_task(async function test_supportedNetworks_tempCards() {
|
|
await picker1.requestStore.reset();
|
|
|
|
let request = Object.assign({}, picker1.requestStore.getState().request);
|
|
request.paymentMethods = [
|
|
{
|
|
supportedMethods: "basic-card",
|
|
data: {
|
|
supportedNetworks: [
|
|
"mastercard",
|
|
"visa",
|
|
],
|
|
},
|
|
},
|
|
];
|
|
|
|
await picker1.requestStore.setState({
|
|
request,
|
|
selectedPaymentCard: "68gjdh354j",
|
|
tempBasicCards: {
|
|
"68gjdh354j": {
|
|
"cc-exp": "2017-08",
|
|
"cc-exp-month": 8,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "J Smith",
|
|
"cc-number": "***********1234",
|
|
"cc-type": "discover",
|
|
"guid": "68gjdh354j",
|
|
},
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
let options = picker1.dropdown.popupBox.children;
|
|
is(options.length, 1, "Check dropdown has one card");
|
|
ok(options[0].textContent.includes("J Smith"), "Check remaining card #1");
|
|
|
|
ok(picker1.classList.contains("invalid-selected-option"),
|
|
"Check discover is recognized as not supported");
|
|
is(picker1.invalidLabel.innerText, picker1.dataset.invalidLabel, "Check displayed error text");
|
|
|
|
info("change the card to be a visa");
|
|
await picker1.requestStore.setState({
|
|
tempBasicCards: {
|
|
"68gjdh354j": {
|
|
"cc-exp": "2017-08",
|
|
"cc-exp-month": 8,
|
|
"cc-exp-year": 2017,
|
|
"cc-name": "J Smith",
|
|
"cc-number": "***********1234",
|
|
"cc-type": "visa",
|
|
"guid": "68gjdh354j",
|
|
},
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
|
|
ok(!picker1.classList.contains("invalid-selected-option"),
|
|
"Check visa is recognized as supported");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|