payment-method-basic-card/apply_the_modifiers.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>
  Payment Method Basic Card: apply the modifiers
</title>
<link
  rel="help"
  href="https://w3c.github.io/payment-method-basic-card/#applying-the-modifiers"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
  setup({ explicit_done: true, explicit_timeout: true });
  const basicCard = [{ supportedMethods: "basic-card" }];
  const defaultDetails = {
    total: {
      label: "FAIL - SHOWING DEFAULT!",
      amount: {
        currency: "USD",
        value: "0.0",
      },
    },
  };

  const failModifier = {
    supportedMethods: "basic-card",
    total: {
      label: "FAIL",
      amount: { currency: "USD", value: "test" },
    },
    additionalDisplayItems: [
      {
        label: "FAIL - ADDITIONAL DISPLAY ITEM",
        amount: { currency: "USD", value: "54321" },
      },
    ],
  };

  const notBasicCardModifier = {
    supportedMethods: "this-doesnt-apply",
    total: {
      label: "FAIL - this-doesnt-apply",
      amount: { currency: "USD", value: "54321" },
    },
  };

  const modifier = {
    supportedMethods: "basic-card",
    total: {
      label: "PASS",
      amount: { currency: "USD", value: "12345" },
    },
    additionalDisplayItems: [
      {
        label: "PASS - ADDITIONAL DISPLAY ITEM",
        amount: { currency: "USD", value: "12345" },
      },
    ],
  };

  function defaultModifierApplies(testableAssertion) {
    promise_test(async t => {
      const visaModifier = Object.assign({}, modifier, {
        data: { supportedNetworks: ["visa"] },
      });
      visaModifier.total.label = "PASS - VISA MODIFIED";
      const details = Object.assign({}, defaultDetails, {
        modifiers: [visaModifier],
      });
      const showPromise = new PaymentRequest(basicCard, defaultDetails).show();
      await promise_rejects_dom(t, "AbortError", showPromise);
    }, testableAssertion.trim());
  }

  function modifierWithNoDataAppliesToAll(testableAssertion) {
    promise_test(async t => {
      const details = Object.assign({}, defaultDetails, {
        modifiers: [modifier],
      });
      const showPromise = new PaymentRequest(basicCard, defaultDetails).show();
      await promise_rejects_dom(t, "AbortError", showPromise);
    }, testableAssertion.trim());
  }

  function modifierWithObjectAppliesToAll(testableAssertion) {
    promise_test(async t => {
      const modifiers = [Object.assign({}, modifier, { data: {} })];
      const details = Object.assign({}, defaultDetails, { modifiers });
      const showPromise = new PaymentRequest(basicCard, defaultDetails).show();
      await promise_rejects_dom(t, "AbortError", showPromise);
    }, testableAssertion.trim());
  }

  function modifierWithEmptySupportedNetworksAppliesToAll(testableAssertion) {
    promise_test(async t => {
      const modifiers = [
        Object.assign({}, modifier, { data: { supportedNetworks: [] } }),
      ];
      const details = Object.assign({}, defaultDetails, { modifiers });
      const showPromise = new PaymentRequest(basicCard, defaultDetails).show();
      await promise_rejects_dom(t, "AbortError", showPromise);
    }, testableAssertion.trim());
  }

  function modifierLastOneWins(testableAssertion) {
    promise_test(async t => {
      const modifiers = [failModifier, modifier, notBasicCardModifier];
      const details = Object.assign({}, defaultDetails, { modifiers });
      const showPromise = new PaymentRequest(basicCard, defaultDetails).show();
      await promise_rejects_dom(t, "AbortError", showPromise);
    }, testableAssertion.trim());
  }
</script>
<h1>Manual tests</h1>
<p>
  <strong>Note:</strong> this test requires that there is at at least one
  registered "visa" card. If the payment-sheet total's
  label displays "PASS", and the value US$12345, then a test has passed.
</p>
<ol>
  <li>
    <button onclick="defaultModifierApplies(this.textContent.trim())">
      A modifier is applied by default to a card.
    </button>
  </li>
  <li>
    <button onclick="modifierWithNoDataAppliesToAll(this.textContent.trim())">
      Missing PaymentDetailsModifier.data is same as passing default
      BasicCardRequest.
    </button>
  </li>
  <li>
    <button onclick="modifierWithNoDataAppliesToAll(this.textContent.trim())">
      PaymentDetailsModifier.data with empty object is same as passing default
      BasicCardRequest.
    </button>
  </li>
  <li>
    <button
      onclick="modifierWithEmptySupportedNetworksAppliesToAll(this.textContent.trim())"
    >
      A modified with a BasicCardRequest whose supportedNetworks is an empty
      array applies to all.
    </button>
  </li>
  <li>
    <button onclick="modifierLastOneWins(this.textContent.trim())">
      Given a set of modifiers, the last applicable "basic-card" wins.
    </button>
  </li>
  <li><button onclick="done()">Done!</button></li>
</ol>