browser/components/payments/test/mochitest/test_payer_address_picker.html
author Matthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 20 Sep 2018 21:07:20 +0000
changeset 437550 1f44117fee2ea257eca27f6015b3437d2ad7cd70
parent 428074 1ce05bd83b6839af1b5b2775fe585aee00322bee
child 439812 d58b6e90927f9dd762717179c547276024a624bc
permissions -rw-r--r--
Bug 1463545 - Replace grid layout of <address-option> with a new two line design. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D5186

<!DOCTYPE HTML>
<html>
<!--
Test the paymentOptions address-picker
-->
<head>
  <meta charset="utf-8">
  <title>Test the paymentOptions address-picker</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>
  <script src="autofillEditForms.js"></script>

  <link rel="stylesheet" type="text/css" href="../../res/components/rich-select.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/components/address-option.css"/>
  <link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <p id="display" style="height: 100vh; margin: 0;">
    <iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"></iframe>
  </p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script type="module">
/** Test the payer requested details functionality **/

import PaymentDialog from "../../res/containers/payment-dialog.js";

function isVisible(elem) {
  let result = elem.getBoundingClientRect().height > 0;
  return result;
}

function setPaymentOptions(requestStore, options) {
  let {request} = requestStore.getState();
  request = Object.assign({}, request, {
    paymentOptions: options,
  });
  return requestStore.setState({ request });
}

const SAVED_ADDRESSES = {
  "48bnds6854t": {
    "address-level1": "MI",
    "address-level2": "Some City",
    "country": "US",
    "guid": "48bnds6854t",
    "name": "Mr. Foo",
    "postal-code": "90210",
    "street-address": "123 Sesame Street,\nApt 40",
    "tel": "+1 519 555-5555",
    "email": "foo@example.com",
  },
  "68gjdh354j": {
    "address-level1": "CA",
    "address-level2": "Mountain View",
    "country": "US",
    "guid": "68gjdh354j",
    "name": "Mrs. Bar",
    "postal-code": "94041",
    "street-address": "P.O. Box 123",
    "tel": "+1 650 555-5555",
    "email": "bar@example.com",
  },
};

let DUPED_ADDRESSES = {
  "a9e830667189": {
    "street-address": "Unit 1\n1505 Northeast Kentucky Industrial Parkway \n",
    "address-level2": "Greenup",
    "address-level1": "KY",
    "postal-code": "41144",
    "country": "US",
    "email": "bob@example.com",
    "guid": "a9e830667189",
    "name": "Bob Smith",
  },
  "72a15aed206d": {
    "street-address": "1 New St",
    "address-level2": "York",
    "address-level1": "SC",
    "postal-code": "29745",
    "country": "US",
    "guid": "72a15aed206d",
    "email": "mary@example.com",
    "name": "Mary Sue",
  },
  "2b4dce0fbc1f": {
    "street-address": "123 Park St",
    "address-level2": "Springfield",
    "address-level1": "OR",
    "postal-code": "97403",
    "country": "US",
    "email": "rita@foo.com",
    "guid": "2b4dce0fbc1f",
    "name": "Rita Foo",
  },
  "46b2635a5b26": {
    "street-address": "432 Another St",
    "address-level2": "Springfield",
    "address-level1": "OR",
    "postal-code": "97402",
    "country": "US",
    "guid": "46b2635a5b26",
    "name": "Rita Foo",
    "tel": "+19871234567",
  },
};

let elPicker;
let elDialog;
let initialState;

add_task(async function setup_once() {
  registerConsoleFilter(function consoleFilter(msg) {
    return msg.errorMessage.includes("selectedPayerAddress option a9e830667189 does not exist");
  });

  let templateFrame = document.getElementById("templateFrame");
  await SimpleTest.promiseFocus(templateFrame.contentWindow);

  let displayEl = document.getElementById("display");
  importDialogDependencies(templateFrame, displayEl);

  elDialog = new PaymentDialog();
  displayEl.appendChild(elDialog);
  elPicker = elDialog.querySelector("address-picker.payer-related");

  let {request} = elDialog.requestStore.getState();
  initialState = Object.assign({}, {
    changesPrevented: false,
    request: Object.assign({}, request, { completeStatus: "" }),
    orderDetailsShowing: false,
  });
});

async function setup() {
  // reset the store back to a known, default state
  elDialog.requestStore.setState(deepClone(initialState));
  await asyncElementRendered();
}

