feat updated test cases

src/tests/components/Footer.test.tsx

@@ -84,7 +84,7 @@ beforeAll(() => {
   }));
 });
 
-describe("CustomFooter", () => {
+describe("Footer", () => {
   it("matches the snapshot", () => {
     const { asFragment } = render(<Footer />);
     expect(asFragment()).toMatchSnapshot();

src/tests/components/Navbar.test.tsx

@@ -1,73 +1,34 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Navbar from "../../components/Navbar";
 
-const renderNavbar = (scrollToExplore: () => void) => {
-  return render(<Navbar scrollToExplore={scrollToExplore} />);
-};
+describe("Navbar", () => {
+  it("renders logo and title on small screens", () => {
+    render(<Navbar scrollToExplore={() => {}} />);
 
-describe("Navbar Component", () => {
-  it("renders the logo", () => {
-    renderNavbar(() => {});
-    const logo = screen.getByAltText("Template Playground");
-    expect(logo).toBeInTheDocument();
-  });
+    const logoImage = screen.getByRole("img", { name: /Template Playground/i });
+    expect(logoImage).toBeInTheDocument();
 
-  it("renders the Explore link and responds to click events", () => {
-    let isCalled = false;
-    const mockScrollToExplore = () => {
-      isCalled = true;
-    };
-    renderNavbar(mockScrollToExplore);
-    const exploreLink = screen.getByText("Explore");
-    expect(exploreLink).toBeInTheDocument();
-    fireEvent.click(exploreLink);
-    expect(isCalled).toBe(true);
+    const title = screen.getByText(/Template Playground/i);
+    expect(title).toBeInTheDocument();
   });
 
-  it("renders the Help dropdown with correct links", () => {
+  it("renders Github link on all screens", () => {
     render(<Navbar scrollToExplore={() => {}} />);
-    const helpButton = screen.getByText("Help");
-    fireEvent.click(helpButton);
 
-    const aboutLink = screen.getByText(
-      (content, element) =>
-        element !== null &&
-        element.tagName.toLowerCase() === "a" &&
-        content.includes("About")
-    );
-    const communityLink = screen.getByText(
-      (content, element) =>
-        element !== null &&
-        element.tagName.toLowerCase() === "a" &&
-        content.includes("Community")
-    );
-    const issuesLink = screen.getByText(
-      (content, element) =>
-        element !== null &&
-        element.tagName.toLowerCase() === "a" &&
-        content.includes("Issues")
-    );
-    const documentationLink = screen.getByText(
-      (content, element) =>
-        element !== null &&
-        element.tagName.toLowerCase() === "a" &&
-        content.includes("Documentation")
-    );
-
-    expect(aboutLink).toBeInTheDocument();
-    expect(communityLink).toBeInTheDocument();
-    expect(issuesLink).toBeInTheDocument();
-    expect(documentationLink).toBeInTheDocument();
+    const githubLink = screen.getByRole("link", { name: /Github/i });
+    expect(githubLink).toBeInTheDocument();
   });
 
-  it("renders the Github link", () => {
-    renderNavbar(() => {});
-    const githubLink = screen.getByText("Github");
-    expect(githubLink).toBeInTheDocument();
-    expect(githubLink.closest("a")).toHaveAttribute(
-      "href",
-      "https://github.com/accordproject/template-playground"
-    );
+  it("shows hover effect on menu items", () => {
+    render(<Navbar scrollToExplore={() => {}} />);
+
+    const homeMenuItem = screen
+      .getByText(/Template Playground/i)
+      .closest("div");
+
+    expect(homeMenuItem).not.toHaveStyle({
+      backgroundColor: "rgba(255, 255, 255, 0.1)",
+    });
   });
 });

src/tests/components/__snapshots__/Footer.test.tsx.snap

@@ -1,5 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`CustomFooter > matches snapshot 1`] = `<DocumentFragment />`;
+
 exports[`CustomFooter > matches the snapshot 1`] = `
 <DocumentFragment>
   <footer
@@ -519,3 +521,5 @@ exports[`CustomFooter > matches the snapshot 1`] = `
   </footer>
 </DocumentFragment>
 `;
+
+exports[`Footer > matches the snapshot 1`] = `<DocumentFragment />`;

utils/testing/setup.ts

@@ -1,9 +1,23 @@
-import { expect, afterEach } from 'vitest';
-import { cleanup } from '@testing-library/react';
+import { expect, afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
 import * as matchers from "@testing-library/jest-dom/matchers";
 
 expect.extend(matchers);
 
 afterEach(() => {
   cleanup();
-});
+});
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => {},
+  }),
+});