forked from mirrors/gecko-dev
963ec2ea52
Differential Revision: https://phabricator.services.mozilla.com/D7863 --HG-- extra : moz-landing-system : lando
97 lines
3.6 KiB
HTML
97 lines
3.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
Test the basic-card-option component
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test the basic-card-option component</title>
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="application/javascript" src="/tests/SimpleTest/AddTask.js"></script>
|
|
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
|
<script src="payments_common.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/basic-card-option.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
</head>
|
|
<body>
|
|
<p id="display">
|
|
<option id="option1"
|
|
value="option1"
|
|
cc-exp="2024-06"
|
|
cc-name="John Smith"
|
|
cc-number="************5461"
|
|
cc-type="visa"
|
|
guid="option1"></option>
|
|
<option id="option2"
|
|
value="option2"
|
|
cc-number="************1111"
|
|
guid="option2"></option>
|
|
|
|
<rich-select id="richSelect1"
|
|
option-type="basic-card-option"></rich-select>
|
|
</p>
|
|
<div id="content" style="display: none">
|
|
|
|
</div>
|
|
<pre id="test">
|
|
</pre>
|
|
<script type="module">
|
|
/** Test the basic-card-option component **/
|
|
|
|
import "../../res/components/basic-card-option.js";
|
|
import "../../res/components/rich-select.js";
|
|
|
|
let option1 = document.getElementById("option1");
|
|
let option2 = document.getElementById("option2");
|
|
let richSelect1 = document.getElementById("richSelect1");
|
|
|
|
add_task(async function test_populated_option_rendering() {
|
|
richSelect1.popupBox.appendChild(option1);
|
|
richSelect1.value = option1.value;
|
|
await asyncElementRendered();
|
|
|
|
let richOption = richSelect1.selectedRichOption;
|
|
is(richOption.ccExp, "2024-06", "Check ccExp getter");
|
|
is(richOption.ccName, "John Smith", "Check ccName getter");
|
|
is(richOption.ccNumber, "************5461", "Check ccNumber getter");
|
|
is(richOption.ccType, "visa", "Check ccType getter");
|
|
|
|
ok(!richOption.innerText.includes("undefined"), "Check for presence of 'undefined'");
|
|
ok(!richOption.innerText.includes("null"), "Check for presence of 'null'");
|
|
|
|
// Note that innerText takes visibility into account so that's why it's used over textContent here
|
|
is(richOption["_cc-exp"].innerText, "Exp. 2024-06", "cc-exp text");
|
|
is(richOption["_cc-name"].innerText, "John Smith", "cc-name text");
|
|
is(richOption["_cc-number"].innerText, "****5461", "cc-number text");
|
|
is(richOption["_cc-type"].localName, "img", "cc-type localName");
|
|
is(richOption["_cc-type"].alt, "visa", "cc-type img alt");
|
|
});
|
|
|
|
add_task(async function test_minimal_option_rendering() {
|
|
richSelect1.popupBox.appendChild(option2);
|
|
richSelect1.value = option2.value;
|
|
await asyncElementRendered();
|
|
|
|
let richOption = richSelect1.selectedRichOption;
|
|
is(richOption.ccExp, null, "Check ccExp getter");
|
|
is(richOption.ccName, null, "Check ccName getter");
|
|
is(richOption.ccNumber, "************1111", "Check ccNumber getter");
|
|
is(richOption.ccType, null, "Check ccType getter");
|
|
|
|
ok(!richOption.innerText.includes("undefined"), "Check for presence of 'undefined'");
|
|
ok(!richOption.innerText.includes("null"), "Check for presence of 'null'");
|
|
|
|
is(richOption["_cc-exp"].innerText, "", "cc-exp text");
|
|
is(richOption["_cc-name"].innerText, "", "cc-name text");
|
|
is(richOption["_cc-number"].innerText, "****1111", "cc-number text");
|
|
is(richOption["_cc-type"].localName, "img", "cc-type localName");
|
|
is(richOption["_cc-type"].alt, "", "cc-type img alt");
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|