зеркало из https://github.com/mozilla/gecko-dev.git
133 строки
4.3 KiB
HTML
133 строки
4.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test the address-picker component
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test the billing-address-picker component</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="/tests/SimpleTest/EventUtils.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/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/address-option.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<p id="display">
|
|
<billing-address-picker id="picker1"
|
|
data-field-separator=", "
|
|
data-invalid-label="Picker1: Missing or Invalid"
|
|
selected-state-key="basic-card-page|billingAddressGUID"></billing-address-picker>
|
|
<select id="theOptions">
|
|
<option></option>
|
|
<option value="48bnds6854t">48bnds6854t</option>
|
|
<option value="68gjdh354j" selected="">68gjdh354j</option>
|
|
</select>
|
|
</p>
|
|
<div id="content" style="display: none">
|
|
|
|
</div>
|
|
<pre id="test">
|
|
</pre>
|
|
<script type="module">
|
|
/** Test the billing-address-picker component **/
|
|
|
|
import BillingAddressPicker from "../../res/containers/billing-address-picker.js";
|
|
|
|
let picker1 = document.getElementById("picker1");
|
|
let 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",
|
|
timeLastUsed: 200,
|
|
},
|
|
"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",
|
|
timeLastUsed: 300,
|
|
},
|
|
"abcde12345": {
|
|
"address-level2": "Mountain View",
|
|
"country": "US",
|
|
"guid": "abcde12345",
|
|
"name": "Mrs. Fields",
|
|
timeLastUsed: 100,
|
|
},
|
|
};
|
|
|
|
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");
|
|
is(picker1.editLink.hidden, true, "Check that picker edit link is hidden");
|
|
is(picker1.options.length, 1, "Check only the empty option is present");
|
|
ok(picker1.dropdown.selectedOption, "Has a selectedOption");
|
|
is(picker1.dropdown.value, "", "Has empty value");
|
|
|
|
// update state to trigger render without changing available addresses
|
|
picker1.requestStore.setState({
|
|
"basic-card-page": {
|
|
"someKey": "someValue",
|
|
},
|
|
});
|
|
await asyncElementRendered();
|
|
|
|
is(picker1.dropdown.popupBox.children.length, 1, "Check only the empty option is present");
|
|
ok(picker1.dropdown.selectedOption, "Has a selectedOption");
|
|
is(picker1.dropdown.value, "", "Has empty value");
|
|
});
|
|
|
|
add_task(async function test_getCurrentValue() {
|
|
picker1.requestStore.setState({
|
|
"basic-card-page": {
|
|
"billingAddressGUID": "68gjdh354j",
|
|
},
|
|
savedAddresses: addresses,
|
|
});
|
|
await asyncElementRendered();
|
|
|
|
picker1.dropdown.popupBox.value = "abcde12345";
|
|
|
|
is(picker1.options.length, 4, "Check we have options for each address + empty one");
|
|
is(picker1.getCurrentValue(picker1.requestStore.getState()), "abcde12345",
|
|
"Initial/current value reflects the <select>.value, " +
|
|
"not whatever is in the state at the selectedStateKey");
|
|
});
|
|
|
|
add_task(async function test_wrapPopupBox() {
|
|
let picker = new BillingAddressPicker();
|
|
picker.dropdown.popupBox = document.querySelector("#theOptions");
|
|
picker.dataset.invalidLabel = "Invalid";
|
|
picker.setAttribute("label", "The label");
|
|
picker.setAttribute("selected-state-key", "basic-card-page|billingAddressGUID");
|
|
|
|
document.querySelector("#display").appendChild(picker);
|
|
|
|
is(picker.labelElement.getAttribute("for"), "theOptions",
|
|
"The label points at the right element");
|
|
is(picker.invalidLabel.getAttribute("for"), "theOptions",
|
|
"The invalidLabel points at the right element");
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|