<!DOCTYPE html>
<meta charset="utf-8">
<title>Test for PaymentDetailsBase's shippingOptions member</title>
<link rel="help" href="https://w3c.github.io/payment-request/#dom-paymentdetailsbase-shippingoptions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({ explicit_done: true, explicit_timeout: true });
const validMethods = Object.freeze([
  { supportedMethods: "basic-card" },
  {
    supportedMethods: "https://apple.com/apple-pay",
    data: {
      version: 3,
      merchantIdentifier: "merchant.com.example",
      countryCode: "US",
      merchantCapabilities: ["supports3DS"],
      supportedNetworks: ["visa"],
    },
  },
]);
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: "fail-if-selected-1",
  label: "FAIL if selected 1",
  amount: validAmount,
  selected: true,
});

const validShippingOption2 = Object.freeze({
  id: "fail-if-selected-2",
  label: "FAIL if selected 2",
  amount: validAmount,
  selected: false,
});

const validShippingOption3 = Object.freeze({
  id: "pass-if-selected",
  label: "THIS MUST BE AUTOMATICALLY SELECTED",
  amount: validAmount,
  selected: true,
});

function testShippingOptionChanged(button) {
  button.disabled = true;
  promise_test(async t => {
    const detailsWithShippingOptions = {
      ...validDetails,
      shippingOptions: [
        validShippingOption1,
        validShippingOption2,
        validShippingOption3,
      ],
    };
    const request = new PaymentRequest(
      validMethods,
      detailsWithShippingOptions,
      { requestShipping: true }
    );
    assert_equals(
      request.shippingOption,
      "pass-if-selected",
      "Must be 'pass-if-selected', as the selected member is true"
    );
    request.onshippingoptionchange = () => {
      assert_unreached("onshippingoptionchange fired unexpectedly");
    };
    const response = await request.show();
    assert_equals(response.shippingOption, "pass-if-selected");
    response.complete();
  }, button.textContent.trim());
  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, hit pay.
</p>
<ol>
  <li>
    <button onclick="testShippingOptionChanged(this)">
      When default shipping option is pre-selected, must not fire onshippingoptionchange
      and PaymentResponse must reflect the pre-selected option.
    </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>