copy from toolkit/components/payments/test/mochitest/test_address_picker.html
copy to toolkit/components/payments/test/mochitest/test_payment_method_picker.html
--- a/toolkit/components/payments/test/mochitest/test_address_picker.html
+++ b/toolkit/components/payments/test/mochitest/test_payment_method_picker.html
@@ -1,159 +1,170 @@
<!DOCTYPE HTML>
<html>
<!--
-Test the address-picker component
+Test the payment-method-picker component
-->
<head>
<meta charset="utf-8">
- <title>Test the address-picker component</title>
+ <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/SpawnTask.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
<script src="payments_common.js"></script>
<script src="custom-elements.min.js"></script>
<script src="PaymentsStore.js"></script>
<script src="ObservedPropertiesMixin.js"></script>
<script src="PaymentStateSubscriberMixin.js"></script>
<script src="rich-select.js"></script>
- <script src="address-picker.js"></script>
+ <script src="payment-method-picker.js"></script>
<script src="rich-option.js"></script>
- <script src="address-option.js"></script>
+ <script src="basic-card-option.js"></script>
<link rel="stylesheet" type="text/css" href="rich-select.css"/>
- <link rel="stylesheet" type="text/css" href="address-option.css"/>
+ <link rel="stylesheet" type="text/css" href="basic-card-option.css"/>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
- <address-picker id="picker1"
- selected-state-key="selectedShippingAddress"></address-picker>
+ <payment-method-picker id="picker1"
+ selected-state-key="selectedPaymentCard"></payment-method-picker>
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script type="application/javascript">
-/** Test the address-picker component **/
+/** Test the payment-method-picker component **/
/* import-globals-from payments_common.js */
-/* import-globals-from ../../res/components/address-option.js */
+/* import-globals-from ../../res/components/basic-card-option.js */
let picker1 = document.getElementById("picker1");
add_task(async function test_empty() {
ok(picker1, "Check picker1 exists");
- let {savedAddresses} = picker1.requestStore.getState();
- is(Object.keys(savedAddresses).length, 0, "Check empty initial state");
+ 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({
- savedAddresses: {
+ savedBasicCards: {
"48bnds6854t": {
- "address-level1": "MI",
- "address-level2": "Some City",
- "country": "US",
+ "cc-exp": "2017-02",
+ "cc-exp-month": 2,
+ "cc-exp-year": 2017,
+ "cc-name": "John Doe",
+ "cc-number": "************9999",
"guid": "48bnds6854t",
- "name": "Mr. Foo",
- "postal-code": "90210",
- "street-address": "123 Sesame Street,\nApt 40",
- "tel": "+1 519 555-5555",
},
"68gjdh354j": {
- "address-level1": "CA",
- "address-level2": "Mountain View",
- "country": "US",
+ "cc-exp": "2017-08",
+ "cc-exp-month": 8,
+ "cc-exp-year": 2017,
+ "cc-name": "J Smith",
+ "cc-number": "***********1234",
"guid": "68gjdh354j",
- "name": "Mrs. Bar",
- "postal-code": "94041",
- "street-address": "P.O. Box 123",
- "tel": "+1 650 555-5555",
+ },
+ },
+ });
+ await asyncElementRendered();
+ let options = picker1.dropdown.popupBox.children;
+ is(options.length, 2, "Check dropdown has both cards");
+ ok(options[0].textContent.includes("John Doe"), "Check first card");
+ ok(options[1].textContent.includes("J Smith"), "Check second 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": "John Edit Doe",
+ "cc-number": "************9876",
+ "guid": "48bnds6854t",
+ },
+ "68gjdh354j": {
+ "cc-exp": "2017-08",
+ "cc-exp-month": 8,
+ "cc-exp-year": 2017,
+ "cc-name": "J Smith",
+ "cc-number": "***********1234",
+ "guid": "68gjdh354j",
},
},
});
await asyncElementRendered();
let options = picker1.dropdown.popupBox.children;
- is(options.length, 2, "Check dropdown has both addresses");
- ok(options[0].textContent.includes("123 Sesame Street"), "Check first address");
- ok(options[1].textContent.includes("P.O. Box 123"), "Check second address");
+ is(options.length, 2, "Check dropdown still has both cards");
+ ok(options[0].textContent.includes("John Edit Doe"), "Check updated 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");
});
-add_task(async function test_update() {
+add_task(async function test_change_selected_card() {
+ let options = picker1.dropdown.popupBox.children;
+ let selectedOption = picker1.dropdown.selectedOption;
+ is(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");
+
+ await SimpleTest.promiseFocus();
+ let codeFocusPromise = new Promise(resolve => {
+ picker1.securityCodeInput.addEventListener("focus", resolve, {once: true});
+ });
+ picker1.dropdown.click();
+ options[1].click();
+ await asyncElementRendered();
+ await codeFocusPromise;
+ 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.guid, "store should have second option selected");
+ selectedPaymentCardSecurityCode = picker1.requestStore.getState().selectedPaymentCardSecurityCode;
+ is(selectedPaymentCardSecurityCode, null, "store should have empty security code");
+
+ let stateChangePromise = promiseStateChange(picker1.requestStore);
+
+ // Type in the security code field
+ 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({
- savedAddresses: {
- "48bnds6854t": {
- // Same GUID, different values to trigger an update
- "address-level1": "MI-edit",
- "address-level2": "Some City-edit",
- "country": "CA",
- "guid": "48bnds6854t",
- "name": "Mr. Foo-edit",
- "postal-code": "90210-1234",
- "street-address": "new-edit",
- "tel": "+1 650 555-5555",
- },
+ savedBasicCards: {
+ // 48bnds6854t was deleted
"68gjdh354j": {
- "address-level1": "CA",
- "address-level2": "Mountain View",
- "country": "US",
+ "cc-exp": "2017-08",
+ "cc-exp-month": 8,
+ "cc-exp-year": 2017,
+ "cc-name": "J Smith",
+ "cc-number": "***********1234",
"guid": "68gjdh354j",
- "name": "Mrs. Bar",
- "postal-code": "94041",
- "street-address": "P.O. Box 123",
- "tel": "+1 650 555-5555",
},
},
});
await asyncElementRendered();
let options = picker1.dropdown.popupBox.children;
- is(options.length, 2, "Check dropdown still has both addresses");
- ok(options[0].textContent.includes("MI-edit"), "Check updated first address-level1");
- ok(options[0].textContent.includes("Some City-edit"), "Check updated first address-level2");
- ok(options[0].textContent.includes("new-edit"), "Check updated first address");
-
- ok(options[1].textContent.includes("P.O. Box 123"), "Check second address is the same");
-});
-
-add_task(async function test_change_selected_address() {
- let options = picker1.dropdown.popupBox.children;
- let selectedOption = picker1.dropdown.selectedOption;
- is(selectedOption, null, "Should default to no selected option");
- let {selectedShippingAddress} = picker1.requestStore.getState();
- is(selectedShippingAddress, null, "store should have no option selected");
-
- picker1.dropdown.click();
- options[1].click();
- await asyncElementRendered();
-
- selectedOption = picker1.dropdown.selectedOption;
- is(selectedOption, options[1], "Selected option should now be the second option");
- selectedShippingAddress = picker1.requestStore.getState().selectedShippingAddress;
- is(selectedShippingAddress, selectedOption.guid, "store should have second option selected");
-});
-
-add_task(async function test_delete() {
- picker1.requestStore.setState({
- savedAddresses: {
- // 48bnds6854t was deleted
- "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",
- },
- },
- });
- await asyncElementRendered();
- let options = picker1.dropdown.popupBox.children;
- is(options.length, 1, "Check dropdown has one remaining address");
- ok(options[0].textContent.includes("P.O. Box 123"), "Check remaining address");
+ is(options.length, 1, "Check dropdown has one remaining card");
+ ok(options[0].textContent.includes("J Smith"), "Check remaining card");
});
</script>
</body>
</html>