--- a/toolkit/components/payments/test/mochitest/test_rich_select.html
+++ b/toolkit/components/payments/test/mochitest/test_rich_select.html
@@ -19,56 +19,64 @@ Test the rich-select component
<link rel="stylesheet" type="text/css" href="rich-select.css"/>
<link rel="stylesheet" type="text/css" href="address-option.css"/>
<link rel="stylesheet" type="text/css" href="basic-card-option.css"/>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
<rich-select id="select1">
+ <!-- the class="rich-option" is required to be hard-coded due to a bug with the custom
+ elements polyfill causing the address-option constructor to happen too late. -->
<address-option id="option1"
+ class="rich-option"
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"></address-option>
<address-option id="option2"
+ class="rich-option"
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"></address-option>
<address-option id="option3"
+ class="rich-option"
email="johnz9382@email.com"
name="John Zembrano"
street-address="42 Fairydust Lane"
address-level2="Lala Land"
missinginformation="true"
address-level1="HI"
tel="415 439 2827"
postal-code="98765"
country="USA"></address-option>
</rich-select>
<rich-select id="select2">
<basic-card-option owner="Jared Wein"
+ class="rich-option"
expiration="01/1970"
number="4024007197293599"
type="Visa"></basic-card-option>
<basic-card-option owner="Whimsy Corn"
+ class="rich-option"
expiration="01/1970"
number="5220465104517667"
type="Mastercard"></basic-card-option>
<basic-card-option owner="Fire Fox"
+ class="rich-option"
expiration="01/1970"
number="6011777095481054"
type="Discover"></basic-card-option>
</rich-select>
</p>
<div id="content" style="display: none">
</div>
@@ -106,43 +114,42 @@ add_task(async function test_streetAddre
ok(option1, "option1 exists");
let streetAddress = option1.querySelector(".street-address");
/* eslint-disable max-len */
is(streetAddress.textContent,
`${option1.streetAddress} ${option1.addressLevel2} ${option1.addressLevel1} ${option1.postalCode} ${option1.country}`);
/* eslint-enable max-len */
});
-add_task(async function test_no_option_selected_first_displayed() {
+add_task(async function test_no_option_selected() {
ok(select1, "select1 exists");
await asyncElementRendered();
is_hidden(option1, "option 1 should be hidden when popup is not open");
is_hidden(option2, "option 2 should be hidden when popup is not open");
is_hidden(option3, "option 3 should be hidden when popup is not open");
- ok(option1.selected, "option 1 should be selected");
- ok(option1.hasAttribute("selected"), "option 1 should have selected attribute");
+ ok(!option1.selected, "option 1 should not be selected");
+ ok(!option1.hasAttribute("selected"), "option 1 should not have selected attribute");
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 1");
- is(selectedClone.getAttribute("name"), option1.getAttribute("name"),
- "The selected clone name should be equivalent to the selected option 1");
+ ok(selectedClone.classList.contains("rich-option"), "Default option should be a rich-option");
+ ok(selectedClone.textContent.includes("None selected"), "Check default text");
});
add_task(async function test_clicking_on_select_shows_all_options() {
ok(select1, "select1 exists");
ok(!select1.open, "select is not open by default");
- ok(option1.selected, "option 1 should be selected by default");
+ ok(!option1.selected, "option 1 should not be selected by default");
select1.click();
ok(select1.open, "select is open after clicking on it");
- ok(option1.selected, "option 1 should be selected when open");
+ is(select1.selectedOption, null, "No selected option when open");
+ ok(!option1.selected, "option 1 should not be selected when open");
is_visible(option1, "option 1 is visible when select is open");
is_visible(option2, "option 2 is visible when select is open");
is_visible(option3, "option 3 is visible when select is open");
option2.click();
ok(!select1.open, "select is not open after blur");
ok(!option1.selected, "option 1 is not selected after click on option 2");
@@ -270,78 +277,99 @@ add_task(async function test_selected_cl
ok(option1.selected, "option 1 should be selected");
await asyncElementRendered();
let clonedOptions = select1.querySelectorAll(".rich-select-selected-clone");
is(clonedOptions.length, 1, "there should only be one cloned option");
let clonedOption = clonedOptions[0];
for (let attrName of AddressOption.observedAttributes) {
+ if (attrName == "selected") {
+ continue;
+ }
is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
option1.attributes[attrName] && option1.attributes[attrName].value,
"attributes should have matching value; name=" + attrName);
}
select1.selectedOption = option2;
await asyncElementRendered();
clonedOptions = select1.querySelectorAll(".rich-select-selected-clone");
is(clonedOptions.length, 1, "there should only be one cloned option");
clonedOption = clonedOptions[0];
for (let attrName of AddressOption.observedAttributes) {
+ if (attrName == "selected") {
+ continue;
+ }
is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
option2.attributes[attrName] && option2.attributes[attrName].value,
"attributes should have matching value; name=" + attrName);
}
});
add_task(async function test_basic_card_simple() {
let select2 = document.getElementById("select2");
ok(select2, "basic card select should exist");
let popupBox = select2.querySelector(".rich-select-popup-box");
ok(popupBox, "basic card popup box exists");
is(popupBox.childElementCount, 3, "There should be three children in the popup box");
+ select2.selectedOption = popupBox.firstElementChild;
+ await asyncElementRendered();
+
let clonedOption = select2.querySelector(".rich-select-selected-clone");
- let selectedOption = popupBox.firstChild;
+ let selectedOption = popupBox.firstElementChild;
for (let attrName of BasicCardOption.observedAttributes) {
+ if (attrName == "selected") {
+ continue;
+ }
is(clonedOption.attributes[attrName] && clonedOption.attributes[attrName].value,
selectedOption.attributes[attrName] && selectedOption.attributes[attrName].value,
"attributes should have matching value; name=" + attrName);
}
});
add_task(async function test_option_appended_after_creation() {
let select2 = document.getElementById("select2");
let select3 = document.createElement("rich-select");
select3.id = "select3";
select2.parentNode.insertBefore(select3, select2.nextElementSibling);
- is(select3.childElementCount, 1, "There should be a popup child");
+ is(select3.childElementCount, 2, "There should be a popup child and clone");
let popupBox = select3.querySelector(".rich-select-popup-box");
ok(popupBox, "The popup box should exist");
is(popupBox.childElementCount, 0, "The popup should not have any children");
let newOption = document.createElement("address-option");
- newOption.recipient = "Jared FooBar";
+ newOption.name = "Jared FooBar";
select3.appendChild(newOption);
+ await asyncElementRendered();
is(select3.childElementCount, 2, "There should now be two children");
is(popupBox.childElementCount, 1, "The popup box should have one child");
- ok(popupBox.children[0].selected, "The only option should be marked selected");
+ ok(!popupBox.children[0].selected, "The only option should not be marked selected");
+ is(select3.selectedOption, null, "Check there is no selected option");
let clonedOption = select3.querySelector(".rich-select-selected-clone");
ok(clonedOption, "cloned option exists");
+ // Select the new option
+ select3.selectedOption = popupBox.lastElementChild;
+ await asyncElementRendered();
+
+ clonedOption = select3.querySelector(".rich-select-selected-clone");
+ is(clonedOption.name, "Jared FooBar", "Check cloned name");
+
newOption.remove();
await asyncElementRendered();
- is(select3.childElementCount, 1, "There should now be one child");
+ is(select3.childElementCount, 2, "There should still be two children");
is(popupBox.childElementCount, 0, "The popup box should not have any children");
clonedOption = select3.querySelector(".rich-select-selected-clone");
- ok(!clonedOption, "there should be no cloned option");
+ todo(clonedOption.textContent.includes("None selected"), "the dropdown should show no selection");
});
</script>
</body>
</html>