1 files changed, 111 insertions, 0 deletions
diff --git a/browser/components/payments/test/mochitest/test_accepted_cards.html b/browser/components/payments/test/mochitest/test_accepted_cards.html
new file mode 100644
index 0000000000..8e1da1bf3c
--- /dev/null
+++ b/browser/components/payments/test/mochitest/test_accepted_cards.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the accepted-cards element
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test the accepted-cards element</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="sinon-7.2.7.js"></script>
+  <script src="payments_common.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>