Bug 1462461 - Show the back button in the basic card page during on-boarding.r=MattN
authorprathiksha <prathikshaprasadsuman@gmail.com>
Fri, 25 May 2018 13:13:02 -0700
changeset 479865 d5ec52381e06546b575ae94901d607401f40c3de
parent 479864 5e99f060685d12e406f8b18108e84fb012275e2e
child 479866 1c119911fc842731dbbf4c207ec84e3b3a09f59e
push id1757
push userffxbld-merge
push dateFri, 24 Aug 2018 17:02:43 +0000
treeherdermozilla-release@736023aebdb1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1462461
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 1462461 - Show the back button in the basic card page during on-boarding.r=MattN MozReview-Commit-ID: 1a8YtdbtV2M
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -113,18 +113,19 @@ export default class BasicCardForm exten
 
     this.cancelButton.textContent = this.dataset.cancelButtonLabel;
     this.backButton.textContent = this.dataset.backButtonLabel;
     this.saveButton.textContent = this.dataset.saveButtonLabel;
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
     this.addressAddLink.textContent = this.dataset.addressAddLinkLabel;
     this.addressEditLink.textContent = this.dataset.addressEditLinkLabel;
 
-    // The back button is temporarily hidden(See Bug 1462461).
-    this.backButton.hidden = !!page.onboardingWizard;
+    // The next line needs an onboarding check since we don't set previousId
+    // when navigating to add/edit directly from the summary page.
+    this.backButton.hidden = !page.previousId && page.onboardingWizard;
     this.cancelButton.hidden = !page.onboardingWizard;
 
     let record = {};
     let basicCards = paymentRequest.getBasicCards(state);
     let addresses = paymentRequest.getAddresses(state);
 
     this.genericErrorText.textContent = page.error;
 
@@ -205,21 +206,49 @@ export default class BasicCardForm exten
         if (evt.target == this.addressEditLink && selectedOption && selectedOption.value) {
           nextState["address-page"].title = this.dataset.billingAddressTitleEdit;
           nextState["address-page"].guid = selectedOption.value;
         }
         this.requestStore.setState(nextState);
         break;
       }
       case this.backButton: {
-        this.requestStore.setState({
+        let {
+          page,
+          request,
+          "address-page": addressPage,
+          "basic-card-page": basicCardPage,
+          selectedShippingAddress,
+        } = this.requestStore.getState();
+
+        let nextState = {
           page: {
-            id: "payment-summary",
+            id: page.previousId || "payment-summary",
+            onboardingWizard: page.onboardingWizard,
           },
-        });
+        };
+
+        let addressPageState;
+        if (page.onboardingWizard) {
+          if (request.paymentOptions.requestShipping) {
+            addressPageState = Object.assign({}, addressPage, {guid: selectedShippingAddress});
+          } else {
+            addressPageState =
+              Object.assign({}, addressPage, {guid: basicCardPage.billingAddressGUID});
+          }
+
+          let basicCardPageState = Object.assign({}, basicCardPage, {preserveFieldValues: true});
+
+          Object.assign(nextState, {
+            "address-page": addressPageState,
+            "basic-card-page": basicCardPageState,
+          });
+        }
+
+        this.requestStore.setState(nextState);
         break;
       }
       case this.saveButton: {
         this.saveRecord();
         break;
       }
       default: {
         throw new Error("Unexpected click target");
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -401,8 +401,103 @@ add_task(async function test_on_boarding
 
     info("Closing the payment dialog");
     spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
     await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
 
     cleanupFormAutofillStorage();
   });
 });
+
+add_task(async function test_back_button_on_basic_card_page_during_onboarding() {
+  await BrowserTestUtils.withNewTab({
+    gBrowser,
+    url: BLANK_PAGE_URL,
+  }, async browser => {
+    cleanupFormAutofillStorage();
+
+    info("Opening the payment dialog");
+    let {win, frame} =
+        await setupPaymentDialog(browser, {
+          methodData: [PTU.MethodData.basicCard],
+          details: PTU.Details.total60USD,
+          merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
+        });
+
+    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";
+      }, "Address page is shown first if there are saved addresses during on boarding");
+
+      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");
+
+      for (let [key, val] of Object.entries(PTU.Addresses.TimBL2)) {
+        let field = content.document.getElementById(key);
+        if (!field) {
+          ok(false, `${key} field not found`);
+        }
+        field.value = val;
+        ok(!field.disabled, `Field #${key} shouldn't be disabled`);
+      }
+      content.document.querySelector("address-form .save-button").click();
+
+      await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return state.page.id == "basic-card-page";
+      }, "Basic card page is shown next");
+
+      info("Checking if basic card page is rendered");
+      let basicCardBackButton = content.document.querySelector("basic-card-form .back-button");
+      ok(content.isVisible(basicCardBackButton), "Back button is visible on the basic card page");
+
+      info("Partially fill basic card form");
+      let field = content.document.getElementById("cc-number");
+      field.value = PTU.BasicCards.JohnDoe["cc-number"];
+
+      info("Clicking on the back button to edit address saved in the previous step");
+      basicCardBackButton.click();
+
+      await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return state.page.id == "address-page" &&
+               state["address-page"].guid == state["basic-card-page"].billingAddressGUID;
+      }, "Address page is shown again");
+
+      info("Checking if the address page has been rendered");
+      addressSaveButton = content.document.querySelector("address-form .save-button");
+      ok(content.isVisible(addressSaveButton), "Address save button is rendered");
+
+      info("Checking if the address saved in the last step is correctly loaded in the form");
+      field = content.document.getElementById("given-name");
+      ok(field.value, PTU.Addresses.TimBL2["given-name"],
+         "Given name field value is correctly loaded");
+
+      info("Editing the address and saving again");
+      field.value = "John";
+      addressSaveButton.click();
+
+      info("Checking if the address was correctly edited");
+      await PTU.DialogContentUtils.waitForState(content, (state) => {
+        return state.page.id == "basic-card-page" &&
+               // eslint-disable-next-line max-len
+               state.savedAddresses[state["basic-card-page"].billingAddressGUID]["given-name"] == "John";
+      }, "Address was correctly edited and saved");
+
+      // eslint-disable-next-line max-len
+      info("Checking if the basic card form is now rendered and if the field values from before are preserved");
+      let basicCardCancelButton = content.document.querySelector("basic-card-form .cancel-button");
+      ok(content.isVisible(basicCardCancelButton),
+         "Cancel button is visible on the basic card page");
+      field = content.document.getElementById("cc-number");
+      ok(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
+    });
+
+    info("Closing the payment dialog");
+    spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
+    await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
+
+    cleanupFormAutofillStorage();
+  });
+});