@evenicanpm/storefront-core 1.0.4 → 1.0.5

package/src/pages-v2/cart/__tests__/checkout-form.test.tsx

@@ -0,0 +1,148 @@
+import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import cartData from "@evenicanpm/storefront-core/src/pages-v2/cart/__tests__/cart-with-items.json";
+import { NextIntlClientProvider } from "next-intl";
+import ENUS from "@messages/en-US.json";
+//import fr from "../../../../../../messages/fr.json";
+import { vi } from "vitest";
+import CheckoutForm from "@evenicanpm/storefront-core/src/pages/cart/checkout-form";
+import _ from "lodash";
+import { NotificationProvider } from "@evenicanpm/storefront-core/src/providers/notifications/notification-context";
+
+vi.mock("next-auth/react", () => ({
+  // Empty mock for next-auth to stop throwing errors
+}));
+
+// global.fetch = vi.fn(() => Promise.resolve({ json: () => ({}) }));
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Complaining about date types from the json
+const cart: Cart = cartData;
+const queryClient = new QueryClient();
+const Wrapper = ({ children }: React.PropsWithChildren) => (
+  <NextIntlClientProvider locale={"en-US"} messages={ENUS}>
+    <NotificationProvider>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </NotificationProvider>
+  </NextIntlClientProvider>
+);
+
+// Commenting out until used
+/* const Wrapper2 = ({ children }: React.PropsWithChildren) => (
+  <NextIntlClientProvider locale={"fr"} messages={fr}>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  </NextIntlClientProvider>
+); */
+
+describe("Checkout Form", () => {
+  it("Has Total amount displayed", () => {
+    render(
+      <Wrapper>
+        <CheckoutForm
+          appliedCoupons={[]}
+          cartId={cart.Id}
+          cartTotal={cart.TotalAmount || 0}
+          cartLineIds={cart.CartLines.map((line) => line.LineId).filter(
+            (line) => line !== null && line !== undefined,
+          )}
+          countries={[]}
+          commentFromData=""
+          updateCartComment={vi.fn()}
+        />
+      </Wrapper>,
+    );
+    expect(screen.getByText("$1,118.75")).toBeInTheDocument();
+  });
+  it("Should Display Applied Coupons", () => {
+    render(
+      <Wrapper>
+        <CheckoutForm
+          appliedCoupons={[{ Code: "TAKE20", CodeId: "TAKE20" }]}
+          cartId={cart.Id}
+          cartTotal={cart.TotalAmount || 0}
+          cartLineIds={cart.CartLines.map((line) => line.LineId).filter(
+            (line) => line !== null && line !== undefined,
+          )}
+          countries={[]}
+          commentFromData=""
+          updateCartComment={vi.fn()}
+        />
+      </Wrapper>,
+    );
+    expect(screen.getByTitle("Remove Coupon")).toBeInTheDocument();
+    expect(screen.getByText("TAKE20")).toBeInTheDocument();
+  });
+  it("Should have contents in comment textarea", () => {
+    render(
+      <Wrapper>
+        <CheckoutForm
+          appliedCoupons={[]}
+          cartId={cart.Id}
+          cartTotal={cart.TotalAmount || 0}
+          cartLineIds={cart.CartLines.map((line) => line.LineId).filter(
+            (line) => line !== null && line !== undefined,
+          )}
+          countries={[]}
+          commentFromData="Test Comment"
+          updateCartComment={vi.fn()}
+        />
+      </Wrapper>,
+    );
+    expect(screen.getByTestId("cart-comment")).toHaveValue("Test Comment");
+  });
+  it("Should debounce text entry", () => {
+    render(
+      <Wrapper>
+        <CheckoutForm
+          appliedCoupons={[]}
+          cartId={cart.Id}
+          cartTotal={cart.TotalAmount || 0}
+          cartLineIds={cart.CartLines.map((line) => line.LineId).filter(
+            (line) => line !== null && line !== undefined,
+          )}
+          countries={[]}
+          commentFromData="Test Comment"
+          updateCartComment={vi.fn()}
+        />
+      </Wrapper>,
+    );
+    vi.useFakeTimers();
+    const textarea = screen.getByTestId("cart-comment") as HTMLTextAreaElement;
+    let value = "cart-comment";
+    const fn = vi.fn((e) => {
+      value = e.target.value;
+    });
+    const debouncedFn = _.debounce(fn, 2500);
+    textarea.onchange = debouncedFn;
+    // Simulate the change event
+    fireEvent.change(textarea, { target: { value: "New Comment" } });
+
+    //Simulate another change event
+    fireEvent.change(textarea, { target: { value: "New Comment 1" } });
+    // Test Debounce function on textarea
+    expect(value).toBe("cart-comment");
+    vi.advanceTimersByTime(2500);
+    expect(value).toBe("New Comment 1");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+  it("Should navigate to checkout page", () => {
+    render(
+      <Wrapper>
+        <CheckoutForm
+          appliedCoupons={[]}
+          cartId={cart.Id}
+          cartTotal={cart.TotalAmount || 0}
+          cartLineIds={cart.CartLines.map((line) => line.LineId).filter(
+            (line) => line !== null && line !== undefined,
+          )}
+          countries={[]}
+          commentFromData="Test Comment"
+          updateCartComment={vi.fn()}
+        />
+      </Wrapper>,
+    );
+    const checkoutLink = screen.getByText("Checkout Now");
+    expect(checkoutLink).toHaveAttribute("href", "/checkout");
+  });
+});