Bug 1447777 - Move state.completionState to state.request.completeStatus. r=MattN

* Spot-fix order details test to clone request before modifying it

MozReview-Commit-ID: AXjI1veRSk9

--HG--
extra : rebase_source : ee12efc493c343b9f18cee2cb281a5fe6731731d

browser/components/payments/res/containers/payment-dialog.js

@@ -204,18 +204,22 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
 
   _renderPayButton(state) {
     this._payButton.disabled = state.changesPrevented;
-    switch (state.completionState) {
+    let completeStatus = state.request.completeStatus;
+    switch (completeStatus) {
       case "initial":
       case "processing":
       case "success":
       case "fail":
       case "unknown":
         break;
+      case "":
+        completeStatus = "initial";
+        break;
       default:
-        throw new Error("Invalid completionState");
+        throw new Error(`Invalid completeStatus: ${completeStatus}`);
     }
 
-    this._payButton.textContent = this._payButton.dataset[state.completionState + "Label"];
+    this._payButton.textContent = this._payButton.dataset[completeStatus + "Label"];
   }
 
   stateChangeCallback(state) {
@@ -301,17 +305,13 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
       page.hidden = state.page.id != page.id;
     }
 
-    let {
-      changesPrevented,
-      completionState,
-    } = state;
-    if (changesPrevented) {
+    if (state.changesPrevented) {
       this.setAttribute("changes-prevented", "");
     } else {
       this.removeAttribute("changes-prevented");
     }
-    this.setAttribute("completion-state", completionState);
-    this._disabledOverlay.hidden = !changesPrevented;
+    this.setAttribute("complete-status", request.completeStatus);
+    this._disabledOverlay.hidden = !state.changesPrevented;
   }
 }
 

browser/components/payments/res/debugging.js

