| <!DOCTYPE html> |
| <!-- Copyright © 2017 Chromium authors and World Wide Web Consortium, (Massachusetts Institute of Technology, ERCIM, Keio University, Beihang). --> |
| <meta charset="utf-8"> |
| <title>Test for PaymentRequest shippingOption attribute</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 validMethods = Object.freeze([validMethod]); |
| const validAmount = Object.freeze({ currency: "USD", value: "5.00" }); |
| const validTotal = Object.freeze({ |
| label: "label", |
| amount: validAmount, |
| }); |
| const validDetails = Object.freeze({ total: validTotal }); |
| |
| const validShippingOption1 = Object.freeze({ |
| id: "valid-1", |
| label: "PICK ME!", |
| amount: validAmount, |
| selected: false, |
| }); |
| |
| const validShippingOption2 = Object.freeze({ |
| id: "initially-selected", |
| label: "Valid shipping option 2", |
| amount: validAmount, |
| selected: true, |
| }); |
| |
| const requestShipping = Object.freeze({ |
| requestShipping: true, |
| }); |
| |
| function testShippingOptionChanged() { |
| promise_test(async t => { |
| const detailsWithShippingOptions = Object.assign({}, validDetails, { |
| shippingOptions: [validShippingOption1, validShippingOption2], |
| }); |
| const request = new PaymentRequest( |
| validMethods, |
| detailsWithShippingOptions, |
| requestShipping |
| ); |
| assert_equals( |
| request.shippingOption, |
| "initially-selected", |
| "Must be 'initially-selected', as the selected member is true" |
| ); |
| const listenerPromise = new Promise(resolve => { |
| request.addEventListener("shippingoptionchange", () => { |
| resolve(request.shippingOption); |
| }); |
| }); |
| const handlerPromise = new Promise(resolve => { |
| request.onshippingoptionchange = () => { |
| resolve(request.shippingOption); |
| }; |
| }); |
| request.show().catch(err => err); |
| |
| const results = await Promise.all([listenerPromise, handlerPromise]); |
| assert_true( |
| results.every(result => result === "valid-1"), |
| "Expected valid-1 as the shippingOption" |
| ); |
| await request.abort(); |
| }); |
| done(); |
| } |
| </script> |
| |
| <h2>PaymentRequest shippingOption attribute</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 presented, select "PICK ME!" as the shipping option. |
| </p> |
| <ol> |
| <li> |
| <button onclick="testShippingOptionChanged()"> |
| When the shipping option is manually changed, request.shippingOption represents the user's choice. |
| </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> |
