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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE HTML>
<html>
<!--
Test the accepted-cards element
-->
<head>
<meta charset="utf-8">
<title>Test the accepted-cards element</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<script src="sinon-7.2.7.js"></script>
<script src="payments_common.js"></script>
<script src="../../res/unprivileged-fallbacks.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
<link rel="stylesheet" type="text/css" href="../../res/components/accepted-cards.css"/>
</head>
<body>
<p id="display">
<accepted-cards label="Accepted:"></accepted-cards>
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script type="module">
/** Test the accepted-cards component **/
/* global sinon, PaymentDialogUtils */
import "../../res/components/accepted-cards.js";
import {requestStore} from "../../res/mixins/PaymentStateSubscriberMixin.js";
let emptyState = requestStore.getState();
let acceptedElem = document.querySelector("accepted-cards");
let allNetworks = PaymentDialogUtils.getCreditCardNetworks();
add_task(async function test_reConnected() {
let itemsCount = acceptedElem.querySelectorAll(".accepted-cards-item").length;
is(itemsCount, allNetworks.length, "Same number of items as there are supported networks");
let container = acceptedElem.parentNode;
let removed = container.removeChild(acceptedElem);
container.appendChild(removed);
let newItemsCount = acceptedElem.querySelectorAll(".accepted-cards-item").length;
is(itemsCount, newItemsCount, "Number of items doesnt changed when re-connected");
});
add_task(async function test_someAccepted() {
let supportedNetworks = ["discover", "amex"];
let paymentMethods = [{
supportedMethods: "basic-card",
data: {
supportedNetworks,
},
}];
requestStore.setState({
request: Object.assign({}, emptyState.request, {
paymentMethods,
}),
});
await asyncElementRendered();
let showingItems = acceptedElem.querySelectorAll(".accepted-cards-item:not([hidden])");
is(showingItems.length, 2,
"Expected 2 items to be showing when 2 supportedNetworks are indicated");
for (let network of allNetworks) {
if (supportedNetworks.includes(network)) {
ok(acceptedElem.querySelector(`[data-network-id='${network}']:not([hidden])`),
`Item for the ${network} network expected to be visible`);
} else {
ok(acceptedElem.querySelector(`[data-network-id='${network}'][hidden]`),
`Item for the ${network} network expected to be hidden`);
}
}
});
add_task(async function test_officialBranding() {
// verify we get the expected result when isOfficialBranding returns true
sinon.stub(PaymentDialogUtils, "isOfficialBranding").callsFake(() => { return true; });
let container = acceptedElem.parentNode;
let removed = container.removeChild(acceptedElem);
container.appendChild(removed);
ok(PaymentDialogUtils.isOfficialBranding.calledOnce,
"isOfficialBranding was called");
ok(acceptedElem.classList.contains("branded"),
"The branded class is added when isOfficialBranding returns true");
PaymentDialogUtils.isOfficialBranding.restore();
// verify we get the expected result when isOfficialBranding returns false
sinon.stub(PaymentDialogUtils, "isOfficialBranding").callsFake(() => { return false; });
// the branded class is toggled in the 'connectedCallback',
// so remove and re-add the element to re-evaluate branded-ness
removed = container.removeChild(acceptedElem);
container.appendChild(removed);
ok(PaymentDialogUtils.isOfficialBranding.calledOnce,
"isOfficialBranding was called");
ok(!acceptedElem.classList.contains("branded"),
"The branded class is removed when isOfficialBranding returns false");
PaymentDialogUtils.isOfficialBranding.restore();
});
</script>
</body>
</html>
|
