forked from mirrors/gecko-dev
381332c51e
This was generated with the script at https://bug1544051.bmoattachments.org/attachment.cgi?id=9058672 Differential Revision: https://phabricator.services.mozilla.com/D27761 --HG-- extra : moz-landing-system : lando
150 lines
5.1 KiB
HTML
150 lines
5.1 KiB
HTML
<!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>
|