Feat/About-Us-Screen

web/__test__/components/ValueCard.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ValueCard from "../../src/components/ValueCard";
+import React from "react";
+import { Value } from "../../src/types/types";
+
+const mockValue: Value = {
+  id: 1,
+  title: "Community",
+  description: "Great sense of community in AUIS",
+  image: "/uploads/community.jpg",
+};
+
+describe("ValueCard", () => {
+  it("renders ValueCard with correct data", () => {
+    render(<ValueCard value={mockValue} />);
+
+    expect(screen.getByAltText("Value Image")).toBeInTheDocument();
+    const valueImage = screen.getByAltText("Value Image");
+    expect(valueImage).toHaveAttribute("src", mockValue.image);
+    expect(screen.getByText("Community")).toBeInTheDocument();
+    expect(
+      screen.getByText("Great sense of community in AUIS")
+    ).toBeInTheDocument();
+  });
+});

web/__test__/screens/AboutUsScreen.test.tsx

@@ -0,0 +1,251 @@
+import { MockedProvider } from "@apollo/client/testing";
+import {
+  GET_INTRODUCTION,
+  GET_VALUES,
+  GET_PARTNERS,
+} from "../../src/graphql/queries";
+import { describe, expect, it } from "vitest";
+import { 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";
+
+// Mock data for GET_INTRODUCTION query
+const introMock = {
+  request: {
+    query: GET_INTRODUCTION,
+  },
+  result: {
+    data: {
+      introductions: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Description: "AUIS is a great club",
+              Events: "30",
+              Members: "500",
+              Followers: "1000",
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const noIntroMock = {
+  request: {
+    query: GET_INTRODUCTION,
+  },
+  result: {
+    data: {
+      introductions: {
+        data: [],
+      },
+    },
+  },
+};
+
+// Mock data for GET_VALUES query
+const valuesMock = {
+  request: {
+    query: GET_VALUES,
+  },
+  result: {
+    data: {
+      values: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Title: "Community",
+              Description: "We believe in a strong community",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/community.jpg",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const noValuesMock = {
+  request: {
+    query: GET_VALUES,
+  },
+  result: {
+    data: {
+      values: {
+        data: [],
+      },
+    },
+  },
+};
+
+// Mock data for GET_PARTNERS query
+const partnersMock = {
+  request: {
+    query: GET_PARTNERS,
+  },
+  result: {
+    data: {
+      partners: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Type: "Gold",
+              Name: "The Kebab and Chicken House",
+              Location: "17 Mount Street",
+              Description: "20% off Everything",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/kebab.jpg",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const noPartnersMock = {
+  request: {
+    query: GET_PARTNERS,
+  },
+  result: {
+    data: {
+      partners: {
+        data: [],
+      },
+    },
+  },
+};
+
+const mocks = [introMock, valuesMock, partnersMock];
+const noDataMocks = [noIntroMock, noValuesMock, noPartnersMock];
+
+describe("AboutUsScreen", () => {
+  it("renders loading spinner initially", () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
+  });
+
+  it("renders error message when query fails", async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_INTRODUCTION,
+        },
+        error: new GraphQLError("Error!"),
+      },
+      {
+        request: {
+          query: GET_VALUES,
+        },
+        error: new GraphQLError("Error!"),
+      },
+      {
+        request: {
+          query: GET_PARTNERS,
+        },
+        error: new GraphQLError("Error!"),
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={errorMocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
+  });
+
+  it("renders introduction correctly", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </MemoryRouter>
+      </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();
+  });
+
+  it("renders values correctly", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </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 () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    const partnerImage = await screen.findByAltText("Partner Image");
+    expect(partnerImage).toHaveAttribute("src", "/uploads/kebab.jpg");
+  });
+
+  it("renders no data from cms", async () => {
+    render(
+      <MockedProvider mocks={noDataMocks} addTypename={false}>
+        <MemoryRouter>
+          <AboutUsScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("There is no introduction to display")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("There is no values to display")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("There is no partners to display")
+    ).toBeInTheDocument();
+  });
+});

web/src/components/Header.tsx

@@ -10,7 +10,7 @@ function Header() {
 
   const titles = [
     { title: "Events", page: "/events" },
-    { title: "About Us", page: "/pvv" },
+    { title: "About Us", page: "/about-us" },
     { title: "Team", page: "/exec" },
     { title: "Partners", page: "/sponsors" },
     { title: "Credits", page: "/credits" },

web/src/components/ValueCard.tsx

@@ -0,0 +1,25 @@
+import { ValueCardProps } from "../types/types";
+
+export default function ValueCard({ value }: ValueCardProps) {
+  return (
+    <>
+      <div className="flex h-auto w-96 flex-col items-center overflow-hidden rounded-3xl bg-transparent">
+        <div className="h-40 w-full">
+          <img
+            src={value.image}
+            alt="Value Image"
+            className="h-full w-full rounded-2xl object-cover"
+          />
+        </div>
+
+        <div className="w-full px-5 py-2 text-center">
+          <h1 className="text-primary-orange text-2xl font-bold">
+            {value.title}
+          </h1>
+
+          <p className="text-md my-2 text-white">{value.description}</p>
+        </div>
+      </div>
+    </>
+  );
+}

web/src/main.tsx

@@ -16,7 +16,7 @@ import TestScreen from "./screens/Test.tsx";
 import ExecScreen from "./screens/ExecScreen.tsx";
 import SignUpScreen from "./screens/SignUpScreen.tsx";
 import PhotosScreen from "./screens/PhotosScreen.tsx";
-import PVVScreen from "./screens/PVVScreen.tsx";
+import AboutUsScreen from "./screens/AboutUsScreen.tsx";
 import { ClerkProvider } from "@clerk/clerk-react";
 import { graphqlClient } from "./graphql/client.ts";
 import CreditsScreen from "./screens/CreditsScreen.tsx";
@@ -33,7 +33,7 @@ const router = createBrowserRouter(
       <Route path="/exec" element={<ExecScreen />} />
       <Route path="/login" element={<SignInScreen />} />
       <Route path="/signup" element={<SignUpScreen />} />
-      <Route path="/pvv" element={<PVVScreen />} />
+      <Route path="/about-us" element={<AboutUsScreen />} />
       <Route path="/events" element={<EventScreen />} />
       <Route path="/photos" element={<PhotosScreen />} />
     </Route>