toolkit/components/payments/test/mochitest/test_payer_address_picker.html
author Cosmin Sabou <csabou@mozilla.com>
Fri, 27 Apr 2018 08:37:29 +0300
changeset 472049 9424d87854e4f1783435e5a3c2e58189197d2936
parent 472015 browser/components/payments/test/mochitest/test_payer_address_picker.html@a8fef63084795665c01e9753fb8647b71e9c0331
permissions -rw-r--r--
Backed out 2 changesets (bug 1457287) for browser chrome failures on browser_address_edit.js. CLOSED TREE Backed out changeset 0ae9810db352 (bug 1457287) Backed out changeset a8fef6308479 (bug 1457287)

<!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>

  <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">
    <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-globals-from payments_common.js */

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

function getVisiblePickerOptions(picker) {
  let select = picker.querySelector(":scope > rich-select");
  let options = select.querySelectorAll("address-option");
  let visibleOptions = Array.from(options).filter(isVisible);
  return visibleOptions;
}

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() {
  let templateFrame = document.getElementById("templateFrame");
  await SimpleTest.promiseFocus(templateFrame.contentWindow);

  let displayEl = document.getElementById("display");
  // Import the templates from the real shipping dialog to avoid duplication.
  for (let template of templateFrame.contentDocument.querySelectorAll("template")) {
    let imported = document.importNode(template, true);
    displayEl.appendChild(imported);
  }

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

  initialState = Object.assign({}, elDialog.requestStore.getState(), {
    changesPrevented: false,
    completionState: "initial",
    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 visibleOptions = getVisiblePickerOptions(elPicker);
  let visibleOption = visibleOptions[0];

  is(elPicker.dropdown.popupBox.children.length, 2, "Check dropdown has 2 addresses");
  is(visibleOptions.length, 1, "One option should be visible");
  is(visibleOption.getAttribute("guid"), "48bnds6854t", "expected option is visible");

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

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: 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 visibleOption = getVisiblePickerOptions(elPicker)[0];
    let elName = visibleOption.querySelector(".name");
    let elEmail = visibleOption.querySelector(".email");
    let elPhone = visibleOption.querySelector(".tel");

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

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 visibleOptions = getVisiblePickerOptions(elPicker);
  let visibleOption = visibleOptions[0];

  is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 3 addresses");
  is(visibleOptions.length, 1, "One option should be visible");
  is(visibleOption.getAttribute("guid"), "a9e830667189", "expected option is visible");

  for (let fieldName of ["name", "email"]) {
    let elem = visibleOption.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");
  is(visibleOptions.length, 1, "One option should be visible");

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

  is(elPicker.dropdown.popupBox.children.length, 4, "Check dropdown has 4 addresses");
  is(visibleOptions.length, 1, "One option should be visible");
});

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 visibleOptions = getVisiblePickerOptions(elPicker);
  is(elPicker.dropdown.popupBox.children.length, 0, "Check dropdown is empty");
  is(visibleOptions.length, 0, "No options should be visible");
});

</script>

</body>
</html>