142 lines
4.1 KiB
HTML
142 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<title>Test for PaymentRequest shippingOption dynamic updating</title>
|
|
<link
|
|
rel="help"
|
|
href="https://w3c.github.io/payment-request/#shippingoption-attribute"
|
|
/>
|
|
<link
|
|
rel="help"
|
|
href="https://w3c.github.io/payment-request/#onshippingoptionchange-attribute"
|
|
/>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
setup({ explicit_done: true, explicit_timeout: true });
|
|
const validMethod = Object.freeze({ supportedMethods: "basic-card" });
|
|
const applePayMethod = {
|
|
supportedMethods: "https://apple.com/apple-pay",
|
|
data: {
|
|
version: 3,
|
|
merchantIdentifier: "merchant.com.example",
|
|
countryCode: "US",
|
|
merchantCapabilities: ["supports3DS"],
|
|
supportedNetworks: ["visa"],
|
|
},
|
|
};
|
|
const validMethods = Object.freeze([validMethod, applePayMethod]);
|
|
const validAmount = Object.freeze({ currency: "USD", value: "5.00" });
|
|
const validTotal = Object.freeze({
|
|
label: "label",
|
|
amount: validAmount,
|
|
});
|
|
const validDetails = Object.freeze({ total: validTotal });
|
|
|
|
const initialValidShippingOption = Object.freeze({
|
|
id: "default-method",
|
|
label: "Default shipping method",
|
|
amount: validAmount,
|
|
selected: true,
|
|
});
|
|
|
|
const validDynamicShippingOption = Object.freeze({
|
|
id: "dynamically-added-id",
|
|
label: "Dynamically added shipping option",
|
|
amount: validAmount,
|
|
selected: false,
|
|
});
|
|
|
|
const requestShipping = Object.freeze({
|
|
requestShipping: true,
|
|
});
|
|
|
|
function testShippingOptionChanged() {
|
|
promise_test(async (t) => {
|
|
const detailsWithShippingOptions = {
|
|
...validDetails,
|
|
shippingOptions: [initialValidShippingOption],
|
|
};
|
|
const request = new PaymentRequest(
|
|
validMethods,
|
|
detailsWithShippingOptions,
|
|
requestShipping
|
|
);
|
|
const shippingAddressChangeListener = new Promise((resolve) => {
|
|
request.addEventListener(
|
|
"shippingaddresschange",
|
|
(ev) => {
|
|
// resolve(request.shippingOption);
|
|
ev.updateWith({
|
|
shippingOptions: [
|
|
initialValidShippingOption,
|
|
validDynamicShippingOption,
|
|
],
|
|
});
|
|
resolve();
|
|
},
|
|
{ once: true }
|
|
);
|
|
});
|
|
const handlerPromise = new Promise((resolve) => {
|
|
request.onshippingoptionchange = () => {
|
|
resolve(request.shippingOption);
|
|
};
|
|
});
|
|
request.show().catch((err) => err);
|
|
|
|
const results = await Promise.all([
|
|
shippingAddressChangeListener,
|
|
handlerPromise,
|
|
]);
|
|
assert_true(
|
|
results[1] === "dynamically-added-id",
|
|
"Expected dynamically-added-id as the shippingOption"
|
|
);
|
|
await request.abort();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<h2>PaymentRequest shippingOption attribute</h2>
|
|
<p>
|
|
Click on each button in sequence from top to bottom without refreshing the
|
|
page. Each button (except the 'Done' button) will bring up the Payment Request
|
|
UI window.
|
|
</p>
|
|
<ol>
|
|
<li>
|
|
When the payment sheet is presented, view options for Shipping Method. There
|
|
should only be one: "Default shipping method"
|
|
</li>
|
|
<li>
|
|
Change your Shipping Address - either update your existing one by changing
|
|
something (name, address, etc), or select a different Shipping Address, or
|
|
add a new Shipping Address and select it.
|
|
</li>
|
|
<li>
|
|
Go back to Shipping Method, and there is now an option called "Dynamically
|
|
added shipping option". Select it
|
|
</li>
|
|
<li>
|
|
Click on the 'Done' button
|
|
</li>
|
|
</ol>
|
|
<ul>
|
|
<li>
|
|
<button onclick="testShippingOptionChanged()">
|
|
When the address is changed, shipping methods can be updated
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="done()">Done</button>
|
|
</li>
|
|
</ul>
|
|
<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>
|