browser/components/payments/test/mochitest/test_payment_method_picker.html
author Matthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 27 Sep 2018 05:57:40 +0000
changeset 438513 42fac3928107b21fb99e63649386484acb34df5f
parent 437278 1a8ec63c6456d97cae278b46b12323651ad3010b
child 438865 ea8385466c064003f60995f428a5a15d660a2bb2
permissions -rw-r--r--
Bug 1490805 - Include temporary basic cards in validity check for supportedNetworks. r=sfoster Depends on D6848 Differential Revision: https://phabricator.services.mozilla.com/D6882

<!DOCTYPE HTML>
<html>
<!--
Test the payment-method-picker component
-->
<head>
  <meta charset="utf-8">
  <title>Test the payment-method-picker component</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/AddTask.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.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="../../res/containers/rich-picker.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/components/rich-select.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/components/basic-card-option.css"/>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <p id="display">
    <payment-method-picker id="picker1"
                           selected-state-key="selectedPaymentCard"></payment-method-picker>
  </p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script type="module">
/** Test the payment-method-picker component **/

import "../../res/components/basic-card-option.js";
import "../../res/containers/payment-method-picker.js";

let picker1 = document.getElementById("picker1");

add_task(async function test_empty() {
  ok(picker1, "Check picker1 exists");
  let {savedBasicCards} = picker1.requestStore.getState();
  is(Object.keys(savedBasicCards).length, 0, "Check empty initial state");
  is(picker1.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
});

add_task(async function test_initialSet() {
  picker1.requestStore.setState({
    savedBasicCards: {
      "48bnds6854t": {
        "cc-exp": "2017-02",
        "cc-exp-month": 2,
        "cc-exp-year": 2017,
        "cc-name": "John Doe",
        "cc-number": "************9999",
        "cc-type": "mastercard",
        "guid": "48bnds6854t",
      },
      "68gjdh354j": {
        "cc-exp": "2017-08",
        "cc-exp-month": 8,
        "cc-exp-year": 2017,
        "cc-name": "J Smith",
        "cc-number": "***********1234",
        "cc-type": "visa",
        "guid": "68gjdh354j",
      },
      "123456789abc": {
        "cc-name": "Jane Fields",
        "cc-given-name": "Jane",
        "cc-additional-name": "",
        "cc-family-name": "Fields",
        "cc-number": "************9876",
        "guid": "123456789abc",
      },
    },
  });
  await asyncElementRendered();
  let options = picker1.dropdown.popupBox.children;
  is(options.length, 3, "Check dropdown has all three cards");
  ok(options[0].textContent.includes("John Doe"), "Check first card");
  ok(options[1].textContent.includes("J Smith"), "Check second card");
  ok(options[2].textContent.includes("Jane Fields"), "Check third card");
});

add_task(async function test_update() {
  picker1.requestStore.setState({
    savedBasicCards: {
      "48bnds6854t": {
        // Same GUID, different values to trigger an update
        "cc-exp": "2017-09",
        "cc-exp-month": 9,
        "cc-exp-year": 2017,
        // cc-name was cleared which means it's not returned
        "cc-number": "************9876",
        "cc-type": "amex",
        "guid": "48bnds6854t",
      },
      "68gjdh354j": {
        "cc-exp": "2017-08",
        "cc-exp-month": 8,
        "cc-exp-year": 2017,
        "cc-name": "J Smith",
        "cc-number": "***********1234",
        "cc-type": "visa",
        "guid": "68gjdh354j",
      },
      "123456789abc": {
        "cc-name": "Jane Fields",
        "cc-given-name": "Jane",
        "cc-additional-name": "",
        "cc-family-name": "Fields",
        "cc-number": "************9876",
        "guid": "123456789abc",
      },
    },
  });
  await asyncElementRendered();
  let options = picker1.dropdown.popupBox.children;
  is(options.length, 3, "Check dropdown still has three cards");
  ok(!options[0].textContent.includes("John Doe"), "Check cleared first cc-name");
  ok(options[0].textContent.includes("9876"), "Check updated first cc-number");
  ok(options[0].textContent.includes("09"), "Check updated first exp-month");

  ok(options[1].textContent.includes("J Smith"), "Check second card is the same");
  ok(options[2].textContent.includes("Jane Fields"), "Check third card is the same");
});

add_task(async function test_change_selected_card() {
  let options = picker1.dropdown.popupBox.children;
  is(picker1.dropdown.selectedOption, null, "Should default to no selected option");
  let {
    selectedPaymentCard,
    selectedPaymentCardSecurityCode,
  } = picker1.requestStore.getState();
  is(selectedPaymentCard, null, "store should have no option selected");
  is(selectedPaymentCardSecurityCode, null, "store should have no security code");
  ok(!picker1.classList.contains("invalid-selected-option"), "No validation on an empty selection");
  ok(isHidden(picker1.invalidLabel), "The invalid label should be hidden");

  await SimpleTest.promiseFocus();
  picker1.dropdown.popupBox.focus();
  synthesizeKey("************9876", {});
  await asyncElementRendered();
  ok(true, "Focused the security code field");
  ok(!picker1.open, "Picker should be closed");

  let selectedOption = picker1.dropdown.selectedOption;
  is(selectedOption, options[2], "Selected option should now be the third option");
  selectedPaymentCard = picker1.requestStore.getState().selectedPaymentCard;
  is(selectedPaymentCard, selectedOption.getAttribute("guid"),
     "store should have third option selected");
  selectedPaymentCardSecurityCode = picker1.requestStore.getState().selectedPaymentCardSecurityCode;
  is(selectedPaymentCardSecurityCode, null, "store should have empty security code");
  ok(picker1.classList.contains("invalid-selected-option"), "Missing fields for the third option");
  ok(!isHidden(picker1.invalidLabel), "The invalid label should be visible");

  await SimpleTest.promiseFocus();
  picker1.dropdown.popupBox.focus();
  synthesizeKey("visa", {});
  await asyncElementRendered();
  ok(true, "Focused the security code field");
  ok(!picker1.open, "Picker should be closed");

  selectedOption = picker1.dropdown.selectedOption;
  is(selectedOption, options[1], "Selected option should now be the second option");
  selectedPaymentCard = picker1.requestStore.getState().selectedPaymentCard;
  is(selectedPaymentCard, selectedOption.getAttribute("guid"),
     "store should have second option selected");
  selectedPaymentCardSecurityCode = picker1.requestStore.getState().selectedPaymentCardSecurityCode;
  is(selectedPaymentCardSecurityCode, null, "store should have empty security code");
  ok(!picker1.classList.contains("invalid-selected-option"), "The second option has all fields");
  ok(isHidden(picker1.invalidLabel), "The invalid label should be hidden");

  let stateChangePromise = promiseStateChange(picker1.requestStore);

  // Type in the security code field
  picker1.securityCodeInput.focus();
  sendString("836");
  sendKey("Tab");
  let state = await stateChangePromise;
  ok(state.selectedPaymentCardSecurityCode, "836", "Check security code in state");
});

add_task(async function test_delete() {
  picker1.requestStore.setState({
    savedBasicCards: {
      // 48bnds6854t was deleted
      "68gjdh354j": {
        "cc-exp": "2017-08",
        "cc-exp-month": 8,
        "cc-exp-year": 2017,
        "cc-name": "J Smith",
        "cc-number": "***********1234",
        "cc-type": "visa",
        "guid": "68gjdh354j",
      },
      "123456789abc": {
        "cc-name": "Jane Fields",
        "cc-given-name": "Jane",
        "cc-additional-name": "",
        "cc-family-name": "Fields",
        "cc-number": "************9876",
        "guid": "123456789abc",
      },
    },
  });
  await asyncElementRendered();
  let options = picker1.dropdown.popupBox.children;
  is(options.length, 2, "Check dropdown has two remaining cards");
  ok(options[0].textContent.includes("J Smith"), "Check remaining card #1");
  ok(options[1].textContent.includes("Jane Fields"), "Check remaining card #2");
});

add_task(async function test_supportedNetworks_tempCards() {
  await picker1.requestStore.reset();

  let request = Object.assign({}, picker1.requestStore.getState().request);
  request.paymentMethods = [
    {
      supportedMethods: "basic-card",
      data: {
        supportedNetworks: [
          "mastercard",
          "visa",
        ],
      },
    },
  ];

  await picker1.requestStore.setState({
    request,
    selectedPaymentCard: "68gjdh354j",
    tempBasicCards: {
      "68gjdh354j": {
        "cc-exp": "2017-08",
        "cc-exp-month": 8,
        "cc-exp-year": 2017,
        "cc-name": "J Smith",
        "cc-number": "***********1234",
        "cc-type": "discover",
        "guid": "68gjdh354j",
      },
    },
  });
  await asyncElementRendered();
  let options = picker1.dropdown.popupBox.children;
  is(options.length, 1, "Check dropdown has one card");
  ok(options[0].textContent.includes("J Smith"), "Check remaining card #1");

  ok(picker1.classList.contains("invalid-selected-option"),
     "Check discover is recognized as not supported");

  info("change the card to be a visa");
  await picker1.requestStore.setState({
    tempBasicCards: {
      "68gjdh354j": {
        "cc-exp": "2017-08",
        "cc-exp-month": 8,
        "cc-exp-year": 2017,
        "cc-name": "J Smith",
        "cc-number": "***********1234",
        "cc-type": "visa",
        "guid": "68gjdh354j",
      },
    },
  });
  await asyncElementRendered();

  ok(!picker1.classList.contains("invalid-selected-option"),
     "Check visa is recognized as supported");
});
</script>

</body>
</html>