toolkit/components/payments/test/mochitest/test_order_details.html
author Sam Foster <sfoster@mozilla.com>
Wed, 18 Apr 2018 00:43:15 -0700
changeset 415015 f3ad6a992444517319141bee521e512ce4faa006
parent 414701 c10c705a1feae70c507bb644dcf2867cbe63db6f
child 416037 d8c8620f0be8c16a45d8a3b6c3f47a01b2869087
permissions -rw-r--r--
Bug 1427939 - Use total and any additionalDisplayItems when a modifier matches the payment method. r=jaws * getModifierForPaymentMethod helper * Use selectedPaymentMethod from state store. * Update and add tests for the modifier case for the main total in PaymentDialog * Update and add tests for handling modifiers and additionalDisplayItems in the OrderDetails component MozReview-Commit-ID: FmlovZjP0t1

<!DOCTYPE HTML>
<html>
<!--
  Test the order-details component
-->
<head>
  <meta charset="utf-8">
  <title>Test the order-details component</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/AddTask.js"></script>
  <script src="payments_common.js"></script>
  <script src="../../res/vendor/custom-elements.min.js"></script>
  <script src="../../res/unprivileged-fallbacks.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/containers/order-details.css"/>

  <template id="order-details-template">
    <ul class="main-list"></ul>
    <ul class="footer-items-list"></ul>

    <div class="details-total">
      <h2 class="label">Total</h2>
      <currency-amount></currency-amount>
   </div>
  </template>
</head>
<body>
  <p id="display">
    <order-details></order-details>
  </p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script type="module">
/** Test the order-details component **/

/* import-globals-from payments_common.js */

import OrderDetails from "../../res/containers/order-details.js";
import {requestStore} from "../../res/mixins/PaymentStateSubscriberMixin.js";

let orderDetails = document.querySelector("order-details");
let emptyState = requestStore.getState();

function setup() {
  let initialState = deepClone(emptyState);
  let cardGUID = "john-doe";
  let johnDoeCard = deepClone(PTU.BasicCards.JohnDoe);
  johnDoeCard.methodName = "basic-card";
  let savedBasicCards = {
    [cardGUID]: johnDoeCard,
  };
  initialState.selectedPaymentCard = cardGUID;
  requestStore.setState(Object.assign(initialState, {savedBasicCards}));
}

add_task(async function isFooterItem() {
  ok(OrderDetails.isFooterItem({
    label: "Levy",
    type: "tax",
    amount: { currency: "USD", value: "1" },
  }, "items with type of 'tax' are footer items"));
  ok(!OrderDetails.isFooterItem({
    label: "Levis",
    amount: { currency: "USD", value: "1" },
  }, "items without type of 'tax' aren't footer items"));
});

add_task(async function test_initial_state() {
  setup();
  is(orderDetails.mainItemsList.childElementCount, 0, "main items list is initially empty");
  is(orderDetails.footerItemsList.childElementCount, 0, "footer items list is initially empty");
  is(orderDetails.totalAmountElem.value, "0", "total amount is 0");
});

add_task(async function test_list_population() {
  setup();
  let state = requestStore.getState();
  let request = state.request;
  let paymentDetails = deepClone(request.paymentDetails);
  paymentDetails.displayItems = [
    {
      label: "One",
      amount: { currency: "USD", value: "5" },
    },
    {
      label: "Two",
      amount: { currency: "USD", value: "6" },
    },
    {
      label: "Three",
      amount: { currency: "USD", value: "7" },
    },
  ];

  requestStore.setState({
    request: Object.assign(deepClone(request), { paymentDetails }),
  });

  await asyncElementRendered();
  is(orderDetails.mainItemsList.childElementCount, 3, "main items list has correct # children");
  is(orderDetails.footerItemsList.childElementCount, 0, "footer items list has 0 children");

  paymentDetails.displayItems = [
    {
      label: "Levy",
      type: "tax",
      amount: { currency: "USD", value: "1" },
    },
    {
      label: "Item",
      amount: { currency: "USD", value: "6" },
    },
    {
      label: "Thing",
      amount: { currency: "USD", value: "7" },
    },
  ];
  Object.assign(request, { paymentDetails });
  requestStore.setState({ request });
  await asyncElementRendered();

  is(orderDetails.mainItemsList.childElementCount, 2, "main list has correct # children");
  is(orderDetails.footerItemsList.childElementCount, 1, "footer list has correct # children");
});

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" },
      },
    ],
    supportedMethods: "basic-card",
    total: {
      label: "Total due",
      amount: { currency: "USD", value: "3.50" },
    },
  }];

  Object.assign(request, { paymentDetails });
  requestStore.setState(state);
  await asyncElementRendered();

  is(orderDetails.mainItemsList.childElementCount, 0,
     "main list added 0 children from additionalDisplayItems");
  is(orderDetails.footerItemsList.childElementCount, 1,
     "footer list added children from 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 });
  requestStore.setState({ request });
  await asyncElementRendered();

  is(orderDetails.totalAmountElem.value, "5", "total amount gets updated");
  is(orderDetails.totalAmountElem.currency, "JPY", "total currency gets updated");
});

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);
  await asyncElementRendered();

  is(orderDetails.totalAmountElem.value, "3.5", "total amount uses modifier total");
  is(orderDetails.totalAmountElem.currency, "USD", "total currency uses modifier currency");
});

</script>

</body>
</html>