1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<!DOCTYPE HTML>
<html>
<!--
Test the basic-card-option component
-->
<head>
<meta charset="utf-8">
<title>Test the basic-card-option 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>
<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>
|