add_task(async function test_empty() {
  await setup();

  let {request, savedAddresses} = elPicker.requestStore.getState();
  ok(!savedAddresses || !savedAddresses.length,
     "Check initial state has no saved addresses");

  let {paymentOptions} = request;
  let payerRequested = paymentOptions.requestPayerName ||
                   paymentOptions.requestPayerEmail ||
                   paymentOptions.requestPayerPhone;
  ok(!payerRequested, "Check initial state has no payer details requested");
  ok(elPicker, "Check elPicker exists");
  is(elPicker.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
  is(isVisible(elPicker), false, "The address-picker is not visible");
});

// paymentOptions properties are acurately reflected in the address-fields attribute
add_task(async function test_visible_fields() {
  await setup();
  let requestStore = elPicker.requestStore;
  setPaymentOptions(requestStore, {
    requestPayerName: true,
    requestPayerEmail: true,
    requestPayerPhone: true,
  });

  requestStore.setState({
    savedAddresses: SAVED_ADDRESSES,
    selectedPayerAddress: "48bnds6854t",
  });

  await asyncElementRendered();

  let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
  is(elPicker.dropdown.popupBox.children.length, 2, "Check dropdown has 2 addresses");
  is(closedRichOption.getAttribute("guid"), "48bnds6854t", "expected option is visible");

  for (let fieldName of ["name", "email", "tel"]) {
    let elem = closedRichOption.querySelector(`.${fieldName}`);
    ok(elem, `field ${fieldName} exists`);
    ok(isVisible(elem), `field ${fieldName} is visible`);
  }
  ok(!closedRichOption.querySelector(".street-address"), "street-address element is not present");
});

add_task(async function test_selective_fields() {
  await setup();
  let requestStore = elPicker.requestStore;

  requestStore.setState({
    savedAddresses: SAVED_ADDRESSES,
    selectedPayerAddress: "48bnds6854t",
  });

  let payerFieldVariations = [
    {requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true },
    {requestPayerName: true, requestPayerEmail: false, requestPayerPhone: false },
    {requestPayerName: false, requestPayerEmail: true, requestPayerPhone: false },
    {requestPayerName: false, requestPayerEmail: false, requestPayerPhone: true },
    {requestPayerName: true, requestPayerEmail: true, requestPayerPhone: false },
    {requestPayerName: false, requestPayerEmail: true, requestPayerPhone: true },
    {requestPayerName: true, requestPayerEmail: false, requestPayerPhone: true },
  ];

  for (let payerFields of payerFieldVariations) {
    setPaymentOptions(requestStore, payerFields);
    await asyncElementRendered();

    let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
    let elName = closedRichOption.querySelector(".name");
    let elEmail = closedRichOption.querySelector(".email");
    let elPhone = closedRichOption.querySelector(".tel");

    is(!!elName && isVisible(elName), payerFields.requestPayerName,
       "name field is correctly toggled");
    is(!!elEmail && isVisible(elEmail), payerFields.requestPayerEmail,
       "email field is correctly toggled");
    is(!!elPhone && isVisible(elPhone), payerFields.requestPayerPhone,
       "tel field is correctly toggled");

    let numPayerFieldsRequested = [...Object.values(payerFields)].filter(val => val).length;
    is(elPicker.getAttribute("break-after-nth-field"), numPayerFieldsRequested == 3 ? "1" : null,
       "Check @break-after-nth-field");
    if (numPayerFieldsRequested == 3) {
      is(closedRichOption.breakAfterNthField, "1",
         "Make sure @break-after-nth-field was propagated to <address-option>");
    } else {
      is(closedRichOption.breakAfterNthField, null, "Make sure @break-after-nth-field was cleared");
    }
  }
});

add_task(async function test_filtered_options() {
  await setup();
  let requestStore = elPicker.requestStore;
  setPaymentOptions(requestStore, {
    requestPayerName: true,
    requestPayerEmail: true,
  });

  requestStore.setState({
    savedAddresses: DUPED_ADDRESSES,
    selectedPayerAddress: "a9e830667189",
  });

  await asyncElementRendered();

  let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
  is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 4 addresses");
  is(closedRichOption.getAttribute("guid"), "a9e830667189", "expected option is visible");

  for (let fieldName of ["name", "email"]) {
    let elem = closedRichOption.querySelector(`.${fieldName}`);
    ok(elem, `field ${fieldName} exists`);
    ok(isVisible(elem), `field ${fieldName} is visible`);
  }

  setPaymentOptions(requestStore, {
    requestPayerPhone: true,
  });
  await asyncElementRendered();

  is(elPicker.dropdown.popupBox.children.length, 1, "Check dropdown has 1 addresses");

  setPaymentOptions(requestStore, {});
  await asyncElementRendered();

  is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 4 addresses");
});

add_task(async function test_no_matches() {
  await setup();
  let requestStore = elPicker.requestStore;
  setPaymentOptions(requestStore, {
    requestPayerPhone: true,
  });

  requestStore.setState({
    savedAddresses: {
      "2b4dce0fbc1f": {
        "email": "rita@foo.com",
        "guid": "2b4dce0fbc1f",
        "name": "Rita Foo",
      },
      "46b2635a5b26": {
        "guid": "46b2635a5b26",
        "name": "Rita Foo",
      },
    },
    selectedPayerAddress: "a9e830667189",
  });

  await asyncElementRendered();

  let closedRichOption = elPicker.dropdown.querySelector(".rich-select-selected-option");
  is(elPicker.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
  ok(closedRichOption.localName !== "address-option", "No option is selected and visible");
});

</script>

</body>
</html>