206 lines
6.3 KiB
HTML
206 lines
6.3 KiB
HTML
<!doctype html>
|
|
<meta charset="utf8">
|
|
<link rel="help" href="https://www.w3.org/TR/payment-request/#updatewith()-method">
|
|
<link rel="help" href="https://github.com/w3c/payment-request/pull/591">
|
|
<title>
|
|
PaymentRequestUpdateEvent.updateWith() needs to be called immediately
|
|
</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
setup({ explicit_done: true, explicit_timeout: true });
|
|
const applePay = Object.freeze({
|
|
supportedMethods: "https://apple.com/apple-pay",
|
|
data: {
|
|
version: 3,
|
|
merchantIdentifier: "merchant.com.example",
|
|
countryCode: "US",
|
|
merchantCapabilities: ["supports3DS"],
|
|
supportedNetworks: ["visa"],
|
|
}
|
|
});
|
|
const validMethod = Object.freeze({ supportedMethods: "basic-card" });
|
|
const validMethods = Object.freeze([validMethod, applePay]);
|
|
const validAmount = Object.freeze({ currency: "USD", value: "5.00" });
|
|
const validTotal = Object.freeze({
|
|
label: "label",
|
|
amount: validAmount,
|
|
});
|
|
const validShippingOptionA = Object.freeze({
|
|
id: "a-shipping-option",
|
|
label: "A shipping option",
|
|
amount: validAmount,
|
|
selected: true,
|
|
});
|
|
const validShippingOptionB = Object.freeze({
|
|
id: "b-shipping-option",
|
|
label: "B shipping option",
|
|
amount: validAmount,
|
|
});
|
|
const validDetails = Object.freeze({
|
|
total: validTotal,
|
|
shippingOptions: [validShippingOptionA, validShippingOptionB],
|
|
});
|
|
const validOptions = Object.freeze({
|
|
requestShipping: true,
|
|
});
|
|
|
|
function testImmediateUpdate({ textContent: testName }) {
|
|
promise_test(async t => {
|
|
const request = new PaymentRequest(
|
|
validMethods,
|
|
validDetails,
|
|
validOptions
|
|
);
|
|
const eventPromise = new Promise((resolve, reject) => {
|
|
request.addEventListener(
|
|
"shippingaddresschange",
|
|
ev => {
|
|
// Forces updateWith() to be run in the next event loop tick so that
|
|
// [[waitForUpdate]] is already true when it runs.
|
|
t.step_timeout(() => {
|
|
try {
|
|
ev.updateWith(validDetails);
|
|
resolve(); // This is bad.
|
|
} catch (err) {
|
|
reject(err); // this is good.
|
|
}
|
|
});
|
|
},
|
|
{ once: true }
|
|
);
|
|
});
|
|
const acceptPromise = request.show();
|
|
await promise_rejects_dom(
|
|
t,
|
|
"InvalidStateError",
|
|
eventPromise,
|
|
"The event loop already spun, so [[waitForUpdate]] is now true"
|
|
);
|
|
const response = await acceptPromise;
|
|
await response.complete();
|
|
}, testName.trim());
|
|
}
|
|
|
|
function testSubsequentUpdateWithCalls({ textContent: testName }) {
|
|
promise_test(async t => {
|
|
const request = new PaymentRequest(
|
|
validMethods,
|
|
validDetails,
|
|
validOptions
|
|
);
|
|
const eventPromise = new Promise((resolve, reject) => {
|
|
request.addEventListener("shippingaddresschange", async ev => {
|
|
const p = Promise.resolve(validDetails);
|
|
ev.updateWith(p);
|
|
await p;
|
|
try {
|
|
ev.updateWith(validDetails);
|
|
resolve(); // this is bad, we should never get to here.
|
|
} catch (err) {
|
|
reject(err); // this is good!
|
|
}
|
|
});
|
|
});
|
|
const responsePromise = request.show();
|
|
await promise_rejects_dom(
|
|
t,
|
|
"InvalidStateError",
|
|
eventPromise,
|
|
"Expected eventPromise to have rejected, because updateWith() was a called twice"
|
|
);
|
|
const response = await responsePromise;
|
|
await response.complete();
|
|
}, testName.trim());
|
|
}
|
|
|
|
function testRecycleEvents({ textContent: testName }) {
|
|
promise_test(async t => {
|
|
const request = new PaymentRequest(
|
|
validMethods,
|
|
validDetails,
|
|
validOptions
|
|
);
|
|
|
|
// Register both listeners.
|
|
const addressChangedPromise = new Promise(resolve => {
|
|
request.addEventListener("shippingaddresschange", resolve, {
|
|
once: true,
|
|
});
|
|
});
|
|
|
|
const optionChangedPromise = new Promise(resolve => {
|
|
request.addEventListener("shippingoptionchange", resolve, {
|
|
once: true,
|
|
});
|
|
});
|
|
|
|
const responsePromise = request.show();
|
|
|
|
// Let's wait for the address to change.
|
|
const addressChangeEvent = await addressChangedPromise;
|
|
|
|
// Sets [[waitingForUpdate]] to true.
|
|
addressChangeEvent.updateWith(validDetails);
|
|
|
|
// Let's wait for the shippingOption.
|
|
const optionChangeEvent = await optionChangedPromise;
|
|
|
|
// Here, we try to be sneaky, and reuse the addressChangeEvent to perform the update.
|
|
// However, addressChangeEvent [[waitingForUpdate]] is true, so it throws.
|
|
assert_throws_dom(
|
|
"InvalidStateError",
|
|
() => {
|
|
addressChangeEvent.updateWith(validDetails);
|
|
},
|
|
"addressChangeEvent [[waitingForUpdate]] is true, so it must throw"
|
|
);
|
|
|
|
// But optionChangeEvent is still usable tho, so...
|
|
optionChangeEvent.updateWith(validDetails);
|
|
|
|
assert_throws_dom(
|
|
"InvalidStateError",
|
|
() => {
|
|
optionChangeEvent.updateWith(validDetails);
|
|
},
|
|
"optionChangeEvent [[waitingForUpdate]] is true, so it must throw"
|
|
);
|
|
|
|
const response = await responsePromise;
|
|
await response.complete();
|
|
}, testName.trim());
|
|
}
|
|
</script>
|
|
<h2>updateWith() method</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>
|
|
<p>
|
|
When the payment sheet is shown, select a different shipping address once. Then pay.
|
|
</p>
|
|
<ol>
|
|
<li id="test-0">
|
|
<button onclick="testImmediateUpdate(this);">
|
|
updateWith() must be called immediately, otherwise must throw an InvalidStateError.
|
|
</button>
|
|
</li>
|
|
<li id="test-1">
|
|
<button onclick="testSubsequentUpdateWithCalls(this);">
|
|
Once the event has performed an update, subsequent calls to updateWith() must throw InvalidStateError.
|
|
</button>
|
|
</li>
|
|
<li id="test-2">
|
|
<button onclick="testRecycleEvents(this);">
|
|
Recycling events must not be possible.
|
|
</button> When the payment sheet is shown, select a different shipping address once, then change shipping option once. Then pay.
|
|
</li>
|
|
<li>
|
|
<button onclick="done();">Done!</button>
|
|
</li>
|
|
</ol>
|
|
<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>
|