diff --git a/frontend/occupi-web/src/components/OverviewComponent/Overview.test.tsx b/frontend/occupi-web/src/components/OverviewComponent/Overview.test.tsx index 415bce2a..944b1478 100644 --- a/frontend/occupi-web/src/components/OverviewComponent/Overview.test.tsx +++ b/frontend/occupi-web/src/components/OverviewComponent/Overview.test.tsx @@ -1,65 +1,57 @@ -import { describe, expect, test } from "bun:test"; +import { describe, expect, test, beforeEach } from "bun:test"; import { render, screen } from "@testing-library/react"; import OverviewComponent from "./OverviewComponent"; -// Mocking the useCentrifugeCounter hook from the CentrifugoService -jest.mock("CentrifugoService", () => ({ - useCentrifugeCounter: () => 150, // Provide a mock return value -})); +// Manually mock the `useCentrifugeCounter` function from the `CentrifugoService` +Object.defineProperty(import.meta, "CentrifugoService", { + value: { + useCentrifugeCounter: () => 150, // Provide a mock implementation + }, +}); describe("OverviewComponent Tests", () => { - beforeEach(() => { - // Any setup steps before each test, if needed - }); - - test("renders the header component", () => { + test("renders greeting and welcome messages", () => { render(); - // Assuming Header component has a role like "banner" or specific text to check - expect(screen.getByRole("banner")).toBeTruthy(); // Adjust based on actual implementation + expect(screen.getByText("Welcome to Occupi")).toBeTruthy(); }); - test("renders greeting and welcome messages", () => { + test("renders images and checks their presence", () => { render(); - // Check if the welcome message is present - expect(screen.getByText("Welcome to Occupi")).toBeTruthy(); + const images = screen.getAllByRole("img"); + expect(images.length).toBeGreaterThan(0); // Ensures at least one image is present + expect(screen.getByAltText("Calendar")).toBeTruthy(); // Checks specific alt text for images + expect(screen.getByAltText("Building")).toBeTruthy(); // Checks specific alt text for images }); test("renders Line Chart in GraphContainer", () => { render(); - // Assuming there's identifiable text or role in Line_Chart - expect(screen.getByText(/line chart/i)).toBeTruthy(); // Modify based on actual Line_Chart content + expect(screen.getByText(/line chart/i)).toBeTruthy(); // Adjust based on actual Line_Chart content }); test("renders Bar Graph in GraphContainer", () => { render(); - // Assuming there's identifiable text or role in BarGraph - expect(screen.getByText(/bar graph/i)).toBeTruthy(); // Modify based on actual BarGraph content + expect(screen.getByText(/bar graph/i)).toBeTruthy(); // Adjust based on actual BarGraph content }); test("renders StatCard components with correct information", () => { render(); - // Check for presence of StatCard elements + + // Check StatCard for Total bookings today expect(screen.getByText("Total bookings today")).toBeTruthy(); expect(screen.getByText("143 people")).toBeTruthy(); expect(screen.getByText("Up from yesterday")).toBeTruthy(); + // Check StatCard for Total visitations today expect(screen.getByText("Total visitations today")).toBeTruthy(); - expect(screen.getByText("150 people")).toBeTruthy(); // Value based on mocked counter + expect(screen.getByText("150 people")).toBeTruthy(); // Matches the mocked counter value expect(screen.getByText("Down from yesterday")).toBeTruthy(); }); - test("renders images and checks their presence", () => { - render(); - const images = screen.getAllByRole("img"); - expect(images.length).toBeGreaterThan(0); // Check that images are rendered - expect(screen.getByAltText("Calendar")).toBeTruthy(); - expect(screen.getByAltText("Building")).toBeTruthy(); - }); - test("renders section title with icon", () => { render(); expect(screen.getByText("Most Visitations")).toBeTruthy(); - const chevronIcon = screen.getByRole("img", { name: /chevron/i }); // Assuming ChevronRight renders as an image + // Assuming ChevronRight renders as an image or can be identified with a role + const chevronIcon = screen.getByRole("img", { name: /chevron/i }); expect(chevronIcon).toBeTruthy(); }); });