browser/components/payments/test/mochitest/test_accepted_cards.html
author Sam Foster <sfoster@mozilla.com>
Fri, 28 Sep 2018 16:53:37 +0000
changeset 438721 6ce23e4daf8dcc0ec878f1620de85651755fc76b
parent 437291 90201e199fea722a9255b82d0add65c6cf298caf
child 439829 d58b6e90927f9dd762717179c547276024a624bc
permissions -rw-r--r--
Bug 1477102 - Toggle accepted cards list on add/edit cards. Add stub for using AppConstants.MOZILLA_OFFICIAL to fallback for non-branded builds. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D7025

<!DOCTYPE HTML>
<html>
<!--
Test the accepted-cards element
-->
<head>
  <meta charset="utf-8">
  <title>Test the accepted-cards element</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/AddTask.js"></script>
  <script src="sinon-2.3.2.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/paymentRequest.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/components/accepted-cards.css"/>
</head>
<body>
  <p id="display">
    <accepted-cards label="Accepted:"></accepted-cards>
  </p>
<div id="content" style="display: none">

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

/* global sinon, PaymentDialogUtils */

import "../../res/components/accepted-cards.js";
import {requestStore} from "../../res/mixins/PaymentStateSubscriberMixin.js";
let emptyState = requestStore.getState();
let acceptedElem = document.querySelector("accepted-cards");
let allNetworks = PaymentDialogUtils.getCreditCardNetworks();

add_task(async function test_reConnected() {
  let itemsCount = acceptedElem.querySelectorAll(".accepted-cards-item").length;
  is(itemsCount, allNetworks.length, "Same number of items as there are supported networks");

  let container = acceptedElem.parentNode;
  let removed = container.removeChild(acceptedElem);
  container.appendChild(removed);
  let newItemsCount = acceptedElem.querySelectorAll(".accepted-cards-item").length;
  is(itemsCount, newItemsCount, "Number of items doesnt changed when re-connected");
});

add_task(async function test_someAccepted() {
  let supportedNetworks = ["discover", "amex"];
  let paymentMethods = [{
    supportedMethods: "basic-card",
    data: {
      supportedNetworks,
    },
  }];
  requestStore.setState({
    request: Object.assign({}, emptyState.request, {
      paymentMethods,
    }),
  });
  await asyncElementRendered();

  let showingItems = acceptedElem.querySelectorAll(".accepted-cards-item:not([hidden])");
  is(showingItems.length, 2,
     "Expected 2 items to be showing when 2 supportedNetworks are indicated");
  for (let network of allNetworks) {
    if (supportedNetworks.includes(network)) {
      ok(acceptedElem.querySelector(`[data-network-id='${network}']:not([hidden])`),
         `Item for the ${network} network expected to be visible`);
    } else {
      ok(acceptedElem.querySelector(`[data-network-id='${network}'][hidden]`),
         `Item for the ${network} network expected to be hidden`);
    }
  }
});

add_task(async function test_officialBranding() {
  // verify we get the expected result when isOfficialBranding returns true
  sinon.stub(PaymentDialogUtils, "isOfficialBranding").callsFake(() => { return true; });

  let container = acceptedElem.parentNode;
  let removed = container.removeChild(acceptedElem);
  container.appendChild(removed);

  ok(PaymentDialogUtils.isOfficialBranding.calledOnce,
     "isOfficialBranding was called");
  ok(acceptedElem.classList.contains("branded"),
     "The branded class is added when isOfficialBranding returns true");
  PaymentDialogUtils.isOfficialBranding.restore();

  // verify we get the expected result when isOfficialBranding returns false
  sinon.stub(PaymentDialogUtils, "isOfficialBranding").callsFake(() => { return false; });

  // the branded class is toggled in the 'connectedCallback',
  // so remove and re-add the element to re-evaluate branded-ness
  removed = container.removeChild(acceptedElem);
  container.appendChild(removed);

  ok(PaymentDialogUtils.isOfficialBranding.calledOnce,
     "isOfficialBranding was called");
  ok(!acceptedElem.classList.contains("branded"),
     "The branded class is removed when isOfficialBranding returns false");
  PaymentDialogUtils.isOfficialBranding.restore();
});

</script>

</body>
</html>