Bug 1427950 - Use the <rich-select> 'change' event to update selectedShippingAddress state. r=jaws
MozReview-Commit-ID: 7q5AWrEC7x4
--- a/toolkit/components/payments/res/containers/address-picker.js
+++ b/toolkit/components/payments/res/containers/address-picker.js
@@ -11,16 +11,17 @@
* Container around <rich-select> (eventually providing add/edit links) with
* <address-option> listening to savedAddresses.
*/
class AddressPicker extends PaymentStateSubscriberMixin(HTMLElement) {
constructor() {
super();
this.dropdown = document.createElement("rich-select");
+ this.dropdown.addEventListener("change", this);
}
connectedCallback() {
this.appendChild(this.dropdown);
super.connectedCallback();
}
render(state) {
@@ -54,11 +55,30 @@ class AddressPicker extends PaymentState
throw new Error(`${this.selectedStateKey} option ${selectedAddressGUID}` +
`does not exist in options`);
}
}
get selectedStateKey() {
return this.getAttribute("selected-state-key");
}
+
+ handleEvent(event) {
+ switch (event.type) {
+ case "change": {
+ this.onChange(event);
+ break;
+ }
+ }
+ }
+
+ onChange(event) {
+ let select = event.target;
+ let selectedKey = this.selectedStateKey;
+ if (selectedKey) {
+ this.requestStore.setState({
+ [selectedKey]: select.selectedOption && select.selectedOption.guid,
+ });
+ }
+ }
}
customElements.define("address-picker", AddressPicker);
--- a/toolkit/components/payments/test/mochitest/test_address_picker.html
+++ b/toolkit/components/payments/test/mochitest/test_address_picker.html
@@ -19,17 +19,18 @@ Test the address-picker component
<script src="rich-option.js"></script>
<script src="address-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="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
- <address-picker id="picker1"></address-picker>
+ <address-picker id="picker1"
+ selected-state-key="selectedShippingAddress"></address-picker>
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script type="application/javascript">
/** Test the address-picker component **/
@@ -109,16 +110,33 @@ add_task(async function test_update() {
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",