@@ -407,33 +407,38 @@ let buttonActions = {
   },
 
   setStateDefault() {
-    requestStore.setState({
-      completionState: "initial",
+    let request = Object.assign({}, requestStore.getState().request, {
+      completeStatus: "initial",
     });
+    requestStore.setState({ request });
   },
 
   setStateProcessing() {
-    requestStore.setState({
-      completionState: "processing",
+    let request = Object.assign({}, requestStore.getState().request, {
+      completeStatus: "processing",
     });
+    requestStore.setState({ request });
   },
 
   setStateSuccess() {
-    requestStore.setState({
-      completionState: "success",
+    let request = Object.assign({}, requestStore.getState().request, {
+      completeStatus: "success",
     });
+    requestStore.setState({ request });
   },
 
   setStateFail() {
-    requestStore.setState({
-      completionState: "fail",
+    let request = Object.assign({}, requestStore.getState().request, {
+      completeStatus: "fail",
     });
+    requestStore.setState({ request });
   },
 
   setStateUnknown() {
-    requestStore.setState({
-      completionState: "unknown",
+    let request = Object.assign({}, requestStore.getState().request, {
+      completeStatus: "unknown",
     });
+    requestStore.setState({ request });
   },
 };
 

browser/components/payments/res/mixins/PaymentStateSubscriberMixin.js

@@ -13,7 +13,6 @@ import PaymentsStore from "../PaymentsStore.js";
  */
 export let requestStore = new PaymentsStore({
   changesPrevented: false,
-  completionState: "initial",
   orderDetailsShowing: false,
   "basic-card-page": {
     guid: null,
@@ -33,6 +32,7 @@ export let requestStore = new PaymentsStore({
     // selectedStateKey: "",
   },
   request: {
+    completeStatus: "initial",
     tabId: null,
     topLevelPrincipal: {URI: {displayHost: null}},
     requestId: null,

browser/components/payments/res/paymentRequest.css

@@ -135,10 +135,10 @@ payment-dialog #pay::before {
   width: 16px;
 }
 
-payment-dialog[changes-prevented][completion-state="fail"] #pay,
-payment-dialog[changes-prevented][completion-state="unknown"] #pay,
-payment-dialog[changes-prevented][completion-state="processing"] #pay,
-payment-dialog[changes-prevented][completion-state="success"] #pay {
+payment-dialog[changes-prevented][complete-status="fail"] #pay,
+payment-dialog[changes-prevented][complete-status="unknown"] #pay,
+payment-dialog[changes-prevented][complete-status="processing"] #pay,
+payment-dialog[changes-prevented][complete-status="success"] #pay {
   /* Show the pay button above #disabled-overlay */
   position: relative;
   z-index: 1;

browser/components/payments/test/mochitest/test_order_details.html

@@ -127,26 +127,23 @@ add_task(async function test_list_population() {
 
 add_task(async function test_additionalDisplayItems() {
   setup();
-  let state = requestStore.getState();
-  let request = state.request;
-  let paymentDetails = request.paymentDetails;
-
-  paymentDetails.modifiers = [{
-    additionalDisplayItems: [
-      {
-        label: "Card fee",
-        amount: { currency: "USD", value: "1.50" },
+  let request = Object.assign({}, requestStore.getState().request);
+  request.paymentDetails = Object.assign({}, request.paymentDetails, {
+    modifiers: [{
+      additionalDisplayItems: [
+        {
+          label: "Card fee",
+          amount: { currency: "USD", value: "1.50" },
+        },
+      ],
+      supportedMethods: "basic-card",
+      total: {
+        label: "Total due",
+        amount: { currency: "USD", value: "3.50" },
       },
-    ],
-    supportedMethods: "basic-card",
-    total: {
-      label: "Total due",
-      amount: { currency: "USD", value: "3.50" },
-    },
-  }];
-
-  Object.assign(request, { paymentDetails });
-  requestStore.setState(state);
+    }],
+  });
+  requestStore.setState({ request });
   await asyncElementRendered();
 
   is(orderDetails.mainItemsList.childElementCount, 0,
@@ -158,11 +155,10 @@ add_task(async function test_additionalDisplayItems() {
 
 add_task(async function test_total() {
   setup();
-  let request = requestStore.getState().request;
-  let paymentDetails = request.paymentDetails;
-  paymentDetails.totalItem = { label: "foo", amount: { currency: "JPY", value: "5" }};
-
-  Object.assign(request, { paymentDetails });
+  let request = Object.assign({}, requestStore.getState().request);
+  request.paymentDetails = Object.assign({}, request.paymentDetails, {
+    totalItem: { label: "foo", amount: { currency: "JPY", value: "5" }},
+  });
   requestStore.setState({ request });
   await asyncElementRendered();
 
@@ -172,19 +168,18 @@ add_task(async function test_total() {
 
 add_task(async function test_modified_total() {
   setup();
-  let state = requestStore.getState();
-  let request = state.request;
-  let paymentDetails = request.paymentDetails;
-  paymentDetails.totalItem = { label: "foo", amount: { currency: "JPY", value: "5" }};
-  paymentDetails.modifiers = [{
-    supportedMethods: "basic-card",
-    total: {
-      label: "Total due",
-      amount: { currency: "USD", value: "3.5" },
-    },
-  }];
-  Object.assign(request, { paymentDetails });
-  requestStore.setState(state);
+  let request = Object.assign({}, requestStore.getState().request);
+  request.paymentDetails = Object.assign({}, request.paymentDetails, {
+    totalItem: { label: "foo", amount: { currency: "JPY", value: "5" }},
+    modifiers: [{
+      supportedMethods: "basic-card",
+      total: {
+        label: "Total due",
+        amount: { currency: "USD", value: "3.5" },
+      },
+    }],
+  });
+  requestStore.setState({request});
   await asyncElementRendered();
 
   is(orderDetails.totalAmountElem.value, "3.5", "total amount uses modifier total");

browser/components/payments/test/mochitest/test_payer_address_picker.html

@@ -132,9 +132,10 @@ add_task(async function setup_once() {
   displayEl.appendChild(elDialog);
   elPicker = elDialog.querySelector("address-picker.payer-related");
 
-  initialState = Object.assign({}, elDialog.requestStore.getState(), {
+  let {request} = elDialog.requestStore.getState();
+  initialState = Object.assign({}, {
     changesPrevented: false,
-    completionState: "initial",
+    request: Object.assign({}, request, { completeStatus: "initial" }),
     orderDetailsShowing: false,
   });
 });

browser/components/payments/test/mochitest/test_payment_dialog.html

@@ -36,7 +36,7 @@ import PaymentDialog from "../../res/containers/payment-dialog.js";
 
 let el1;
 
-let completionStates = [
+let completeStatuses = [
     ["processing", "Processing"],
     ["success", "Done"],
     ["fail", "Fail"],
@@ -70,9 +70,10 @@ add_task(async function setup_once() {
 });
 
 async function setup() {
+  let {request} = el1.requestStore.getState();
   await el1.requestStore.setState({
     changesPrevented: false,
-    completionState: "initial",
+    request: Object.assign({}, request, {completeStatus: "initial"}),
     orderDetailsShowing: false,
   });
 
@@ -144,34 +145,35 @@ add_task(async function test_changesPrevented() {
   ok(!disabledOverlay.hidden, "Overlay should prevent changes");
 });
 
-add_task(async function test_completionState() {
+add_task(async function test_completeStatus() {
   await setup();
-  let state = el1.requestStore.getState();
-  is(state.completionState, "initial", "completionState is initially initial");
+  let {request} = el1.requestStore.getState();
+  is(request.completeStatus, "initial", "completeStatus is initially initial");
   let payButton = document.getElementById("pay");
   is(payButton.textContent, "Pay", "Check default label");
   ok(!payButton.disabled, "Button is enabled");
-  for (let [completionState, label] of completionStates) {
-    await el1.requestStore.setState({completionState});
+  for (let [completeStatus, label] of completeStatuses) {
+    request.completeStatus = completeStatus;
+    await el1.requestStore.setState({request});
     await asyncElementRendered();
     is(payButton.textContent, label, "Check payButton label");
     ok(!payButton.disabled, "Button is still enabled");
   }
 });
 
-add_task(async function test_completionStateChangesPrevented() {
+add_task(async function test_completeStatusChangesPrevented() {
   await setup();
   let state = el1.requestStore.getState();
-  is(state.completionState, "initial", "completionState is initially initial");
+  is(state.request.completeStatus, "initial", "completeStatus is initially initial");
   is(state.changesPrevented, false, "changesPrevented is initially false");
   let payButton = document.getElementById("pay");
   is(payButton.textContent, "Pay", "Check default label");
   ok(!payButton.disabled, "Button is enabled");
 
-  for (let [completionState, label] of completionStates) {
+  for (let [status, label] of completeStatuses) {
     await el1.requestStore.setState({
       changesPrevented: true,
-      completionState,
+      request: Object.assign(state.request, { completeStatus: status }),
     });
     await asyncElementRendered();
     is(payButton.textContent, label, "Check payButton label");