testing/web-platform/tests/payment-method-basic-card/billing-address-is-null-manual.https.html

   1 <!DOCTYPE html> <meta charset="utf-8" />
   2 <title>Test for requesting billing address</title>
   3 <link
   4   rel="help"
   5   href="https://github.com/w3c/payment-method-basic-card/pull/65"
   6 />
   7 <script src="/resources/testharness.js"></script>
   8 <script src="/resources/testharnessreport.js"></script>
   9 <script>
  10   setup({
  11     explicit_done: true,
  12     explicit_timeout: true,
  13   });
  14   const basicCard = { supportedMethods: "basic-card" };
  15   const details = {
  16     total: {
  17       label: "label",
  18       amount: { currency: "USD", value: "5.00" },
  19     },
  20   };
  21
  22   // Smoke tests
  23   test(() => {
  24     assert_true(
  25       "onpaymentmethodchange" in PaymentRequest.prototype,
  26       "The paymentmethodchange event handler is not supported on PaymentRequest"
  27     );
  28     assert_true(
  29       "PaymentMethodChangeEvent" in window,
  30       "The PaymentMethodChangeEvent is not supported"
  31     );
  32   }, "PaymentMethodChangeEvent support");
  33
  34   function dontRequestBillingAddress(options) {
  35     promise_test(async t => {
  36       const request = new PaymentRequest([basicCard], details, {
  37         requestBillingAddress: false,
  38       });
  39       const showPromise = request.show();
  40
  41       // Let's check the method data from PaymentMethodChangeEvent.
  42       const event = await new Promise(resolve =>
  43         request.addEventListener("paymentmethodchange", resolve)
  44       );
  45       assert_true(
  46         event instanceof PaymentMethodChangeEvent,
  47         "Expected instance of PaymentMethodChangeEvent"
  48       );
  49       assert_equals(
  50         event.methodDetails.billingAddress,
  51         null,
  52         "Expected methodDetails.billingAddress to be null"
  53       );
  54
  55       // Let's check the billingAddress in the response
  56       const response = await showPromise;
  57       const {
  58         details: { billingAddress: responseBillingAddress },
  59       } = response;
  60
  61       assert_equals(
  62         responseBillingAddress,
  63         null,
  64         "Expected PaymentResponse.data.billingAddress to be null"
  65       );
  66
  67       // And we are done
  68       await response.complete("success");
  69     });
  70   }
  71
  72   function requestBillingAddress() {
  73     promise_test(async t => {
  74       const request = new PaymentRequest([basicCard], details, {
  75         requestBillingAddress: true,
  76       });
  77       const showPromise = request.show();
  78
  79       // Let's check the methodDetails from event.
  80       const event = await new Promise(resolve =>
  81         request.addEventListener("paymentmethodchange", resolve)
  82       );
  83       assert_true(
  84         event instanceof PaymentMethodChangeEvent,
  85         "Expected instance of PaymentMethodChangeEvent"
  86       );
  87       const { billingAddress: eventBillingAddress } = event.methodDetails;
  88       checkRedactList(eventBillingAddress);
  89
  90       // Let's check the billingAddress in the response.
  91       const response = await showPromise;
  92       const {
  93         details: { billingAddress: responseBillingAddress },
  94       } = await showPromise;
  95       checkRedactList(responseBillingAddress);
  96
  97       // And we are done.
  98       await response.complete("success");
  99     });
 100   }
 101
 102   function checkRedaction(billingAddress) {
 103     assert_true(
 104       billingAddress instanceof PaymentAddress,
 105       "Expected instance of PaymentAddress"
 106     );
 107     for (const item of ["organization", "phone", "recipient"]) {
 108       assert_equals(
 109         billingAddress[item],
 110         "",
 111         `Expected billingAddress's "${item}" attribute to equal null (redacted).`
 112       );
 113     }
 114   }
 115 </script>
 116
 117 <h2>Request billing address</h2>
 118 <p>
 119   Click on each button in sequence from top to bottom without refreshing the
 120   page. Each button will bring up the Payment Request UI window.
 121 </p>
 122 <p>
 123   When the payment sheet is presented, select a payment method (e.g., a credit
 124   card), and press "Pay".
 125 </p>
 126 <ol>
 127   <li>
 128     <button onclick="dontRequestBillingAddress()">
 129       When no billing address is requested,
 130       `PaymentMethodChangeEvent.methodData.billingAddress` is null.
 131     </button>
 132   </li>
 133   <li>
 134     <button onclick="requestBillingAddress()">
 135       When billing address is
 136       requested,`PaymentMethodChangeEvent.methodData.billingAddress` is a
 137       `PaymentAddress`.
 138     </button>
 139   </li>
 140   <li><button onclick="done()">Done!</button></li>
 141 </ol>
 142 <small>
 143   If you find a buggy test, please
 144   <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> and
 145   tag one of the
 146   <a
 147     href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml"
 148     >suggested reviewers</a
 149   >.
 150 </small>