mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 18:26:15 +00:00
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:
parent
779b0b00c2
commit
920b10cfd6
@ -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);
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user