tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

dynamically-change-shipping-options-manual.https.html (4158B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <title>Test for PaymentRequest shippingOption dynamic updating</title>
      4 <link
      5  rel="help"
      6  href="https://w3c.github.io/payment-request/#shippingoption-attribute"
      7 />
      8 <link
      9  rel="help"
     10  href="https://w3c.github.io/payment-request/#onshippingoptionchange-attribute"
     11 />
     12 <script src="/resources/testharness.js"></script>
     13 <script src="/resources/testharnessreport.js"></script>
     14 <script>
     15  setup({ explicit_done: true, explicit_timeout: true });
     16  const validMethod = Object.freeze({ supportedMethods: "basic-card" });
     17  const applePayMethod = {
     18    supportedMethods: "https://apple.com/apple-pay",
     19    data: {
     20      version: 3,
     21      merchantIdentifier: "merchant.com.example",
     22      countryCode: "US",
     23      merchantCapabilities: ["supports3DS"],
     24      supportedNetworks: ["visa"],
     25    },
     26  };
     27  const validMethods = Object.freeze([validMethod, applePayMethod]);
     28  const validAmount = Object.freeze({ currency: "USD", value: "5.00" });
     29  const validTotal = Object.freeze({
     30    label: "label",
     31    amount: validAmount,
     32  });
     33  const validDetails = Object.freeze({ total: validTotal });
     34 
     35  const initialValidShippingOption = Object.freeze({
     36    id: "default-method",
     37    label: "Default shipping method",
     38    amount: validAmount,
     39    selected: true,
     40  });
     41 
     42  const validDynamicShippingOption = Object.freeze({
     43    id: "dynamically-added-id",
     44    label: "Dynamically added shipping option",
     45    amount: validAmount,
     46    selected: false,
     47  });
     48 
     49  const requestShipping = Object.freeze({
     50    requestShipping: true,
     51  });
     52 
     53  function testShippingOptionChanged() {
     54    promise_test(async (t) => {
     55      const detailsWithShippingOptions = {
     56        ...validDetails,
     57        shippingOptions: [initialValidShippingOption],
     58      };
     59      const request = new PaymentRequest(
     60        validMethods,
     61        detailsWithShippingOptions,
     62        requestShipping
     63      );
     64      const shippingAddressChangeListener = new Promise((resolve) => {
     65        request.addEventListener(
     66          "shippingaddresschange",
     67          (ev) => {
     68            // resolve(request.shippingOption);
     69            ev.updateWith({
     70              shippingOptions: [
     71                initialValidShippingOption,
     72                validDynamicShippingOption,
     73              ],
     74            });
     75            resolve();
     76          },
     77          { once: true }
     78        );
     79      });
     80      const handlerPromise = new Promise((resolve) => {
     81        request.onshippingoptionchange = () => {
     82          resolve(request.shippingOption);
     83        };
     84      });
     85      request.show().catch((err) => err);
     86 
     87      const results = await Promise.all([
     88        shippingAddressChangeListener,
     89        handlerPromise,
     90      ]);
     91      assert_true(
     92        results[1] === "dynamically-added-id",
     93        "Expected dynamically-added-id as the shippingOption"
     94      );
     95      await request.abort();
     96    });
     97  }
     98 </script>
     99 
    100 <h2>PaymentRequest shippingOption attribute</h2>
    101 <p>
    102  Click on each button in sequence from top to bottom without refreshing the
    103  page. Each button (except the 'Done' button) will bring up the Payment Request
    104  UI window.
    105 </p>
    106 <ol>
    107  <li>
    108    When the payment sheet is presented, view options for Shipping Method. There
    109    should only be one: "Default shipping method"
    110  </li>
    111  <li>
    112    Change your Shipping Address - either update your existing one by changing
    113    something (name, address, etc), or select a different Shipping Address, or
    114    add a new Shipping Address and select it.
    115  </li>
    116  <li>
    117    Go back to Shipping Method, and there is now an option called "Dynamically
    118    added shipping option". Select it
    119  </li>
    120  <li>
    121    Click on the 'Done' button
    122  </li>
    123 </ol>
    124 <ul>
    125  <li>
    126    <button onclick="testShippingOptionChanged()">
    127      When the address is changed, shipping methods can be updated
    128    </button>
    129  </li>
    130  <li>
    131    <button onclick="done()">Done</button>
    132  </li>
    133 </ul>
    134 <small>
    135  If you find a buggy test, please
    136  <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> and
    137  tag one of the
    138  <a
    139    href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml"
    140    >suggested reviewers</a
    141  >.
    142 </small>