Bug 1463547 - Hide the edit link in the pickers when no options are selected. r?MattN
MozReview-Commit-ID: DcTcmV2v6N1
--- a/browser/components/payments/res/containers/address-picker.js
+++ b/browser/components/payments/res/containers/address-picker.js
@@ -108,16 +108,18 @@ export default class AddressPicker exten
// Update selectedness after the options are updated
let selectedAddressGUID = state[this.selectedStateKey];
this.dropdown.value = selectedAddressGUID;
if (selectedAddressGUID && selectedAddressGUID !== this.dropdown.value) {
throw new Error(`${this.selectedStateKey} option ${selectedAddressGUID} ` +
`does not exist in the address picker`);
}
+
+ super.render(state);
}
get selectedStateKey() {
return this.getAttribute("selected-state-key");
}
handleEvent(event) {
switch (event.type) {
--- a/browser/components/payments/res/containers/payment-method-picker.js
+++ b/browser/components/payments/res/containers/payment-method-picker.js
@@ -60,16 +60,18 @@ export default class PaymentMethodPicker
// Update selectedness after the options are updated
let selectedPaymentCardGUID = state[this.selectedStateKey];
this.dropdown.value = selectedPaymentCardGUID;
if (selectedPaymentCardGUID && selectedPaymentCardGUID !== this.dropdown.value) {
throw new Error(`The option ${selectedPaymentCardGUID} ` +
`does not exist in the payment method picker`);
}
+
+ super.render(state);
}
get selectedStateKey() {
return this.getAttribute("selected-state-key");
}
handleEvent(event) {
switch (event.type) {
--- a/browser/components/payments/res/containers/rich-picker.js
+++ b/browser/components/payments/res/containers/rich-picker.js
@@ -43,9 +43,13 @@ export default class RichPicker extends
super.connectedCallback();
}
attributeChangedCallback(name, oldValue, newValue) {
if (name == "label") {
this.labelElement.textContent = newValue;
}
}
+
+ render(state) {
+ this.editLink.hidden = !this.dropdown.value;
+ }
}
--- a/browser/components/payments/test/mochitest/test_address_picker.html
+++ b/browser/components/payments/test/mochitest/test_address_picker.html
@@ -33,16 +33,17 @@ Test the address-picker component
import "../../res/containers/address-picker.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");
+ is(picker1.editLink.hidden, true, "Check that picker edit link is hidden");
is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
});
add_task(async function test_initialSet() {
picker1.requestStore.setState({
savedAddresses: {
"48bnds6854t": {
"address-level1": "MI",
@@ -107,16 +108,17 @@ add_task(async function test_update() {
ok(options[1].textContent.includes("Mrs. Bar"), "Check that name is the same in second address");
ok(options[1].getAttribute("street-address").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;
is(picker1.dropdown.selectedOption, null, "Should default to no selected option");
+ is(picker1.editLink.hidden, true, "Picker edit link should be hidden when no option is selected");
let {selectedShippingAddress} = picker1.requestStore.getState();
is(selectedShippingAddress, null, "store should have no option selected");
picker1.dropdown.popupBox.focus();
synthesizeKey(options[1].getAttribute("name"), {});
await asyncElementRendered();
let selectedOption = picker1.dropdown.selectedOption;
--- a/browser/components/payments/test/mochitest/test_shipping_option_picker.html
+++ b/browser/components/payments/test/mochitest/test_shipping_option_picker.html
@@ -34,16 +34,18 @@ import "../../res/containers/shipping-op
let picker1 = document.getElementById("picker1");
add_task(async function test_empty() {
ok(picker1, "Check picker1 exists");
let state = picker1.requestStore.getState();
let {shippingOptions} = state && state.request && state.request.paymentDetails;
is(Object.keys(shippingOptions).length, 0, "Check empty initial state");
is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
+ ok(picker1.editLink.hidden, true, "Check that picker edit link is always hidden");
+ ok(picker1.addLink.hidden, true, "Check that picker add link is always hidden");
});
add_task(async function test_initialSet() {
picker1.requestStore.setState({
request: {
paymentDetails: {
shippingOptions: [
{