mozilla-release/testing/web-platform/tests/payment-request/rejects_if_not_active.https.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>PaymentRequest show() rejects if doc is not fully active</title>
<link rel="help" href="https://w3c.github.io/payment-request/#show-method">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<body>
<script>
const applePay = Object.freeze({
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantIdentifier: "merchant.com.example",
    countryCode: "US",
    merchantCapabilities: ["supports3DS"],
    supportedNetworks: ["visa"],
  }
});
const validMethod = Object.freeze({
  supportedMethods: "basic-card",
});
const validMethods = Object.freeze([validMethod, applePay]);
const validAmount = Object.freeze({
  currency: "USD",
  value: "5.00",
});
const validTotal = Object.freeze({
  label: "Total due",
  amount: validAmount,
});
const validDetails = Object.freeze({
  total: validTotal,
});

function getLoadedPaymentRequest(iframe, url) {
  return new Promise(resolve => {
    iframe.addEventListener(
      "load",
      () => {
        const { PaymentRequest } = iframe.contentWindow;
        const request = new PaymentRequest(validMethods, validDetails);
        resolve(request);
      },
      { once: true }
    );
    iframe.src = url;
  });
}

promise_test(async t => {
  const iframe = document.createElement("iframe");
  iframe.allowPaymentRequest = true;
  document.body.appendChild(iframe);
  // Make a request in the iframe.
  const request = await getLoadedPaymentRequest(
    iframe,
    "/payment-request/resources/page1.html"
  );
  const [showPromise] = await test_driver.bless("show payment request", () => {
    return [request.show()];
  });
  // Navigate the iframe to a new location. Wait for the load event to fire.
  await new Promise(resolve => {
    iframe.addEventListener("load", resolve);
    iframe.src = "/payment-request/resources/page2.html";
    // An implementation may optionally reject |showPromise|.
    showPromise.catch(e => {});
  });

  // The navigaton should have dismissed the previous payment request so it
  // should be possible to show another one now.
  const request2 = new iframe.contentWindow.PaymentRequest(
    validMethods, validDetails);
  const [showPromise2] = await test_driver.bless(
    "show 2nd payment request", () => {
      return [request2.show()];
    });

  // Stop the test in 1 second if it has not rejected, which means that a
  // payment sheet is successfully shown.
  t.step_timeout(async () => {
    // We are done, so clean up.
    iframe.remove();
    t.done();
  }, 1000);

  // This should never settle because the payment sheet should be pending.
  await showPromise2.then(() => {
    assert_true(false, "Second payment should be pending but is resolved.");
  })
  .catch(e => {
    assert_true(false, "Second payment should be pending but is rejected.");
  });
}, "If a payment request is showing, but its document is navigated away (so no longer fully active), the payment sheet is dismissed.");
</script>