1 files changed, 150 insertions, 0 deletions
diff --git a/browser/components/payments/test/mochitest/test_rich_select.html b/browser/components/payments/test/mochitest/test_rich_select.html
new file mode 100644
index 0000000000..e071ed15e2
--- /dev/null
+++ b/browser/components/payments/test/mochitest/test_rich_select.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+Test the rich-select component
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Test the rich-select component</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="payments_common.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/components/basic-card-option.css"/>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+  <p id="display">
+  </p>
+<div id="content" style="display: none">
+
+</div>
+<pre id="test">
+</pre>
+<script type="module">
+/** Test the rich-select address-option component **/
+
+import AddressOption from "../../res/components/address-option.js";
+import RichSelect from "../../res/components/rich-select.js";
+
+let addresses = {
+  "58gjdh354k": {
+    "email": "emzembrano92@email.com",
+    "name": "Emily Zembrano",
+    "street-address": "717 Hyde Street #6",
+    "address-level2": "San Francisco",
+    "address-level1": "CA",
+    "tel": "415 203 0845",
+    "postal-code": "94109",
+    "country": "USA",
+    "guid": "58gjdh354k",
+  },
+  "67gjdh354k": {
+    "email": "jenz9382@email.com",
+    "name": "Jennifer Zembrano",
+    "street-address": "42 Fairydust Lane",
+    "address-level2": "Lala Land",
+    "address-level1": "HI",
+    "tel": "415 439 2827",
+    "postal-code": "98765",
+    "country": "USA",
+    "guid": "67gjdh354k",
+  },
+};
+
+let select1 = new RichSelect();
+for (let address of Object.values(addresses)) {
+  let option = document.createElement("option");
+  option.textContent = address.name + " " + address["street-address"];
+  option.setAttribute("value", address.guid);
+  option.dataset.fieldSeparator = ", ";
+  for (let field of Object.keys(address)) {
+    option.setAttribute(field, address[field]);
+  }
+  select1.popupBox.appendChild(option);
+}
+select1.setAttribute("option-type", "address-option");
+select1.value = "";
+document.getElementById("display").appendChild(select1);
+
+let options = select1.popupBox.children;
+let option1 = options[0];
+let option2 = options[1];
+
+function get_selected_clone() {
+  return select1.querySelector(".rich-select-selected-option");
+}
+
+function is_visible(element, message) {
+  ok(!isHidden(element), message);
+}
+
+add_task(async function test_clickable_area() {
+  ok(select1, "select1 exists");
+  isnot(document.activeElement, select1.popupBox, "<select> shouldn't have focus");
+  synthesizeMouseAtCenter(select1, {});
+  is(document.activeElement, select1.popupBox, "<select> should have focus when clicked");
+  document.activeElement.blur();
+});
+
+add_task(async function test_closed_state_on_selection() {
+  ok(select1, "select1 exists");
+  select1.popupBox.focus();
+  synthesizeKey(option1.textContent, {});
+  await asyncElementRendered();
+  ok(option1.selected, "option 1 is now selected");
+
+  let selectedClone = get_selected_clone();
+  is_visible(selectedClone, "The selected clone should be visible at all times");
+  is(selectedClone.getAttribute("email"), option1.getAttribute("email"),
+     "The selected clone email should be equivalent to the selected option 2");
+  is(selectedClone.getAttribute("name"), option1.getAttribute("name"),
+     "The selected clone name should be equivalent to the selected option 2");
+});
+
+add_task(async function test_multi_select_not_supported_in_dropdown() {
+  ok(option1.selected, "Option 1 should be selected from prior test");
+
+  select1.popupBox.focus();
+  synthesizeKey(option2.textContent, {});
+  await asyncElementRendered();
+
+  ok(!option1.selected, "Option 1 should no longer be selected after selecting option1");
+  ok(option2.selected, "Option 2 should now have selected property set to true");
+});
+
+add_task(async function test_selected_clone_should_equal_selected_option() {
+  ok(option2.selected, "option 2 should be selected");
+
+  let clonedOptions = select1.querySelectorAll(".rich-select-selected-option");
+  is(clonedOptions.length, 1, "there should only be one cloned option");
+
+  let clonedOption = clonedOptions[0];
+  for (let attrName of AddressOption.recordAttributes) {
+    is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
+       option2.attributes[attrName] && option2.attributes[attrName].value,
+       "attributes should have matching value; name=" + attrName);
+  }
+
+  select1.popupBox.focus();
+  synthesizeKey(option1.textContent, {});
+  await asyncElementRendered();
+
+  clonedOptions = select1.querySelectorAll(".rich-select-selected-option");
+  is(clonedOptions.length, 1, "there should only be one cloned option");
+
+  clonedOption = clonedOptions[0];
+  for (let attrName of AddressOption.recordAttributes) {
+    is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
+       option1.attributes[attrName] && option1.attributes[attrName].value,
+       "attributes should have matching value; name=" + attrName);
+  }
+});
+</script>
+
+</body>
+</html>