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();
});
});