UADS-63/test/Test-Cases

.github/workflows/build.yml

@@ -26,7 +26,7 @@ jobs:
         run: yarn
 
       - name: Run Test Cases
-        run: yarn test
+        run: yarn coverage
 
       - name: Build the Project
         run: yarn build

web/package.json

@@ -8,7 +8,8 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "vitest run --coverage"
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.1",

web/src/components/ExecCard.tsx

@@ -12,6 +12,7 @@ export default function ExecCard({ exec }: ExecCardProps) {
 					backgroundSize: "cover",
 					backgroundPosition: "center",
 				}}
+				data-testid="execCard"
 			>
 				<div className="w-full h-full flex flex-col justify-center items-center text-center rounded-3xl bg-black bg-opacity-50 opacity-0 hover:opacity-100 hover:rounded-3xl transition-opacity duration-300">
 					<h2 className="font-bold text-light-pink">{role}</h2>

web/src/components/Socials.tsx

@@ -4,14 +4,15 @@ import { IoMdMail } from "react-icons/io";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { SocialType, SocialsProps } from "../utils/FrontendTypes";
+import apiURL from "../utils/urls";
 
 export default function Socials({ background, hoverBackground, iconColor, hoverIconColor }: SocialsProps) {
 	const [socials, setSocials] = useState<SocialType[]>([]);
 
 	useEffect(() => {
 		async function fetchSocials() {
 			try {
-				const response = await axios.get("http://localhost:4000/api/socials/");
+				const response = await axios.get(`${apiURL}/api/socials/`);
 				setSocials(response.data);
 			} catch (error) {
 				console.error("Error fetching social data", error);

web/src/components/__tests__/EventCard.test.tsx

@@ -4,20 +4,124 @@ import EventCard from "../EventCard";
 import eventBackground from "../../assets/event.jpg";
 import { EventType } from "../../utils/FrontendTypes";
 
-describe("Event Card Component", () => {
-	const event: EventType = {
+// Gets the current date
+const currentDate = new Date().toISOString().split("T")[0];
+
+const events: EventType[] = [
+	{
 		name: "Event 1",
-		date: "2024-01-01",
+		date: "2024-01-01", // Past Event
 		description: "Event 1 Description",
 		image: eventBackground,
-	};
+	},
+	{
+		name: "Event 2",
+		date: "2099-12-30", // Upcoming Event
+		description: "Event 2 Description",
+		image: eventBackground,
+	},
+	{
+		name: "Event 3",
+		date: currentDate, // Event Today
+		description: "Event 3 Description",
+		image: eventBackground,
+	},
+	{
+		name: "", // Missing Name
+		date: "2024-01-01",
+		description: "Missing Name Event Description",
+		image: eventBackground,
+	},
+	{
+		name: "Event 5",
+		date: "", // Missing Date
+		description: "Missing Date Event Description",
+		image: eventBackground,
+	},
+	{
+		name: "Event 6",
+		date: "2024-01-01",
+		description: "", // Missing Description
+		image: eventBackground,
+	},
+	{
+		name: "Event 7",
+		date: "2024-01-01",
+		description: "Missing Image Event Description",
+		image: "", // Missing Image
+	},
+];
 
+describe("Event Card Component", () => {
 	it("Renders the EventCard component with correct details", () => {
-		render(<EventCard event={event} />);
+		render(<EventCard event={events[0]} />);
 
 		expect(screen.getByText("1")).toBeInTheDocument();
 		expect(screen.getByText("January")).toBeInTheDocument();
 		expect(screen.getByText("Event 1")).toBeInTheDocument();
 		expect(screen.getByText("Event 1 Description")).toBeInTheDocument();
 	});
+
+	it("Displays 'Passed' status for a past event", () => {
+		render(<EventCard event={events[0]} />);
+
+		expect(screen.getByText("Passed")).toBeInTheDocument();
+	});
+
+	it("Displays 'Upcoming Event' status for an upcoming event", () => {
+		render(<EventCard event={events[1]} />);
+
+		expect(screen.getByText("Upcoming Event")).toBeInTheDocument();
+	});
+
+	it("Displays 'Happening Today' status for an event happening today", () => {
+		const currentYear = new Date().getFullYear();
+		const currentMonthNumber = new Date().toLocaleString("default", { month: "2-digit" });
+		const currentMonth = new Date().toLocaleString("default", { month: "long" });
+		const currentDay = new Date().getDate().toString();
+
+		const newDate = `${currentYear}-${currentMonthNumber}-${currentDay}`;
+		events[2].date = newDate;
+
+		render(<EventCard event={events[2]} />);
+
+		expect(screen.getByText("Happening Today")).toBeInTheDocument();
+		expect(screen.getByText("Event 3")).toBeInTheDocument();
+		expect(screen.getByText("Event 3 Description")).toBeInTheDocument();
+		expect(screen.getByText(currentMonth)).toBeInTheDocument();
+		expect(screen.getByText(currentDay)).toBeInTheDocument();
+	});
+
+	it("Missing name for an event is not rendered", () => {
+		render(<EventCard event={events[3]} />);
+
+		expect(screen.getByText("Missing Name Event Description")).toBeInTheDocument();
+		expect(screen.queryByText("Event 4")).not.toBeInTheDocument();
+	});
+
+	it("Missing date for an event is not rendered", () => {
+		render(<EventCard event={events[4]} />);
+
+		expect(screen.getByText("Event 5")).toBeInTheDocument();
+		expect(screen.getByText("Missing Date Event Description")).toBeInTheDocument();
+		expect(screen.getByText("Invalid Date")).toBeInTheDocument();
+		expect(screen.queryByText("January")).not.toBeInTheDocument();
+	});
+
+	it("Missing description for an event is not rendered", () => {
+		render(<EventCard event={events[5]} />);
+
+		expect(screen.getByText("Event 6")).toBeInTheDocument();
+		expect(screen.queryByText("Event 6 Description")).not.toBeInTheDocument();
+	});
+
+	it("Missing image for an event is not rendered", () => {
+		render(<EventCard event={events[6]} />);
+
+		expect(screen.getByText("Event 7")).toBeInTheDocument();
+		expect(screen.getByText("Missing Image Event Description")).toBeInTheDocument();
+		const imageElement = screen.getByAltText("Background Image");
+		expect(imageElement).toBeInTheDocument();
+		expect(imageElement).toHaveAttribute("src", "");
+	});
 });

web/src/components/__tests__/ExecCard.test.tsx

@@ -1,20 +1,74 @@
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import ExecCard from "../ExecCard";
-import execImage from "../../assets/placeholder.png"
+import execImage from "../../assets/placeholder.png";
 import { ExecType } from "../../utils/FrontendTypes";
 
-describe("Exec Card Component", () => {
-	const exec: ExecType = {
-		name: "Kai Hirafune",
+const execs: ExecType[] = [
+	{
+		name: "Exec 1",
 		role: "President",
-    image: execImage
-	};
-
-    it("Renders the ExecCard component with correct name and role", () => {
-        render(<ExecCard exec={exec} />);
-
-        expect(screen.getByText("Kai Hirafune")).toBeInTheDocument();
-        expect(screen.getByText("President")).toBeInTheDocument();
-      });
+		image: execImage,
+	},
+	{
+		name: "", // Missing Name
+		role: "Vice-President",
+		image: execImage,
+	},
+	{
+		name: "Exec 3",
+		role: "", // Missing Role
+		image: execImage,
+	},
+	{
+		name: "Exec 4",
+		role: "Treasurer",
+		image: "", // Missing Image
+	},
+];
+
+describe("Exec Card Component", () => {
+	it("Renders the ExecCard component with correct name, role and image", () => {
+		render(<ExecCard exec={execs[0]} />);
+
+		expect(screen.getByText("Exec 1")).toBeInTheDocument();
+		expect(screen.getByText("President")).toBeInTheDocument();
+
+		// Check if background image is correctly applied
+		const cardElement = screen.getByTestId("execCard");
+		expect(cardElement).toHaveStyle(`backgroundImage: url(${execs[0].image})`);
+	});
+
+	it("Missing name for exec is not rendered", () => {
+		render(<ExecCard exec={execs[1]} />);
+
+		expect(screen.queryByText("Exec 2")).not.toBeInTheDocument();
+		expect(screen.getByText("Vice-President")).toBeInTheDocument();
+
+		// Check if background image is correctly applied
+		const cardElement = screen.getByTestId("execCard");
+		expect(cardElement).toHaveStyle(`backgroundImage: url(${execs[1].image})`);
+	});
+
+	it("Missing role for exec is not rendered", () => {
+		render(<ExecCard exec={execs[2]} />);
+
+		expect(screen.queryByText("Exec 3 Role")).not.toBeInTheDocument();
+		expect(screen.getByText("Exec 3")).toBeInTheDocument();
+
+		// Check if background image is correctly applied
+		const cardElement = screen.getByTestId("execCard");
+		expect(cardElement).toHaveStyle(`backgroundImage: url(${execs[2].image})`);
+	});
+
+	it("Missing image for exec is not rendered", () => {
+		render(<ExecCard exec={execs[3]} />);
+
+		expect(screen.getByText("Exec 4")).toBeInTheDocument();
+		expect(screen.getByText("Treasurer")).toBeInTheDocument();
+
+		// Check if background image is not present and url is empty
+		const cardElement = screen.getByTestId("execCard");
+		expect(cardElement).toHaveStyle(`backgroundImage: url(${execs[3].image})`);
+	});
 });

web/src/components/__tests__/Socials.test.tsx

@@ -1,13 +1,14 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import Socials from "../Socials";
+import { SocialType } from "../../utils/FrontendTypes";
 import "@testing-library/jest-dom";
 import axios from "axios";
 import { vi } from "vitest";
 
 vi.mock("axios");
 
-const mockSocials = [
+const mockSocials: SocialType[] = [
 	{ name: "Facebook", link: "https://www.facebook.com/uoadessertsociety" },
 	{ name: "Instagram", link: "https://www.instagram.com/uoadessertsociety/" },
 	{ name: "Discord", link: "https://discord.gg/dFuwHuU8FT" },

web/src/components/__tests__/SponsorCard.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import SponsorCard from "../SponsorCard";
+import placeholder from "../../assets/placeholder.png";
+import { SponsorType } from "../../utils/FrontendTypes";
+
+const sponsors: SponsorType[] = [
+	{
+		name: "Sponsor 1",
+		description: "Sponsor 1 Description",
+		image: placeholder,
+	},
+	{
+		name: "", // Missing Name
+		description: "Sponsor 2 Description",
+		image: placeholder,
+	},
+	{
+		name: "Sponsor 3",
+		description: "", // Missing Description
+		image: placeholder,
+	},
+];
+
+describe("Sponsor Card Component", () => {
+	it("Renders the SponsorCard component with correct details", () => {
+		render(<SponsorCard sponsor={sponsors[0]} />);
+
+		expect(screen.getByText("Sponsor 1")).toBeInTheDocument();
+		expect(screen.getByText("Sponsor 1 Description")).toBeInTheDocument();
+	});
+
+    it("Missing name for a sponsor is not rendered", () => {
+		render(<SponsorCard sponsor={sponsors[1]} />);
+
+		expect(screen.queryByText("Sponsor 2")).not.toBeInTheDocument();
+		expect(screen.getByText("Sponsor 2 Description")).toBeInTheDocument();
+	});
+
+    it("Missing name for a sponsor is not rendered", () => {
+		render(<SponsorCard sponsor={sponsors[2]} />);
+
+		expect(screen.getByText("Sponsor 3")).toBeInTheDocument();
+		expect(screen.queryByText("Sponsor 3 Description")).not.toBeInTheDocument();
+	});
+});

web/src/pages/About.tsx

@@ -5,14 +5,15 @@ import ExecCard from "../components/ExecCard";
 import { useState, useEffect } from "react";
 import axios from "axios";
 import { ExecType } from "../utils/FrontendTypes";
+import apiURL from "../utils/urls";
 
 export default function About() {
 	const [execs, setExecs] = useState<ExecType[]>([]);
 
 	useEffect(() => {
 		async function fetchExecs() {
 			try {
-				const response = await axios.get("http://localhost:4000/api/execs/");
+				const response = await axios.get(`${apiURL}/api/execs/`);
 				setExecs(response.data);
 			} catch (error) {
 				console.error("Error fetching exec data", error);

web/src/pages/Event.tsx

@@ -5,6 +5,7 @@ import cupcake from "../assets/cupcake.svg";
 import EventCard from "../components/EventCard";
 import axios from "axios";
 import { EventType } from "../utils/FrontendTypes";
+import apiURL from "../utils/urls";
 
 export default function Event() {
 	const [searchQuery, setSearchQuery] = useState("");
@@ -14,7 +15,7 @@ export default function Event() {
 	useEffect(() => {
 		async function fetchEvents() {
 			try {
-				const response = await axios.get("http://localhost:4000/api/events/");
+				const response = await axios.get(`${apiURL}/api/events/`);
 				setEvents(response.data);
 				setDisplayedEvents(response.data);
 			} catch (error) {
@@ -40,10 +41,7 @@ export default function Event() {
 			<div className="max-w-screen h-auto bg-light-pink py-8 px-4 sm:px-8">
 				<div className="w-full h-auto mb-10 flex flex-col">
 					<div className="flex justify-between items-center">
-						<h1
-							className="text-3xl sm:text-4xl md:text-5xl font-bold font-raleway text-brown"
-							data-testid="eventsTitle"
-						>
+						<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold font-raleway text-brown" data-testid="eventsTitle">
 							Events
 						</h1>
 
@@ -71,9 +69,7 @@ export default function Event() {
 							</div>
 						))
 					) : (
-						<p className="text-2xl sm:text-3xl text-black font-bold">
-							Sorry, no events found for "{searchQuery}"
-						</p>
+						<p className="text-2xl sm:text-3xl text-black font-bold">Sorry, no events found for "{searchQuery}"</p>
 					)}
 				</div>
 			</div>