Bug 1463547 - Hide the edit link in the pickers when no options are selected. r?MattN draft
authorprathiksha <prathikshaprasadsuman@gmail.com>
Thu, 26 Jul 2018 15:08:41 -0700
changeset 823269 bcf49fc9159db8ad8a8cc38e7ce298af55c1b8cb
parent 822981 4e6486b672b32aba075b704c6b1e41e8ccf7a135
push id117635
push userbmo:prathikshaprasadsuman@gmail.com
push dateFri, 27 Jul 2018 00:09:14 +0000
reviewersMattN
bugs1463547
milestone63.0a1
Bug 1463547 - Hide the edit link in the pickers when no options are selected. r?MattN MozReview-Commit-ID: DcTcmV2v6N1
browser/components/payments/res/containers/address-picker.js
browser/components/payments/res/containers/payment-method-picker.js
browser/components/payments/res/containers/rich-picker.js
browser/components/payments/test/mochitest/test_address_picker.html
browser/components/payments/test/mochitest/test_shipping_option_picker.html
--- 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: [
           {