Bug 1462779 - Auto-select appropriate addresses in select dropdowns in on-boarding forms. r=MattN
authorprathiksha <prathikshaprasadsuman@gmail.com>
Wed, 23 May 2018 16:24:58 -0700
changeset 420558 df80a62cc91f6a45d4fcd31e831f9043850614b9
parent 420557 def9442b2a8136f2001c0aa5a0b629caafeb3935
child 420559 dfed23857ceadea9cfd762992a128ab9307ba364
push id34074
push userapavel@mozilla.com
push dateThu, 31 May 2018 10:03:38 +0000
treeherdermozilla-central@d5eed637f5dd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1462779
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1462779 - Auto-select appropriate addresses in select dropdowns in on-boarding forms. r=MattN MozReview-Commit-ID: 5Lm3djwSeuG
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/paymentRequest.js
browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
browser/components/payments/test/mochitest/test_basic_card_form.html
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -138,32 +138,34 @@ export default class BasicCardForm exten
       if (!record) {
         throw new Error("Trying to edit a non-existing card: " + basicCardPage.guid);
       }
       // When editing an existing record, prevent changes to persistence
       this.persistCheckbox.hidden = true;
     } else {
       this.pageTitle.textContent = this.dataset.addBasicCardTitle;
       // Use a currently selected shipping address as the default billing address
+      record.billingAddressGUID = basicCardPage.billingAddressGUID;
       if (!record.billingAddressGUID && selectedShippingAddress) {
         record.billingAddressGUID = selectedShippingAddress;
       }
       // Adding a new record: default persistence to checked when in a not-private session
       this.persistCheckbox.hidden = false;
       this.persistCheckbox.checked = !state.isPrivate;
     }
 
     this.formHandler.loadRecord(record, addresses, basicCardPage.preserveFieldValues);
 
     this.form.querySelector(".billingAddressRow").hidden = false;
 
+    let billingAddressSelect = this.form.querySelector("#billingAddressGUID");
     if (basicCardPage.billingAddressGUID) {
-      let addressGuid = basicCardPage.billingAddressGUID;
-      let billingAddressSelect = this.form.querySelector("#billingAddressGUID");
-      billingAddressSelect.value = addressGuid;
+      billingAddressSelect.value = basicCardPage.billingAddressGUID;
+    } else if (!editing) {
+      billingAddressSelect.value = Object.keys(addresses)[0];
     }
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "click": {
         this.onClick(event);
         break;
--- a/browser/components/payments/res/paymentRequest.js
+++ b/browser/components/payments/res/paymentRequest.js
@@ -132,29 +132,30 @@ var paymentRequest = {
     // Onboarding wizard flow.
     if (!hasSavedAddresses && (shippingRequested || !hasSavedCards)) {
       state.page = {
         id: "address-page",
         onboardingWizard: true,
       };
 
       state["address-page"] = {
-        selectedStateKey: "selectedShippingAddress",
         addressFields: null,
         guid: null,
       };
 
       if (shippingRequested) {
         Object.assign(state["address-page"], {
           title: paymentDialog.dataset.shippingAddressTitleAdd,
         });
+        state.page.selectedStateKey = ["selectedShippingAddress"];
       } else {
         Object.assign(state["address-page"], {
           title: paymentDialog.dataset.billingAddressTitleAdd,
         });
+        state.page.selectedStateKey = ["basic-card-page", "billingAddressGUID"];
       }
     } else if (!hasSavedCards) {
       state.page = {
         id: "basic-card-page",
         onboardingWizard: true,
       };
     }
 
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -32,17 +32,17 @@ add_task(async function test_onboarding_
 
     await spawnPaymentDialogTask(frame, async function() {
       let {
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" &&
-               state["address-page"].selectedStateKey == "selectedShippingAddress";
+               state.page.selectedStateKey[0] == "selectedShippingAddress";
       }, "Address page is shown first during on-boarding if there are no saved addresses");
 
       info("Checking if the address page has been rendered");
       let addressSaveButton = content.document.querySelector("address-form .save-button");
       ok(content.isVisible(addressSaveButton), "Address save button is rendered");
 
       info("Check if the total header is visible on the address page during on-boarding");
       let header = content.document.querySelector("header");
@@ -76,16 +76,22 @@ add_task(async function test_onboarding_
 
       let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
       ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
 
       let basicCardTitle = content.document.querySelector("basic-card-form h1");
       ok(content.isVisible(basicCardTitle), "Basic card page title is visible");
       is(basicCardTitle.textContent, "Add Credit Card", "Basic card page title is correctly shown");
 
+      info("Check if the correct billing address is selected in the basic card page");
+      PTU.DialogContentUtils.waitForState((state) => {
+        let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
+        return state.selectedShippingAddress == billingAddressSelect.value;
+      }, "Shipping address is selected as the billing address");
+
       for (let [key, val] of Object.entries(PTU.BasicCards.JohnDoe)) {
         let field = content.document.getElementById(key);
         field.value = val;
         ok(!field.disabled, `Field #${key} shouldn't be disabled`);
       }
       content.document.querySelector("basic-card-form .save-button").click();
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
@@ -301,17 +307,19 @@ add_task(async function test_onboarding_
       });
 
     await spawnPaymentDialogTask(frame, async function() {
       let {
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
-        return state.page.id == "address-page";
+        return state.page.id == "address-page" &&
+               state.page.selectedStateKey[0] == "basic-card-page" &&
+               state.page.selectedStateKey[1] == "billingAddressGUID";
       // eslint-disable-next-line max-len
       }, "Billing address page is shown first during on-boarding if requestShipping is turned off");
 
       info("Checking if the billing address page has been rendered");
       let addressSaveButton = content.document.querySelector("address-form .save-button");
       ok(content.isVisible(addressSaveButton),
          "Address save button is rendered");
 
@@ -334,16 +342,22 @@ add_task(async function test_onboarding_
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "basic-card-page";
       // eslint-disable-next-line max-len
       }, "Basic card page is shown after the billing address page during onboarding if requestShipping is turned off");
 
       let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
       ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
 
+      info("Check if the correct billing address is selected in the basic card page");
+      PTU.DialogContentUtils.waitForState((state) => {
+        let billingAddressSelect = content.document.querySelector("#billingAddressGUID");
+        return state["basic-card-page"].billingAddressGUID == billingAddressSelect.value;
+      }, "Billing Address is correctly shown");
+
       for (let [key, val] of Object.entries(PTU.BasicCards.JohnDoe)) {
         let field = content.document.getElementById(key);
         field.value = val;
         ok(!field.disabled, `Field #${key} shouldn't be disabled`);
       }
       content.document.querySelector("basic-card-form .save-button").click();
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -214,24 +214,28 @@ add_task(async function test_add_noSelec
       [address1.guid]: deepClone(address1),
     },
     savedBasicCards: {
       [card1.guid]: deepClone(card1),
     },
     selectedShippingAddress: null,
   });
   await asyncElementRendered();
-  checkCCForm(form, {});
+  checkCCForm(form, {
+    billingAddressGUID: address1.guid,
+  });
 
   info("now test with a missing selectedShippingAddress");
   await form.requestStore.setState({
     selectedShippingAddress: "some-missing-guid",
   });
   await asyncElementRendered();
-  checkCCForm(form, {});
+  checkCCForm(form, {
+    billingAddressGUID: address1.guid,
+  });
 
   form.remove();
   await form.requestStore.reset();
 });
 
 add_task(async function test_edit() {
   let form = new BasicCardForm();
   await form.promiseReady;