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
|
<!doctype html>
<meta charset="utf8">
<link rel="help" href="https://w3c.github.io/payment-request/#algorithms">
<title>
Payment Request algorithms
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({
explicit_done: true,
explicit_timeout: true,
});
const methods = [
{
supportedMethods: "basic-card",
},
{
supportedMethods: "https://apple.com/apple-pay",
data: {
version: 3,
merchantIdentifier: "merchant.com.example",
countryCode: "US",
merchantCapabilities: ["supports3DS"],
supportedNetworks: ["visa"],
},
}
];
const shippingOptions = {
shippingOptions: [
{
id: "fail",
label: "Option 1",
amount: {
currency: "USD",
value: "5.00",
},
selected: true,
},
{
id: "pass",
label: "Option 2",
amount: {
currency: "USD",
value: "5.00",
},
},
],
};
const detailsNoShippingOptions = {
total: {
label: "Total due",
amount: {
currency: "USD",
value: "1.0",
},
},
};
const detailsWithShippingOptions = Object.assign(
{
total: {
label: "Total due",
amount: {
currency: "USD",
value: "1.0",
},
},
},
shippingOptions
);
const options = {
requestShipping: true,
};
function testFireEvent(button, details, eventName, expectRequestProps) {
button.disabled = true;
promise_test(async t => {
new PaymentRequest(methods, detailsNoShippingOptions, options);
const request = new PaymentRequest(methods, details, options);
const handlerPromise = new Promise(resolve => {
request[`on${eventName}`] = event => {
// "prevent immediate propagation" flag is set.
// This listener below won't fire!
event.updateWith(details);
resolve(event);
};
});
// This listener should never fire because the
// the event handler caused "prevent immediate propagation" to be set.
request.addEventListener(
eventName,
t.unreached_func("Second event listener should never fire")
);
const response = await request.show();
const event = await handlerPromise;
assert_true(
event instanceof window.PaymentRequestUpdateEvent,
"Expected instances of PaymentRequestUpdateEvent"
);
await response.complete("success");
}, button.textContent.trim());
}
async function runAbortTest(button) {
button.disabled = true;
const { textContent: testName } = button;
promise_test(async t => {
const request = new PaymentRequest(methods, detailsNoShippingOptions);
// Await the user to abort
await promise_rejects_dom(t, "AbortError", request.show());
// [[state]] is now closed
await promise_rejects_dom(t, "InvalidStateError", request.show());
}, testName.trim());
}
</script>
<h2>
Tests for "algorithms" section
</h2>
<p>
Click on each button in sequence from top to bottom without refreshing the page.
Each button will bring up the Payment Request UI window.
</p>
<section>
<h3 id="abort-algo">
User aborts the payment request algorithm
</h3>
<link rel="help" href="https://w3c.github.io/payment-request/#user-aborts-the-payment-request-algorithm">
<p>
When presented with the payment sheet, abort the payment request (e.g., by hitting the esc key or pressing a UA provided button).
</p>
<ol>
<li>
<button onclick="runAbortTest(this);">
If the user aborts, the UA must run the user aborts the payment request algorithm.
</button>
</li>
</ol>
</section>
<section>
<h3 id="shipping-address-changed-algo">Shipping address changed algorithm</h3>
<link rel="help" href="https://www.w3.org/TR/payment-request/#shipping-address-changed-algorithm">
<p>
When prompted, please change or enter a new shipping address and then select Pay.
</p>
<ol>
<li>
<button onclick="testFireEvent(this, detailsWithShippingOptions, 'shippingaddresschange', {});">
The shipping address changed algorithm runs when the user provides a new shipping address.
</button>
</li>
</ol>
</section>
<section>
<h3 id="shipping-option-changed-algo">Shipping option changed algorithm</h3>
<link rel="help" href="https://w3c.github.io/payment-request/#shipping-option-changed-algorithm">
<p>
Finally, when prompted, please select "shipping option 2" and then select Pay.
</p>
<ol>
<li>
<button onclick="testFireEvent(this, detailsWithShippingOptions, 'shippingoptionchange', {}, 'pass'); done();">
The shipping option changed algorithm runs when the user chooses a new shipping option.
</button>
</li>
</ol>
</section>
<small>
If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a>
and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>.
</small>
|
