Feat/Exec-Screen

web/__test__/components/ExecCard.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ExecCard from "../../src/components/ExecCard";
+import React from "react";
+
+const mockExec = {
+	id: 1,
+	image: "/uploads/john_doe.jpg",
+	position: "President",
+	role: "President",
+	name: "Gury Singh",
+	description: "A great leader",
+};
+
+describe("ExecCard", () => {
+	it("renders ExecCard with correct data", () => {
+		render(<ExecCard exec={mockExec} />);
+
+		// Check if the elements are rendered correctly
+		expect(screen.getByAltText("Exec Image")).toBeInTheDocument();
+		const execImage = screen.getByAltText("Exec Image");
+		expect(execImage).toHaveAttribute("src", mockExec.image);
+		expect(screen.getByText("Gury Singh")).toBeInTheDocument();
+		expect(screen.getByText("President")).toBeInTheDocument();
+		expect(screen.getByText("A great leader")).toBeInTheDocument();
+	});
+});

web/__test__/components/PreviousTeamCard.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import PreviousTeamCard from "../../src/components/PreviousTeamCard";
+import React from "react";
+
+const mockTeams = {
+	Presidents: [
+		{
+			id: 1,
+			name: "John Doe",
+			role: "President",
+			year: "2023",
+		},
+		{
+			id: 2,
+			name: "Jane Doe",
+			role: "President",
+			year: "2023",
+		},
+	],
+	Executives: [
+		{
+			id: 3,
+			name: "Jack Smith",
+			role: "Executive",
+			year: "2023",
+		},
+		{
+			id: 4,
+			name: "Jill Brown",
+			role: "Executive",
+			year: "2023",
+		},
+	],
+};
+
+describe("PreviousTeamCard", () => {
+	it("renders PreviousTeamCard with correct data", () => {
+		render(<PreviousTeamCard year="2023" teams={mockTeams} />);
+
+		// Check if the year is rendered correctly
+		expect(screen.getByText("2023")).toBeInTheDocument();
+
+		// Check Presidents
+		expect(screen.getByText("John Doe")).toBeInTheDocument();
+		expect(screen.getByText("Jane Doe")).toBeInTheDocument();
+
+		// Check Executives
+		expect(screen.getByText("Jack Smith")).toBeInTheDocument();
+		expect(screen.getByText("Jill Brown")).toBeInTheDocument();
+	});
+});

web/__test__/screens/ExecScreen.test.tsx

@@ -1,77 +1,164 @@
 import { MockedProvider } from "@apollo/client/testing";
-import { GET_EXECS } from "../../src/graphql/queries";
+import { GET_EXECS, GET_PREVIOUS_TEAMS } from "../../src/graphql/queries";
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import ExecScreen from "../../src/screens/ExecScreen";
 import React from "react";
 import { GraphQLError } from "graphql";
 import "@testing-library/jest-dom";
+import { MemoryRouter } from "react-router";
 
-const mocks = [
-  {
-    request: {
-      query: GET_EXECS,
-    },
-    result: {
-      data: {
-        execs: {
-          data: [
-            {
-              id: 1,
-              attributes: {
-                Name: "Guryash",
-                Description: "A great leader",
-                Position: "President",
-                Role: "Goat",
-                Image: {
-                  data: {
-                    attributes: {
-                      url: "/uploads/john_doe.jpg",
-                    },
+// Mock data for GET_EXECS query
+const execsMock = {
+  request: {
+    query: GET_EXECS,
+  },
+  result: {
+    data: {
+      execs: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Name: "Guryash",
+              Description: "A great leader",
+              Position: "President",
+              Role: "President",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/john_doe.jpg",
                   },
                 },
               },
             },
-          ],
-        },
+          },
+          {
+            id: 2,
+            attributes: {
+              Name: "Jane Doe",
+              Description: "An amazing executive",
+              Position: "People",
+              Role: "Executive",
+              Image: {
+                data: {
+                  attributes: {
+                    url: "/uploads/jane_doe.jpg",
+                  },
+                },
+              },
+            },
+          },
+        ],
       },
     },
   },
-];
+};
 
