test: stabilize suites and registration CTA

Author: Jordan231111

__tests__/__mocks__/mockRegistry.tsx

@@ -17,9 +17,15 @@ import extendedMocks from "./extendedMocks";
  */
 export const MockRegistrationLink = ({ className }: { className?: string }) => {
 	return (
-		<div data-testid="registration-link" className={className} role="link" aria-label="Registration Link">
-			Registration Link
-		</div>
+		<a
+			data-testid="registration-link"
+			className={className}
+			href="https://hackrpi2025.devpost.com/"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Register Here!
+		</a>
 	);
 };
 

__tests__/components/about-us.test.tsx

@@ -25,10 +25,16 @@ jest.mock("next/navigation", () => ({
 jest.mock("@/components/themed-components/registration-link", () => {
 	return {
 		__esModule: true,
-		default: ({ children, className }: { children?: React.ReactNode; className?: string }) => (
-			<div data-testid="registration-link" className={className} role="link" aria-label="Registration Link">
-				{children || "Registration Link"}
-			</div>
+		default: ({ className }: { className?: string }) => (
+			<a
+				data-testid="registration-link"
+				href="https://hackrpi2025.devpost.com/"
+				target="_blank"
+				rel="noopener noreferrer"
+				className={className}
+			>
+				Register Here!
+			</a>
 		),
 	};
 });
@@ -110,19 +116,16 @@ describe("AboutUs Component", () => {
 	});
 
 	it("renders the registration link with correct styling", () => {
-		// 2025 best practice: Render the component and get the container
 		const { container } = renderWithProviders(<AboutUs />);
 
-		// 2025 best practice: Use data-testid for more reliable selection
-		const registrationLink = screen.getByTestId("registration-link");
+		const registrationLink = screen.getByRole("link", { name: /register here!/i });
 		expect(registrationLink).toBeInTheDocument();
 		expect(registrationLink).toHaveClass("text-xl");
+		expect(registrationLink).toHaveAttribute("href", "https://hackrpi2025.devpost.com/");
 
-		// 2025 best practice: Find the REGISTER NOW text using a pattern
 		const registerNowText = screen.getByText(/REGISTER NOW!/i);
 		expect(registerNowText).toBeInTheDocument();
 
-		// Verify they are both in the document but don't assert they're in the same container
 		expect(container).toContainElement(registrationLink);
 		expect(container).toContainElement(registerNowText);
 	});
@@ -137,7 +140,7 @@ describe("AboutUs Component", () => {
 
 		// Check styling directly on the element with data-testid
 		expect(registerBanner).toHaveClass("bg-hackrpi-secondary-orange");
-		expect(registerBanner).toHaveClass("text-black");
+		expect(registerBanner).toHaveClass("text-white");
 		expect(registerBanner).toHaveClass("overflow-hidden");
 		expect(registerBanner).toHaveClass("whitespace-nowrap");
 	});
@@ -187,7 +190,7 @@ describe("AboutUs Component", () => {
 
 		// Check that key elements are still visible on mobile
 		expect(screen.getByRole("heading", { name: /About HackRPI/i })).toBeInTheDocument();
-		expect(screen.getByTestId("registration-link")).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: /register here!/i })).toBeInTheDocument();
 
 		// Clean up mobile test and set up desktop test
 		cleanup();
@@ -197,7 +200,7 @@ describe("AboutUs Component", () => {
 
 		// Verify desktop layout elements
 		expect(screen.getByRole("heading", { name: /About HackRPI/i })).toBeInTheDocument();
-		expect(screen.getByTestId("registration-link")).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: /register here!/i })).toBeInTheDocument();
 	});
 
 	// 2025 Best Practice: Add automated accessibility testing

__tests__/components/event.test.tsx

@@ -61,7 +61,7 @@ jest.mock("next/image", () => ({
 }));
 
 // Import the component after all mocks are defined
