Merge pull request #102 from mediaopt/feature/36076-apple-pay

Feature/36076 apple pay

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.29-alpha",
+  "version": "0.1.30-alpha",
   "private": false,
   "type": "module",
   "license": "MIT",

src/app/usePayment.tsx

@@ -210,7 +210,6 @@ export const PaymentProvider: FC<
         !!setRatepayMessage,
         enableVaulting
       );
-      console.log(relevantOrderData);
       const createOrderResult = await createOrder(
         requestHeader,
         createOrderUrl,
@@ -220,7 +219,6 @@ export const PaymentProvider: FC<
           ...relevantOrderData,
         }
       );
-      console.log(createOrderResult);
       const oldOrderData = orderData;
 
       if (createOrderResult) {

src/components/ApplePay/ApplePay.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import { ApplePay } from "./ApplePay";
+
+import { applePayTestParams } from "./constants";
+
+test("ApplePay is shown", () => {
+  render(<ApplePay {...applePayTestParams} />);
+  expect(screen).toBeDefined();
+});

src/components/ApplePay/ApplePayButton.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { ApplePayButton } from "./ApplePayButton";
+
+import { applePayTestParams } from "./constants";
+
+jest.mock("./ApplePayMask", () => ({
+  ApplePayMask: () => <div>ApplePayMask</div>,
+}));
+jest.mock("../../app/usePayment", () => ({
+  usePayment: () => {
+    return { paymentInfo: { id: "123" } };
+  },
+}));
+jest.mock("../../app/useHandleCreatePayment", () => ({
+  useHandleCreatePayment: () => {
+    return {};
+  },
+}));
+
+test("ApplePayButton is shown", () => {
+  render(<ApplePayButton {...applePayTestParams} />);
+  expect(screen).toBeDefined();
+
+  const applePayMask = screen.getByText("ApplePayMask");
+  expect(applePayMask).toBeDefined();
+});

src/components/ApplePay/ApplePayMask.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { ApplePayMask } from "./ApplePayMask";
+
+import { applePayTestParams, DEVICE_ERROR } from "./constants";
+
+jest.mock("../../app/loadScript", () => ({
+  __esModule: true,
+  default: () => Promise.resolve(),
+}));
+
+test("ApplePayMask is shown", async () => {
+  render(<ApplePayMask {...applePayTestParams} />);
+  await waitFor(() => {
+    expect(screen).toBeDefined();
+
+    expect(screen.getByText(DEVICE_ERROR)).toBeDefined();
+  });
+});

src/components/ApplePay/ApplePayMask.tsx

@@ -5,6 +5,7 @@ import loadScript from "../../app/loadScript";
 import { usePayment } from "../../app/usePayment";
 import { ERROR_TEXT_STYLE } from "../../styles";
 import { useLoader } from "../../app/useLoader";
+import { DEVICE_ERROR } from "./constants";
 import {
   CustomPayPalButtonsComponentProps,
   ApplePayProps,
@@ -57,7 +58,7 @@ export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
       async () => {
         const applePaySession: ApplePaySession = window.ApplePaySession;
         if (!applePaySession) {
-          setError("This device does not support Apple Pay");
+          setError(DEVICE_ERROR);
           return;
         }
         if (!applePaySession.canMakePayments()) {

src/components/ApplePay/constants.ts

@@ -0,0 +1,19 @@
+import {
+  testParams,
+  testRequestHeader,
+  testOptions,
+  testVaultParams,
+} from "../../constants";
+
+export const applePayTestParams = {
+  ...testParams,
+  requestHeader: testRequestHeader,
+  options: {
+    ...testOptions,
+    components: "applepay,buttons",
+    buyerCountry: "US",
+  },
+  ...testVaultParams,
+  applePayDisplayName: "My Store",
+};
+export const DEVICE_ERROR = "This device does not support Apple Pay";

src/components/PaymentTokens/PaymentTokensList.tsx

@@ -8,8 +8,6 @@ import { useSettings } from "../../app/useSettings";
 export const PaymentTokensList: React.FC = () => {
   const { paymentTokens, handleRemovePaymentToken } = useSettings();
 
-  console.log(paymentTokens);
-
   return paymentTokens && paymentTokens.payment_tokens ? (
     <table cellPadding={5}>
       <thead>