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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
<!DOCTYPE HTML>
<html>
<!--
Test the order-details component
-->
<head>
<meta charset="utf-8">
<title>Test the order-details component</title>
<script src="/tests/SimpleTest/SimpleTest.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/containers/order-details.css"/>
<template id="order-details-template">
<ul class="main-list"></ul>
<ul class="footer-items-list"></ul>
<div class="details-total">
<h2 class="label">Total</h2>
<currency-amount></currency-amount>
</div>
</template>
</head>
<body>
<p id="display">
<order-details></order-details>
</p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
<script type="module">
/** Test the order-details component **/
import OrderDetails from "../../res/containers/order-details.js";
import {requestStore} from "../../res/mixins/PaymentStateSubscriberMixin.js";
let orderDetails = document.querySelector("order-details");
let emptyState = requestStore.getState();
function setup() {
let initialState = deepClone(emptyState);
let cardGUID = "john-doe";
let johnDoeCard = deepClone(PTU.BasicCards.JohnDoe);
johnDoeCard.methodName = "basic-card";
johnDoeCard.guid = cardGUID;
let savedBasicCards = {
[cardGUID]: johnDoeCard,
};
initialState.selectedPaymentCard = cardGUID;
requestStore.setState(Object.assign(initialState, {savedBasicCards}));
}
add_task(async function isFooterItem() {
ok(OrderDetails.isFooterItem({
label: "Levy",
type: "tax",
amount: { currency: "USD", value: "1" },
}, "items with type of 'tax' are footer items"));
ok(!OrderDetails.isFooterItem({
label: "Levis",
amount: { currency: "USD", value: "1" },
}, "items without type of 'tax' aren't footer items"));
});
add_task(async function test_initial_state() {
setup();
is(orderDetails.mainItemsList.childElementCount, 0, "main items list is initially empty");
is(orderDetails.footerItemsList.childElementCount, 0, "footer items list is initially empty");
is(orderDetails.totalAmountElem.value, "0", "total amount is 0");
});
add_task(async function test_list_population() {
setup();
let state = requestStore.getState();
let request = state.request;
let paymentDetails = deepClone(request.paymentDetails);
paymentDetails.displayItems = [
{
label: "One",
amount: { currency: "USD", value: "5" },
},
{
label: "Two",
amount: { currency: "USD", value: "6" },
},
{
label: "Three",
amount: { currency: "USD", value: "7" },
},
];
requestStore.setState({
request: Object.assign(deepClone(request), { paymentDetails }),
});
await asyncElementRendered();
is(orderDetails.mainItemsList.childElementCount, 3, "main items list has correct # children");
is(orderDetails.footerItemsList.childElementCount, 0, "footer items list has 0 children");
paymentDetails.displayItems = [
{
label: "Levy",
type: "tax",
amount: { currency: "USD", value: "1" },
},
{
label: "Item",
amount: { currency: "USD", value: "6" },
},
{
label: "Thing",
amount: { currency: "USD", value: "7" },
},
];
Object.assign(request, { paymentDetails });
requestStore.setState({ request });
await asyncElementRendered();
is(orderDetails.mainItemsList.childElementCount, 2, "main list has correct # children");
is(orderDetails.footerItemsList.childElementCount, 1, "footer list has correct # children");
});
add_task(async function test_additionalDisplayItems() {
setup();
let request = Object.assign({}, requestStore.getState().request);
request.paymentDetails = Object.assign({}, request.paymentDetails, {
modifiers: [{
additionalDisplayItems: [
{
label: "Card fee",
amount: { currency: "USD", value: "1.50" },
},
],
supportedMethods: "basic-card",
total: {
label: "Total due",
amount: { currency: "USD", value: "3.50" },
},
}],
});
requestStore.setState({ request });
await asyncElementRendered();
is(orderDetails.mainItemsList.childElementCount, 0,
"main list added 0 children from additionalDisplayItems");
is(orderDetails.footerItemsList.childElementCount, 1,
"footer list added children from additionalDisplayItems");
});
add_task(async function test_total() {
setup();
let request = Object.assign({}, requestStore.getState().request);
request.paymentDetails = Object.assign({}, request.paymentDetails, {
totalItem: { label: "foo", amount: { currency: "JPY", value: "5" }},
});
requestStore.setState({ request });
await asyncElementRendered();
is(orderDetails.totalAmountElem.value, "5", "total amount gets updated");
is(orderDetails.totalAmountElem.currency, "JPY", "total currency gets updated");
});
add_task(async function test_modified_total() {
setup();
let request = Object.assign({}, requestStore.getState().request);
request.paymentDetails = Object.assign({}, request.paymentDetails, {
totalItem: { label: "foo", amount: { currency: "JPY", value: "5" }},
modifiers: [{
supportedMethods: "basic-card",
total: {
label: "Total due",
amount: { currency: "USD", value: "3.5" },
},
}],
});
requestStore.setState({request});
await asyncElementRendered();
is(orderDetails.totalAmountElem.value, "3.5", "total amount uses modifier total");
is(orderDetails.totalAmountElem.currency, "USD", "total currency uses modifier currency");
});
// The modifier is not applied since the cc network is not supported.
add_task(async function test_non_supported_network() {
setup();
let request = Object.assign({}, requestStore.getState().request);
request.paymentDetails = Object.assign({}, request.paymentDetails, {
totalItem: { label: "foo", amount: { currency: "JPY", value: "5" }},
modifiers: [{
supportedMethods: "basic-card",
total: {
label: "Total due",
amount: { currency: "USD", value: "3.5" },
},
data: {
supportedNetworks: ["mastercard"],
},
}],
});
requestStore.setState({request});
await asyncElementRendered();
is(orderDetails.totalAmountElem.value, "5", "total amount uses modifier total");
is(orderDetails.totalAmountElem.currency, "JPY", "total currency uses modifier currency");
});
</script>
</body>
</html>
|
