payment-request/dynamically-change-shipping-options-manual.https.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Test for PaymentRequest shippingOption dynamic updating</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 applePayMethod = {
    supportedMethods: "https://apple.com/apple-pay",
    data: {
      version: 3,
      merchantIdentifier: "merchant.com.example",
      countryCode: "US",
      merchantCapabilities: ["supports3DS"],
      supportedNetworks: ["visa"],
    },
  };
  const validMethods = Object.freeze([validMethod, applePayMethod]);
  const validAmount = Object.freeze({ currency: "USD", value: "5.00" });
  const validTotal = Object.freeze({
    label: "label",
    amount: validAmount,
  });
  const validDetails = Object.freeze({ total: validTotal });

  const initialValidShippingOption = Object.freeze({
    id: "default-method",
    label: "Default shipping method",
    amount: validAmount,
    selected: true,
  });

  const validDynamicShippingOption = Object.freeze({
    id: "dynamically-added-id",
    label: "Dynamically added shipping option",
    amount: validAmount,
    selected: false,
  });

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

  function testShippingOptionChanged() {
    promise_test(async (t) => {
      const detailsWithShippingOptions = {
        ...validDetails,
        shippingOptions: [initialValidShippingOption],
      };
      const request = new PaymentRequest(
        validMethods,
        detailsWithShippingOptions,
        requestShipping
      );
      const shippingAddressChangeListener = new Promise((resolve) => {
        request.addEventListener(
          "shippingaddresschange",
          (ev) => {
            // resolve(request.shippingOption);
            ev.updateWith({
              shippingOptions: [
                initialValidShippingOption,
                validDynamicShippingOption,
              ],
            });
            resolve();
          },
          { once: true }
        );
      });
      const handlerPromise = new Promise((resolve) => {
        request.onshippingoptionchange = () => {
          resolve(request.shippingOption);
        };
      });
      request.show().catch((err) => err);

      const results = await Promise.all([
        shippingAddressChangeListener,
        handlerPromise,
      ]);
      assert_true(
        results[1] === "dynamically-added-id",
        "Expected dynamically-added-id as the shippingOption"
      );
      await request.abort();
    });
  }
</script>

<h2>PaymentRequest shippingOption attribute</h2>
<p>
  Click on each button in sequence from top to bottom without refreshing the
  page. Each button (except the 'Done' button) will bring up the Payment Request
  UI window.
</p>
<ol>
  <li>
    When the payment sheet is presented, view options for Shipping Method. There
    should only be one: "Default shipping method"
  </li>
  <li>
    Change your Shipping Address - either update your existing one by changing
    something (name, address, etc), or select a different Shipping Address, or
    add a new Shipping Address and select it.
  </li>
  <li>
    Go back to Shipping Method, and there is now an option called "Dynamically
    added shipping option". Select it
  </li>
  <li>
    Click on the 'Done' button
  </li>
</ol>
<ul>
  <li>
    <button onclick="testShippingOptionChanged()">
      When the address is changed, shipping methods can be updated
    </button>
  </li>
  <li>
    <button onclick="done()">Done</button>
  </li>
</ul>
<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>