change-shipping-option-manual.https.html (3435B)
1 <!DOCTYPE html> 2 <!-- Copyright © 2017 Chromium authors and World Wide Web Consortium, (Massachusetts Institute of Technology, ERCIM, Keio University, Beihang). --> 3 <meta charset="utf-8"> 4 <title>Test for PaymentRequest shippingOption attribute</title> 5 <link rel="help" href="https://w3c.github.io/payment-request/#shippingoption-attribute"> 6 <link rel="help" href="https://w3c.github.io/payment-request/#onshippingoptionchange-attribute"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 setup({ explicit_done: true, explicit_timeout: true }); 11 const validMethod = Object.freeze({ supportedMethods: "basic-card" }); 12 const applePayMethod = { 13 supportedMethods: "https://apple.com/apple-pay", 14 data: { 15 version: 3, 16 merchantIdentifier: "merchant.com.example", 17 countryCode: "US", 18 merchantCapabilities: ["supports3DS"], 19 supportedNetworks: ["visa"], 20 }, 21 }; 22 const validMethods = Object.freeze([validMethod, applePayMethod]); 23 const validAmount = Object.freeze({ currency: "USD", value: "5.00" }); 24 const validTotal = Object.freeze({ 25 label: "label", 26 amount: validAmount, 27 }); 28 const validDetails = Object.freeze({ total: validTotal }); 29 30 const validShippingOption1 = Object.freeze({ 31 id: "valid-1", 32 label: "PICK ME!", 33 amount: validAmount, 34 selected: false, 35 }); 36 37 const validShippingOption2 = Object.freeze({ 38 id: "initially-selected", 39 label: "Valid shipping option 2", 40 amount: validAmount, 41 selected: true, 42 }); 43 44 const requestShipping = Object.freeze({ 45 requestShipping: true, 46 }); 47 48 function testShippingOptionChanged() { 49 promise_test(async t => { 50 const detailsWithShippingOptions = Object.assign({}, validDetails, { 51 shippingOptions: [validShippingOption1, validShippingOption2], 52 }); 53 const request = new PaymentRequest( 54 validMethods, 55 detailsWithShippingOptions, 56 requestShipping 57 ); 58 assert_equals( 59 request.shippingOption, 60 "initially-selected", 61 "Must be 'initially-selected', as the selected member is true" 62 ); 63 const listenerPromise = new Promise(resolve => { 64 request.addEventListener("shippingoptionchange", () => { 65 resolve(request.shippingOption); 66 }); 67 }); 68 const handlerPromise = new Promise(resolve => { 69 request.onshippingoptionchange = () => { 70 resolve(request.shippingOption); 71 }; 72 }); 73 request.show().catch(err => err); 74 75 const results = await Promise.all([listenerPromise, handlerPromise]); 76 assert_true( 77 results.every(result => result === "valid-1"), 78 "Expected valid-1 as the shippingOption" 79 ); 80 await request.abort(); 81 }); 82 done(); 83 } 84 </script> 85 86 <h2>PaymentRequest shippingOption attribute</h2> 87 <p> 88 Click on each button in sequence from top to bottom without refreshing the page. 89 Each button will bring up the Payment Request UI window. 90 </p> 91 <p> 92 When the payment sheet is presented, select "PICK ME!" as the shipping option. 93 </p> 94 <ol> 95 <li> 96 <button onclick="testShippingOptionChanged()"> 97 When the shipping option is manually changed, request.shippingOption represents the user's choice. 98 </button> 99 </li> 100 </ol> 101 <small> 102 If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> 103 and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>. 104 </small>