-describe("Exec Screen", () => {
-  it("renders loading", async () => {
+// Mock data for GET_PREVIOUS_TEAMS query
+const previousTeamsMock = {
+  request: {
+    query: GET_PREVIOUS_TEAMS,
+  },
+  result: {
+    data: {
+      previousTeams: {
+        data: [
+          {
+            id: 1,
+            attributes: {
+              Name: "John Doe",
+              Role: "President",
+              Year: "2023",
+            },
+          },
+          {
+            id: 2,
+            attributes: {
+              Name: "Janet Doe",
+              Role: "Executive",
+              Year: "2023",
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+const mocks = [execsMock, previousTeamsMock];
+
+describe("ExecScreen", () => {
+  it("renders loading spinner initially", () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <ExecScreen />
+        <MemoryRouter>
+          <ExecScreen />
+        </MemoryRouter>
       </MockedProvider>
     );
+
     expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();
   });
 
-  it("renders the mocked data", async () => {
+  it("renders error message when query fails", async () => {
+    const errorMocks = [
+      {
+        request: {
+          query: GET_EXECS,
+        },
+        error: new GraphQLError("Error!"),
+      },
+      {
+        request: {
+          query: GET_PREVIOUS_TEAMS,
+        },
+        error: new GraphQLError("Error!"),
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={errorMocks} addTypename={false}>
+        <MemoryRouter>
+          <ExecScreen />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
+  });
+
+  it("renders current execs correctly", async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>
-        <ExecScreen />
+        <MemoryRouter>
+          <ExecScreen />
+        </MemoryRouter>
       </MockedProvider>
     );
+
     expect(await screen.findByText("Guryash")).toBeInTheDocument();
     expect(await screen.findByText("A great leader")).toBeInTheDocument();
     expect(await screen.findByText("President")).toBeInTheDocument();
-    expect(await screen.findByText("Goat")).toBeInTheDocument();
+    expect(await screen.findByText("Jane Doe")).toBeInTheDocument();
+    expect(await screen.findByText("People")).toBeInTheDocument();
+    expect(await screen.findByText("An amazing executive")).toBeInTheDocument();
   });
-  it("renders error", async () => {
-    const execMock = {
-      request: {
-        query: GET_EXECS,
-      },
-      error: new GraphQLError("Error!"),
-    };
+
+  it("renders previous teams correctly", async () => {
     render(
-      <MockedProvider mocks={[execMock]} addTypename={false}>
-        <ExecScreen />
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <ExecScreen />
+        </MemoryRouter>
       </MockedProvider>
     );
-    expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
+
+    expect(await screen.findByText("Previous Teams")).toBeInTheDocument();
+    expect(await screen.findByText("2023")).toBeInTheDocument();
+    expect(await screen.findByText("Presidents")).toBeInTheDocument();
+    expect(await screen.findByText("John Doe")).toBeInTheDocument();
+    expect(await screen.findByText("Executives")).toBeInTheDocument();
+    expect(await screen.findByText("Janet Doe")).toBeInTheDocument();
   });
 });

web/src/components/ExecCard.tsx

@@ -0,0 +1,22 @@
+import { ExecCardProps } from "../types/types";
+
+export default function ExecCard({ exec }: ExecCardProps) {
+	return (
+		<>
+			<div className="relative w-44 h-60 bg-white rounded-2xl flex flex-col justify-between items-center cursor-pointer overflow-hidden shadow-lg transition-transform transform hover:scale-105">
+				<div className="w-full h-40 rounded-2xl overflow-hidden px-2 pt-2">
+					<img src={exec.image} alt="Exec Image" className="w-full h-full object-cover rounded-xl" />
+				</div>
+
+				<h1 className="font-bold text-xl text-black">{exec.name}</h1>
+				<div className="w-full h-10 flex justify-center items-center bg-primary-orange ">
+					<p className="font-bold text-xl text-white">{exec.position}</p>
+				</div>
+				{/* Description Overlay */}
+				<div className="absolute inset-0 bg-white bg-opacity-95 opacity-0 transition-opacity duration-300 hover:opacity-100 flex items-center justify-center p-4">
+					<p className="text-black text-center">{exec.description}</p>
+				</div>
+			</div>
+		</>
+	);
+}

web/src/components/PreviousTeamCard.tsx

@@ -0,0 +1,38 @@
+import type { PreviousTeamCardProps } from "../types/types";
+
+export default function PreviousTeamCard({ year, teams }: PreviousTeamCardProps) {
+	return (
+		<div
+			key={year}
+			className="my-3 py-2 px-3 md:px-20 w-auto h-auto rounded-3xl relative bg-gradient-to-b from-AUIS-dark-teal to-AUIS-teal"
+		>
+			<h2 className="text-4xl md:text-5xl font-bold text-tertiary-blue mb-3 absolute left-5 md:left-10 top-2 md:top-5">
+				{year}
+			</h2>
+			{teams.Presidents.length > 0 && (
+				<div className="flex flex-col items-center">
+					<h3 className="text-2xl font-bold text-tertiary-blue">Presidents</h3>
+					<div className="flex flex-wrap justify-center mb-5 px-5">
+						{teams.Presidents.map((team) => (
+							<p key={team.id} className="mx-3 my-1 text-lg font-bold text-white">
+								{team.name}
+							</p>
+						))}
+					</div>
+				</div>
+			)}
+			{teams.Executives.length > 0 && (
+				<div className="flex flex-col items-center px-0">
+					<h3 className="text-2xl font-bold text-tertiary-blue">Executives</h3>
+					<div className="w-full grid grid-cols-3 px-2 mx-40 justify-items-center">
+						{teams.Executives.map((team) => (
+							<p key={team.id} className="mx-3 my-1 text-lg font-bold text-white">
+								{team.name}
+							</p>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

web/src/graphql/queries.ts

@@ -117,3 +117,18 @@ export const GET_VALUES = gql`
     }
   }
 `;
+
+export const GET_PREVIOUS_TEAMS = gql`
+  query {
+    previousTeams {
+      data {
+        id
+        attributes {
+          Name
+          Role
+          Year
+        }
+      }
+    }
+  }
+`;