test: add checkout tests

web/__test__/screens/AboutUsScreen.test.tsx

@@ -3,37 +3,48 @@ import {
   GET_INTRODUCTION,
   GET_VALUES,
   GET_PARTNERS,
+  GET_PARTNER_IMAGES,
 } from "../../src/graphql/queries";
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
 import AboutUsScreen from "../../src/screens/AboutUsScreen";
 import React from "react";
 import { GraphQLError } from "graphql";
 import "@testing-library/jest-dom";
 import { MemoryRouter } from "react-router";
 
+const mockedUseNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const mod = await vi.importActual<typeof import("react-router-dom")>(
+    "react-router-dom"
+  );
+  return {
+    ...mod,
+    useNavigate: () => mockedUseNavigate,
+  };
+});
+
 // Mock data for GET_INTRODUCTION query
 const introMock = {
   request: {
     query: GET_INTRODUCTION,
   },
   result: {
-    data: {
+    data : {
       introductions: {
         data: [
           {
-            id: 1,
             attributes: {
-              Description: "AUIS is a great club",
-              Events: "30",
-              Members: "500",
-              Followers: "1000",
+              Description: "Introduction description",
+              Events: "Upcoming events",
+              Members: "Current members",
+              Followers: "Followers count",
             },
           },
         ],
       },
-    },
-  },
+    }
+  }
 };
 
 const noIntroMock = {
@@ -55,18 +66,18 @@ const valuesMock = {
     query: GET_VALUES,
   },
   result: {
-    data: {
+    data : {
       values: {
         data: [
           {
             id: 1,
             attributes: {
-              Title: "Community",
-              Description: "We believe in a strong community",
+              Title: "Value One",
+              Description: "Description of Value One",
               Image: {
                 data: {
                   attributes: {
-                    url: "/uploads/community.jpg",
+                    url: "/uploads/value_one.jpg",
                   },
                 },
               },
@@ -94,23 +105,20 @@ const noValuesMock = {
 // Mock data for GET_PARTNERS query
 const partnersMock = {
   request: {
-    query: GET_PARTNERS,
+    query: GET_PARTNER_IMAGES,
   },
   result: {
     data: {
       partners: {
-        data: [
+        data:  [
           {
             id: 1,
             attributes: {
-              Type: "Gold",
-              Name: "The Kebab and Chicken House",
-              Location: "17 Mount Street",
-              Description: "20% off Everything",
+              Name: "Partner One",
               Image: {
                 data: {
                   attributes: {
-                    url: "/uploads/kebab.jpg",
+                    url: "/uploads/partner_one.jpg",
                   },
                 },
               },
@@ -181,10 +189,12 @@ describe("AboutUsScreen", () => {
       </MockedProvider>
     );
 
-    // expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
+    expect(await screen.findByText("There is no introduction to display")).toBeInTheDocument();
+    expect(await screen.findByText("There are no values to display")).toBeInTheDocument();
+    expect(await screen.findByText("There are no partners to display")).toBeInTheDocument();
   });
 
-  it("renders introduction correctly", async () => {
+  it("renders queries correctly", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <MemoryRouter>
@@ -193,43 +203,29 @@ describe("AboutUsScreen", () => {
       </MockedProvider>
     );
 
-    expect(await screen.findByText("AUIS is a great club")).toBeInTheDocument();
-    expect(await screen.findByText("30+")).toBeInTheDocument();
-    expect(await screen.findByText("500+")).toBeInTheDocument();
-    expect(await screen.findByText("1000+")).toBeInTheDocument();
+    expect(await screen.findByText("Our Introduction")).toBeInTheDocument();
+    expect(await screen.findByText("Introduction description")).toBeInTheDocument();
+    expect(await screen.findByText("Value One")).toBeInTheDocument();
+    const partnerImage = await screen.findByAltText("Partner One");
+    expect(partnerImage).toHaveAttribute("src", "/uploads/partner_one.jpg");
   });
 
-  it("renders values correctly", async () => {
-    render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <MemoryRouter>
-          <AboutUsScreen navbar={<></>} />
-        </MemoryRouter>
-      </MockedProvider>
-    );
-
-    expect(await screen.findByText("Community")).toBeInTheDocument();
-    expect(
-      await screen.findByText("We believe in a strong community")
-    ).toBeInTheDocument();
-    const valueImage = await screen.findByAltText("Value Image");
-    expect(valueImage).toHaveAttribute("src", "/uploads/community.jpg");
-  });
 
-  it("renders partners correctly", async () => {
+  it("renders no data from cms", async () => {
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
+      <MockedProvider mocks={noDataMocks} addTypename={false}>
         <MemoryRouter>
           <AboutUsScreen navbar={<></>} />
         </MemoryRouter>
       </MockedProvider>
     );
 
-    const partnerImage = await screen.findByAltText("Partner Image");
-    expect(partnerImage).toHaveAttribute("src", "/uploads/kebab.jpg");
+    expect(await screen.findByText("There is no introduction to display")).toBeInTheDocument();
+    expect(await screen.findByText("There are no values to display")).toBeInTheDocument();
+    expect(await screen.findByText("There are no partners to display")).toBeInTheDocument();
   });
 
-  it("renders no data from cms", async () => {
+  it("redirects user when join us clicked", async () => {
     render(
       <MockedProvider mocks={noDataMocks} addTypename={false}>
         <MemoryRouter>
@@ -238,14 +234,11 @@ describe("AboutUsScreen", () => {
       </MockedProvider>
     );
 
-    expect(
-      await screen.findByText("There is no introduction to display")
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("There are no values to display")
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText("There are no partners to display")
-    ).toBeInTheDocument();
-  });
+  const button = (await screen.findByRole('button', {name: "Join Us Now!"}))
+  expect(button).toBeDefined();
+  await fireEvent.click(button)
+
+  expect(mockedUseNavigate);
+  })
+
 });

web/__test__/screens/CheckoutInformationScreen.test.tsx

@@ -0,0 +1,63 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import CheckoutInformationScreen from "../../src/screens/CheckoutInformationScreen";
+import React from "react";
+import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router";
+
+const mockedUseNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const mod =
+    await vi.importActual<typeof import("react-router-dom")>(
+      "react-router-dom"
+    );
+  return {
+    ...mod,
+    useNavigate: () => mockedUseNavigate,
+  };
+});
+
+vi.mock("@components/checkout-page/CheckoutError", () => ({
+  default: () => {
+    return <div>CheckoutError</div>;
+  },
+}));
+
+vi.mock("@components/forms/CheckoutInformation", () => ({
+  default: () => {
+    return <div>CheckoutInformation</div>;
+  },
+}));
+
+describe("AboutUsScreen", () => {
+  it("renders screen properly", () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <MemoryRouter
+          initialEntries={[
+            {
+              state: { data: { priceId: "1234", ticketId: 5678 } },
+            },
+          ]}
+        >
+          <CheckoutInformationScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.getByText("CheckoutInformation")).toBeInTheDocument();
+  });
+
+  it("renders screen properly", () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <MemoryRouter>
+          <CheckoutInformationScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.getByText("CheckoutError")).toBeInTheDocument();
+  });
+});

web/__test__/screens/CheckoutScreen.test.tsx

@@ -0,0 +1,40 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { describe, expect, it, vi } from "vitest";
+import {  render, screen } from "@testing-library/react";
+import CheckoutScreen from "../../src/screens/CheckoutScreen";
+import React from "react";
+import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router";
+
+const mockedUseNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const mod =
+    await vi.importActual<typeof import("react-router-dom")>(
+      "react-router-dom"
+    );
+  return {
+    ...mod,
+    useNavigate: () => mockedUseNavigate,
+  };
+});
+
+vi.mock("@components/checkout-page/CheckoutError", () => ({
+  default: () => {
+    return <div>CheckoutError</div>;
+  },
+}));
+
+describe("AboutUsScreen", () => {
+
+  it("renders error screen properly", () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <MemoryRouter>
+          <CheckoutScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.getByText("CheckoutError")).toBeInTheDocument();
+  });
+});

web/vitest.config.ts

@@ -14,4 +14,14 @@ export default defineConfig({
       reporter: ["text", "json", "html"],
     },
   },
+  resolve: {
+    alias: {
+      "@utils": "/src/utils",
+      "@components": "/src/components",
+      "@pages": "/src/pages",
+      "@contexts": "/src/contexts",
+      "@layouts": "/src/layouts",
+      "@screens": "/src/screens",
+    },
+  },
 });