LayoutTests/imported/w3c/web-platform-tests/payment-request/PaymentRequestUpdateEvent/updateWith-method-abort-update-manual.https.html - WebKit - Git at Google

 <!doctype html>
 <meta charset="utf8">
 <link rel="help" href="https://w3c.github.io/payment-request/#dfn-abort-the-update">
 <title>
   updateWith() method - "abort the update"
 </title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script>
 setup({ explicit_done: true, explicit_timeout: true });

 // PaymentMethod
 const validMethod = Object.freeze({
   supportedMethods: "valid-but-wont-ever-match",
 });

 const validMethodBasicCard = Object.freeze({
   supportedMethods: "basic-card",
 });

 // Methods
 const validMethods = Object.freeze([validMethodBasicCard, validMethod]);

 // Amounts
 const validAmount = Object.freeze({
   currency: "USD",
   value: "1.00",
 });

 const invalidAmount = Object.freeze({
   currency: "¡INVALID!",
   value: "A1.0",
 });

 const negativeAmount = Object.freeze({
   currency: "USD",
   value: "-1.00",
 });

 // Totals
 const validTotal = Object.freeze({
   label: "Valid Total",
   amount: validAmount,
 });

 const invalidTotal = Object.freeze({
   label: "Invalid Total",
   amount: invalidAmount,
 });

 const invalidNegativeTotal = Object.freeze({
   label: "Invalid negative total",
   amount: negativeAmount,
 });

 // PaymentDetailsInit
 const validDetails = Object.freeze({
   total: validTotal,
 });

 const invalidDetailsNegativeTotal = Object.freeze({
   total: invalidNegativeTotal,
 });

 // PaymentOptions
 const validOptions = Object.freeze({
   requestShipping: true,
 });

 // PaymentItem
 const validPaymentItem = Object.freeze({
   amount: validAmount,
   label: "Valid payment item",
 });

 const invalidPaymentItem = Object.freeze({
   amount: invalidAmount,
   label: "Invalid payment item",
 });

 // PaymentItem
 const validPaymentItems = Object.freeze([validPaymentItem]);
 const invalidPaymentItems = Object.freeze([invalidPaymentItem]);

 // PaymentShippingOption
 const invalidShippingOption = Object.freeze({
   id: "abc",
   label: "Invalid shipping option",
   amount: invalidAmount,
   selected: true,
 });

 // PaymentShippingOptions
 const validShippingOption = Object.freeze({
   id: "abc",
   label: "valid shipping option",
   amount: validAmount,
 });

 const validShippingOptions = Object.freeze([validShippingOption]);
 const invalidShippingOptions = Object.freeze([invalidShippingOption]);

 // PaymentDetailsModifier
 const validModifier = Object.freeze({
   additionalDisplayItems: validPaymentItems,
   supportedMethods: "valid-but-wont-ever-match",
   total: validTotal,
 });

 const modifierWithInvalidDisplayItems = Object.freeze({
   additionalDisplayItems: invalidPaymentItems,
   supportedMethods: "basic-card",
   total: validTotal,
 });

 const modifierWithValidDisplayItems = Object.freeze({
   additionalDisplayItems: validPaymentItems,
   supportedMethods: "basic-card",
   total: validTotal,
 });

 const modifierWithInvalidTotal = Object.freeze({
   additionalDisplayItems: validPaymentItems,
   supportedMethods: "basic-card",
   total: invalidTotal,
 });

 const recursiveData = {};
 recursiveData.foo = recursiveData;
 Object.freeze(recursiveData);

 const modifierWithRecursiveData = Object.freeze({
   supportedMethods: validMethodBasicCard,
   total: validTotal,
   data: recursiveData,
 });

 function testBadUpdate(button, badDetails, expectedError, errorCode) {
   button.disabled = true;
   promise_test(async t => {
     const request = new PaymentRequest(
       validMethods,
       validDetails,
       validOptions
     );
     request.onshippingaddresschange = event => {
       event.updateWith(badDetails);
     };
     // First we check the bad update.
     const acceptPromise = request.show();
     await promise_rejects(
       t,
       expectedError,
       acceptPromise,
       "badDetails must cause acceptPromise to reject with expectedError"
     );
     // The request [[state]] is now "closed", so let's check for InvalidStateError
     await promise_rejects(
       t,
       "InvalidStateError",
       request.show(),
       "show() must reject with InvalidStateError"
     );
   }, button.innerText.trim());
 }
 </script>
 <h2>updateWith() method - "abort the update"</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, change the shipping address.
 </p>
 <ol>
   <li>
     <button onclick="
       const rejectedPromise = Promise.reject(new SyntaxError('test')).catch(err => err);
       testBadUpdate(this, rejectedPromise, 'AbortError');
     ">
       Rejection of detailsPromise must abort the update with an "AbortError" DOMException.
     </button>
   </li>
   <li>
     <button onclick="
       const invalidDetails = { total: `this will cause a TypeError!` };
       testBadUpdate(this, invalidDetails, new TypeError());
     ">
       Total in the update is a string, so converting to IDL must abort the update with a TypeError.
     </button>
   </li>
   <li>
     <button onclick="
       const invalidDetails = { total: recursiveData };
       testBadUpdate(this, invalidDetails, new TypeError());
     ">
       Total is recursive, so converting to IDL must abort the update with a TypeError.
     </button>
   </li>
   <li>
     <button onclick="
       testBadUpdate(this, invalidDetailsNegativeTotal, new TypeError());
     ">
       Updating with a negative total results in a TypeError.
     </button>
   </li>
   <li>
     <button onclick="
       const badDetails = Object.assign({}, validDetails, { displayItems: invalidPaymentItems });
       testBadUpdate(this, badDetails, new RangeError());
     ">
       Updating with a displayItem with an invalid currency results in TypeError.
     </button>
   </li>
   <li>
     <button onclick="
       const duplicateShippingOptions = [validShippingOption, validShippingOption];
       const badDetails = Object.assign({}, validDetails, { shippingOptions: duplicateShippingOptions });
       testBadUpdate(this, badDetails, new TypeError());
     ">
       Updating with duplicate shippingOptions (same IDs) results in a TypeError.
     </button>
   </li>
   <li>
     <button onclick="
       const badDetails = Object.assign({}, validDetails, { shippingOptions: invalidShippingOptions });
       testBadUpdate(this, badDetails, new RangeError());
     ">
       Updating with a shippingOption with an invalid currency value results in a RangError.
     </button>
   </li>
   <li>
     <button onclick="
       // validModifier is there as to avoid false positives - it should just get ignored
       const badModifiers = { modifiers: [ modifierWithInvalidTotal, validModifier ] };
       const badDetails = Object.assign({}, validDetails, badModifiers);
       testBadUpdate(this, badDetails, new RangeError());
     ">
       Must throw a RangeError when a modifier's total item has an invalid currency.
     </button>
   </li>
   <li>
     <button onclick="
       // validModifier is there as to avoid false positives - it should just get ignored
       const badModifiers = { modifiers: [ modifierWithInvalidDisplayItems, validModifier ] };
       const badDetails = Object.assign({}, validDetails, badModifiers);
       testBadUpdate(this, badDetails, new RangeError());
     ">
       Must throw a RangeError when a modifier display item has an invalid currency.
    </button>
   </li>
   <li>
     <button onclick="
       // validModifier is there as to avoid false positives - it should just get ignored
       const badModifiers = { modifiers: [ modifierWithRecursiveData, validModifier ] };
       const badDetails = Object.assign({}, validDetails, badModifiers);
       testBadUpdate(this, badDetails, new TypeError());
     ">
       Must throw as Modifier has a recursive dictionary.
     </button>
   </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>
	<!doctype html>
	<meta charset="utf8">
	<link rel="help" href="https://w3c.github.io/payment-request/#dfn-abort-the-update">
	<title>
	updateWith() method - "abort the update"
	</title>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script>
	setup({ explicit_done: true, explicit_timeout: true });

	// PaymentMethod
	const validMethod = Object.freeze({
	supportedMethods: "valid-but-wont-ever-match",
	});

	const validMethodBasicCard = Object.freeze({
	supportedMethods: "basic-card",
	});

	// Methods
	const validMethods = Object.freeze([validMethodBasicCard, validMethod]);

	// Amounts
	const validAmount = Object.freeze({
	currency: "USD",
	value: "1.00",
	});

	const invalidAmount = Object.freeze({
	currency: "¡INVALID!",
	value: "A1.0",
	});

	const negativeAmount = Object.freeze({
	currency: "USD",
	value: "-1.00",
	});

	// Totals
	const validTotal = Object.freeze({
	label: "Valid Total",
	amount: validAmount,
	});

	const invalidTotal = Object.freeze({
	label: "Invalid Total",
	amount: invalidAmount,
	});

	const invalidNegativeTotal = Object.freeze({
	label: "Invalid negative total",
	amount: negativeAmount,
	});

	// PaymentDetailsInit
	const validDetails = Object.freeze({
	total: validTotal,
	});

	const invalidDetailsNegativeTotal = Object.freeze({
	total: invalidNegativeTotal,
	});

	// PaymentOptions
	const validOptions = Object.freeze({
	requestShipping: true,
	});

	// PaymentItem
	const validPaymentItem = Object.freeze({
	amount: validAmount,
	label: "Valid payment item",
	});

	const invalidPaymentItem = Object.freeze({
	amount: invalidAmount,
	label: "Invalid payment item",
	});

	// PaymentItem
	const validPaymentItems = Object.freeze([validPaymentItem]);
	const invalidPaymentItems = Object.freeze([invalidPaymentItem]);

	// PaymentShippingOption
	const invalidShippingOption = Object.freeze({
	id: "abc",
	label: "Invalid shipping option",
	amount: invalidAmount,
	selected: true,
	});

	// PaymentShippingOptions
	const validShippingOption = Object.freeze({
	id: "abc",
	label: "valid shipping option",
	amount: validAmount,
	});

	const validShippingOptions = Object.freeze([validShippingOption]);
	const invalidShippingOptions = Object.freeze([invalidShippingOption]);

	// PaymentDetailsModifier
	const validModifier = Object.freeze({
	additionalDisplayItems: validPaymentItems,
	supportedMethods: "valid-but-wont-ever-match",
	total: validTotal,
	});

	const modifierWithInvalidDisplayItems = Object.freeze({
	additionalDisplayItems: invalidPaymentItems,
	supportedMethods: "basic-card",
	total: validTotal,
	});

	const modifierWithValidDisplayItems = Object.freeze({
	additionalDisplayItems: validPaymentItems,
	supportedMethods: "basic-card",
	total: validTotal,
	});

	const modifierWithInvalidTotal = Object.freeze({
	additionalDisplayItems: validPaymentItems,
	supportedMethods: "basic-card",
	total: invalidTotal,
	});

	const recursiveData = {};
	recursiveData.foo = recursiveData;
	Object.freeze(recursiveData);

	const modifierWithRecursiveData = Object.freeze({
	supportedMethods: validMethodBasicCard,
	total: validTotal,
	data: recursiveData,
	});

	function testBadUpdate(button, badDetails, expectedError, errorCode) {
	button.disabled = true;
	promise_test(async t => {
	const request = new PaymentRequest(
	validMethods,
	validDetails,
	validOptions
	);
	request.onshippingaddresschange = event => {
	event.updateWith(badDetails);
	};
	// First we check the bad update.
	const acceptPromise = request.show();
	await promise_rejects(
	t,
	expectedError,
	acceptPromise,
	"badDetails must cause acceptPromise to reject with expectedError"
	);
	// The request [[state]] is now "closed", so let's check for InvalidStateError
	await promise_rejects(
	t,
	"InvalidStateError",
	request.show(),
	"show() must reject with InvalidStateError"
	);
	}, button.innerText.trim());
	}
	</script>
	<h2>updateWith() method - "abort the update"</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, change the shipping address.
	</p>
	<ol>
	<li>
	<button onclick="
	const rejectedPromise = Promise.reject(new SyntaxError('test')).catch(err => err);
	testBadUpdate(this, rejectedPromise, 'AbortError');
	">
	Rejection of detailsPromise must abort the update with an "AbortError" DOMException.
	</button>
	</li>
	<li>
	<button onclick="
	const invalidDetails = { total: `this will cause a TypeError!` };
	testBadUpdate(this, invalidDetails, new TypeError());
	">
	Total in the update is a string, so converting to IDL must abort the update with a TypeError.
	</button>
	</li>
	<li>
	<button onclick="
	const invalidDetails = { total: recursiveData };
	testBadUpdate(this, invalidDetails, new TypeError());
	">
	Total is recursive, so converting to IDL must abort the update with a TypeError.
	</button>
	</li>
	<li>
	<button onclick="
	testBadUpdate(this, invalidDetailsNegativeTotal, new TypeError());
	">
	Updating with a negative total results in a TypeError.
	</button>
	</li>
	<li>
	<button onclick="
	const badDetails = Object.assign({}, validDetails, { displayItems: invalidPaymentItems });
	testBadUpdate(this, badDetails, new RangeError());
	">
	Updating with a displayItem with an invalid currency results in TypeError.
	</button>
	</li>
	<li>
	<button onclick="
	const duplicateShippingOptions = [validShippingOption, validShippingOption];
	const badDetails = Object.assign({}, validDetails, { shippingOptions: duplicateShippingOptions });
	testBadUpdate(this, badDetails, new TypeError());
	">
	Updating with duplicate shippingOptions (same IDs) results in a TypeError.
	</button>
	</li>
	<li>
	<button onclick="
	const badDetails = Object.assign({}, validDetails, { shippingOptions: invalidShippingOptions });
	testBadUpdate(this, badDetails, new RangeError());
	">
	Updating with a shippingOption with an invalid currency value results in a RangError.
	</button>
	</li>
	<li>
	<button onclick="
	// validModifier is there as to avoid false positives - it should just get ignored
	const badModifiers = { modifiers: [ modifierWithInvalidTotal, validModifier ] };
	const badDetails = Object.assign({}, validDetails, badModifiers);
	testBadUpdate(this, badDetails, new RangeError());
	">
	Must throw a RangeError when a modifier's total item has an invalid currency.
	</button>
	</li>
	<li>
	<button onclick="
	// validModifier is there as to avoid false positives - it should just get ignored
	const badModifiers = { modifiers: [ modifierWithInvalidDisplayItems, validModifier ] };
	const badDetails = Object.assign({}, validDetails, badModifiers);
	testBadUpdate(this, badDetails, new RangeError());
	">
	Must throw a RangeError when a modifier display item has an invalid currency.
	</button>
	</li>
	<li>
	<button onclick="
	// validModifier is there as to avoid false positives - it should just get ignored
	const badModifiers = { modifiers: [ modifierWithRecursiveData, validModifier ] };
	const badDetails = Object.assign({}, validDetails, badModifiers);
	testBadUpdate(this, badDetails, new TypeError());
	">
	Must throw as Modifier has a recursive dictionary.
	</button>
	</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>