-import EventPage from "@/app/event/page";
+import EventPage from "@/app/(with-layout)/event/page";
 
 describe("Event Page", () => {
 	beforeEach(() => {
@@ -71,11 +71,9 @@ describe("Event Page", () => {
 	it("renders the main layout components", () => {
 		render(<EventPage />);
 
-		// Check if the navbar component is rendered
-		expect(screen.getByTestId("nav-bar")).toBeInTheDocument();
-
-		// Note: Footer is imported but not actually used in the component
-		// so we should not expect it in the test
+		// Verify key structural headings render
+		expect(screen.getByText("Location:")).toBeInTheDocument();
+		expect(screen.getByText("Need Help?")).toBeInTheDocument();
 	});
 
 	it("renders the map component", () => {

__tests__/components/faq.test.tsx

@@ -8,10 +8,16 @@ import "@testing-library/jest-dom";
 jest.mock("@/components/themed-components/registration-link", () => {
 	return {
 		__esModule: true,
-		default: ({ children, className }: { children?: React.ReactNode; className?: string }) => (
-			<div data-testid="registration-link" className={className} role="link" aria-label="Registration Link">
-				{children || "Registration Link"}
-			</div>
+		default: ({ className }: { className?: string }) => (
+			<a
+				data-testid="registration-link"
+				href="https://hackrpi2025.devpost.com/"
+				target="_blank"
+				rel="noopener noreferrer"
+				className={className}
+			>
+				Register Here!
+			</a>
 		),
 	};
 });
@@ -95,8 +101,9 @@ describe("FAQ Component", () => {
 		fireEvent.click(registrationFAQ);
 
 		// Check if the registration link is rendered
-		const registrationLink = screen.getByTestId("registration-link");
+		const registrationLink = screen.getByRole("link", { name: /register here!/i });
 		expect(registrationLink).toBeInTheDocument();
+		expect(registrationLink).toHaveAttribute("href", "https://hackrpi2025.devpost.com/");
 	});
 
 	it("renders the contact information at the bottom", () => {

__tests__/components/footer.test.tsx

@@ -11,8 +11,8 @@ jest.mock("next/image", () => ({
 }));
 
 // Mock logo import
-jest.mock("@/public/HackRPI_Logo_Yellow_Arrow.png", () => ({
-	default: "mock-logo-path",
+jest.mock("@/public/Retro_HackRPI_Logo.png", () => ({
+	default: "mock-retro-logo",
 }));
 
 jest.mock("@/components/socials-links/social-links", () => {
@@ -24,9 +24,15 @@ jest.mock("@/components/socials-links/social-links", () => {
 jest.mock("@/components/themed-components/registration-link", () => {
 	return function MockRegistrationLink({ className }: { className?: string }) {
 		return (
-			<div data-testid="registration-link" className={className}>
-				Registration Link
-			</div>
+			<a
+				data-testid="registration-link"
+				className={className}
+				href="https://hackrpi2025.devpost.com/"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Register Here!
+			</a>
 		);
 	};
 });
@@ -72,6 +78,7 @@ describe("Footer Component", () => {
 		expect(registrationLink).toBeInTheDocument();
 		expect(registrationLink).toHaveClass("text-xl");
 		expect(registrationLink).toHaveClass("mb-4");
+		expect(registrationLink).toHaveAttribute("href", "https://hackrpi2025.devpost.com/");
 	});
 
 	it("renders the social links", () => {

__tests__/components/last-year.test.tsx

@@ -80,6 +80,23 @@ jest.mock("@/components/themed-components/hackrpi-link", () => {
 	};
 });
 
+jest.mock("@/components/prev-projects/LastYearCollage", () => {
+	return function MockLastYearCollage() {
+		return (
+			<div data-testid="photo-gallery">
+				{Array.from({ length: 12 }).map((_, index) => (
+					<img
+						key={index}
+						data-testid="mock-image"
+						src={`/lastYearPhotos/photo-${index + 1}.jpg`}
+						alt={`HackRPI XI Photo ${index + 1}`}
+					/>
+				))}
+			</div>
+		);
+	};
+});
+
 jest.mock("next/image", () => ({
 	__esModule: true,
 	default: (props: any) => {
@@ -88,7 +105,7 @@ jest.mock("next/image", () => ({
 }));
 
 // Import the component after all mocks are defined
-import PastYearProjects from "@/app/last-year/page";
+import PastYearProjects from "@/app/(with-layout)/last-year/page";
 
 describe("Last Year Projects Page", () => {
 	beforeEach(() => {

__tests__/components/nav-bar.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { render, screen, cleanup } from "@testing-library/react";
-import NavBar from "@/components/nav-bar/nav-bar";
+import NavBar, { links as navLinks } from "@/components/nav-bar/nav-bar";
 import { renderWithProviders, resetAllMocks, setWindowDimensions } from "../test-utils";
 
 /**
@@ -42,29 +42,6 @@ jest.mock("@/data/nav-bar-links", () => {
 	};
 });
 
-// Mock the links directly in the NavBar component
-jest.mock("@/components/nav-bar/nav-bar", () => {
-	const originalModule = jest.requireActual("@/components/nav-bar/nav-bar");
-	return {
-		__esModule: true,
-		...originalModule,
-		links: [
-			{
-				name: "Home",
-				links: [
-					{ href: "/", children: "Home" },
-					{ href: "/#about", children: "About" },
-				],
-			},
-			{
-				name: "HackRPI XI",
-				links: [{ href: "/last-year#winners", children: "Winners" }],
-			},
-		],
-		default: originalModule.default,
-	};
-});
-
 // Mock MLH Banner
 jest.mock("@/components/mlh-banner/mlh-banner", () => {
 	return function MockMlhBanner() {
@@ -134,9 +111,10 @@ describe("NavBar Component", () => {
 		// Act - Render the component
 		renderWithProviders(<NavBar showOnScroll={true} />);
 
-		// Assert - Check if links are passed correctly - we expect 2 links based on our mock
+	// Assert - Check if links are passed correctly based on the exported navigation data
 		const mobileNav = screen.getByTestId("nav-bar-mobile");
-		expect(mobileNav.textContent).toContain("2 links");
+		const expectedCount = navLinks.length;
+		expect(mobileNav.textContent).toContain(`${expectedCount} links`);
 
 		// Clean up before rendering again
 		cleanup();
@@ -146,7 +124,7 @@ describe("NavBar Component", () => {
 		renderWithProviders(<NavBar showOnScroll={true} />);
 
 		const desktopNav = screen.getByTestId("nav-bar-desktop");
-		expect(desktopNav.textContent).toContain("2 links");
+		expect(desktopNav.textContent).toContain(`${expectedCount} links`);
 	});
 
 	it("should handle showOnScroll prop correctly", async () => {

__tests__/components/nav-bar/desktop/nav-bar-desktop.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 // Mock the image imports
-jest.mock("@/public/HackRPI_Logo_Yellow_Arrow.png", () => "logo-image-stub");
+jest.mock("@/public/Retro_HackRPI_Logo.png", () => "logo-image-stub");
 jest.mock("next/image", () => ({
 	__esModule: true,
 	default: (props: any) => {
@@ -12,11 +12,6 @@ jest.mock("next/image", () => ({
 }));
 
 // Mock the registration button
-jest.mock("@/components/themed-components/registration-link", () => ({
-	__esModule: true,
-	default: () => <div data-testid="registration-button">Register Now</div>,
-}));
-
 // Mock NavGroupComponent
 jest.mock("@/components/nav-bar/desktop/nav-group", () => ({
 	__esModule: true,
@@ -70,19 +65,14 @@ describe("DesktopNavBar Component", () => {
 
 		// Check direct links
 		expect(screen.getByText("Sponsor Us")).toBeInTheDocument();
-		expect(screen.getByText("Event Info")).toBeInTheDocument();
-		expect(screen.getByText("Schedule")).toBeInTheDocument();
-		expect(screen.getByText("Announcements")).toBeInTheDocument();
-		expect(screen.getByText("Prizes")).toBeInTheDocument();
-		expect(screen.getByText("2048 Leaderboard")).toBeInTheDocument();
 		expect(screen.getByText("Code of Conduct")).toBeInTheDocument();
 	});
 
-	it("includes registration button", () => {
+	it("includes registration link", () => {
 		render(<DesktopNavBar links={mockLinks} />);
 
-		// Check for the registration button
-		expect(screen.getByTestId("registration-button")).toBeInTheDocument();
+		const registerLink = screen.getByRole("link", { name: /register/i });
+		expect(registerLink).toHaveAttribute("href", "https://hackrpi2025.devpost.com/");
 	});
 
 	it("applies correct styling to the navbar", () => {

__tests__/components/resources.test.tsx

@@ -46,7 +46,7 @@ jest.mock("next/image", () => ({
 }));
 
 // Import the component after all mocks are defined
-import ResourcesPage from "@/app/resources/page";
+import ResourcesPage from "@/app/(with-layout)/resources/page";
 
 describe("Resources Page", () => {
 	beforeEach(() => {
@@ -56,9 +56,9 @@ describe("Resources Page", () => {
 	it("renders the main layout components", () => {
 		render(<ResourcesPage />);
 
-		// Check if the main structural components are rendered
-		expect(screen.getByTestId("nav-bar")).toBeInTheDocument();
-		// Footer is imported but not actually used in the component
+		// Verify primary headings render
+		expect(screen.getByText("Web Development")).toBeInTheDocument();
+		expect(screen.getByText("Submitting Your Project")).toBeInTheDocument();
 	});
 
 	it("renders all resource section headings", () => {

__tests__/integration/navigation.test.tsx

@@ -3,15 +3,15 @@
  */
 import React from "react";
 import { screen, within, act } from "@testing-library/react";
-import Home from "@/app/page";
+import Home from "@/app/(without-layout)/page";
 import {
 	renderWithProviders,
 	resetAllMocks,
 	mockHomePageElements,
 	mockScrollIntoView,
 	checkNavigationAccessibility,
 } from "../test-utils";
-import { MockIntersectionObserver, MockFooter } from "../__mocks__/mockRegistry";
+import { MockIntersectionObserver } from "../__mocks__/mockRegistry";
 import "@testing-library/jest-dom";
 import { fireEvent } from "@testing-library/react";
 
@@ -25,6 +25,14 @@ function MockTitle({ children }: { children: React.ReactNode }) {
 	);
 }
 
+function MockFooterComponent() {
+	return (
+		<div data-testid="mock-footer" role="contentinfo">
+			Footer Component
+		</div>
+	);
+}
+
 // 2025 Best Practice: More organized setup with clear purpose
 const mockHandleFAQClick = jest.fn();
 const mockHandleAboutClick = jest.fn();
@@ -125,7 +133,7 @@ jest.mock("@/components/sponsors", () => {
 // Use centralized mock registry for Footer
 jest.mock("@/components/footer/footer", () => ({
 	__esModule: true,
-	default: MockFooter,
+	default: MockFooterComponent,
 }));
 
 jest.mock("@/components/faq/faq", () => {