Bug 1427950 - Use the <rich-select> 'change' event to update selectedShippingAddress state. r=jaws

MozReview-Commit-ID: 7q5AWrEC7x4

--HG--
extra : rebase_source : df382271d36bbed6c474fb39aafe73e4d46e080a
This commit is contained in:
Matthew Noorenberghe 2018-01-29 21:14:31 -08:00
parent 779b0b00c2
commit 920b10cfd6
2 changed files with 39 additions and 1 deletions

View File

@ -16,6 +16,7 @@ class AddressPicker extends PaymentStateSubscriberMixin(HTMLElement) {
constructor() {
super();
this.dropdown = document.createElement("rich-select");
this.dropdown.addEventListener("change", this);
}
connectedCallback() {
@ -59,6 +60,25 @@ class AddressPicker extends PaymentStateSubscriberMixin(HTMLElement) {
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);

View File

@ -24,7 +24,8 @@ Test the address-picker component
</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">
@ -114,6 +115,23 @@ add_task(async function test_update() {
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: {