summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/payment-request/payment-response/rejects_if_not_active-manual.https.html
blob: 6f2e9e95d41d9fcdd3640e7cb43892b53c1f832a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<meta charset=utf-8>
<link rel="help" href="https://w3c.github.io/payment-request/#retry-method">
<title>PaymentResponse retry() rejects if doc is not fully active</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://w3c.github.io/payment-request/#dom-paymentresponse-retry">
<body>
<script>
setup({ explicit_done: true, explicit_timeout: true });
const validMethod = Object.freeze({
  supportedMethods: "basic-card",
});
const applePay = Object.freeze({
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantIdentifier: "merchant.com.example",
    countryCode: "US",
    merchantCapabilities: ["supports3DS"],
    supportedNetworks: ["visa"],
  }
});
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 getLoadedPaymentResponse(iframe, url) {
  return new Promise(resolve => {
    iframe.addEventListener(
      "load",
      async () => {
        const { PaymentRequest } = iframe.contentWindow;
        const response = await new PaymentRequest(
          validMethods,
          validDetails
        ).show();
        resolve(response);
      },
      { once: true }
    );
    iframe.src = url;
  });
}

function methodNotFullyActive(button, method, ...args) {
  const text = button.textContent.trim();
  promise_test(async t => {
    const iframe = document.createElement("iframe");
    iframe.allow = "payment";
    document.body.appendChild(iframe);

    // We first got to page1.html, grab a PaymentResponse instance.
    const response = await getLoadedPaymentResponse(
      iframe,
      "/payment-request/resources/page1.html"
    );
    // We navigate the iframe again, putting response's document into an inactive state.
    await new Promise(resolve => {
      iframe.addEventListener("load", resolve);
      iframe.src = "/payment-request/resources/page2.html";
    });
    // Now, response's relevant global object's document is no longer active.
    // So, promise needs to reject appropriately.
    const promise = response[methodName](...args);
    await promise_rejects_dom(
      t,
      "AbortError",
      promise,
      "Inactive document, so must throw AbortError"
    );
    // We are done, so clean up.
    iframe.remove();
  }, text);
}

function methodBecomesNotFullyActive(button, methodName, ...args) {
  const text = button.textContent.trim();
  promise_test(async t => {
    const iframe = document.createElement("iframe");
    iframe.allow = "payment";
    document.body.appendChild(iframe);

    // We first got to page1.html, grab a PaymentResponse instance.
    const response = await getLoadedPaymentResponse(
      iframe,
      "/payment-request/resources/page1.html"
    );

    // we get the promise from page1.html, while it's active!
    const promise = response[methodName](...args);

    // We navigate the iframe again, putting response's document into an inactive state.
    await new Promise(resolve => {
      iframe.addEventListener("load", resolve);
      iframe.src = "/payment-request/resources/page2.html";
    });

    // Now, response's relevant global object's document is no longer active.
    // So, promise needs to reject appropriately.
    await promise_rejects_dom(
      t,
      "AbortError",
      promise,
      "Inactive document, so must throw AbortError"
    );
    // We are done, so clean up.
    iframe.remove();
  }, text);
}
</script>
<section>
  <p>
    For each test, when the payment sheet is shown, select a payment method and hit "Pay".
  </p>
  <h2>retry() and document active state</h2>
  <p>Manual Tests for PaymentResponse.retry() - Please run in order!</p>
  <ol>
    <li>
      <button onclick="methodNotFullyActive(this, 'retry', {});">
        retry()'s retryPromise rejects if document is not fully active.
      </button>
    </li>
    <li>
      <button onclick="methodBecomesNotFullyActive(this, 'retry', {});">
        retry()'s retryPromise rejects if the document becomes not fully active.
      </button>
    </li>
  </ol>
  <h2>complete() and document active state</h2>
  <p>Manual Tests for PaymentResponse.complete() - Please run in order!</p>
  <ol>
    <li>
      <button onclick="methodNotFullyActive(this, 'complete', 'success');">
        complete()'s completePromise rejects if document is not fully active.
      </button>
    </li>
    <li>
      <button onclick="methodBecomesNotFullyActive(this, 'complete', 'success');">
        complete()'s completePromise rejects if the document becomes not fully active.
      </button>
    </li>
    <li>
      <button onclick="done();">Done</button>
    </li>
  </ol>
</section>
<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>