From e105e76f9eb2703b0827a44de334c530b2bea436 Mon Sep 17 00:00:00 2001 From: lenhanphung Date: Thu, 25 Sep 2025 17:33:58 +0700 Subject: [PATCH] fix: update test cases for Menubar and Calendar components - Update Menubar test cases to match component changes (logo instead of text) - Add required currentView prop to all Menubar test cases - Fix Calendar test cases by adding calendarRef wrapper component - Convert babel.config.ts to babel.config.js for Node.js 24 compatibility - All 146 tests now pass successfully --- __test__/components/Calendar.test.tsx | 11 ++++++++-- __test__/components/Menubar.test.tsx | 30 ++++++++++++++++++++------- babel.config.ts => babel.config.js | 0 3 files changed, 32 insertions(+), 9 deletions(-) rename babel.config.ts => babel.config.js (100%) diff --git a/__test__/components/Calendar.test.tsx b/__test__/components/Calendar.test.tsx index d60e93a..8417c68 100644 --- a/__test__/components/Calendar.test.tsx +++ b/__test__/components/Calendar.test.tsx @@ -3,6 +3,7 @@ import CalendarApp from "../../src/components/Calendar/Calendar"; import * as eventThunks from "../../src/features/Calendars/CalendarSlice"; import { renderWithProviders } from "../utils/Renderwithproviders"; import { searchUsers } from "../../src/features/User/userAPI"; +import { useRef } from "react"; import userEvent from "@testing-library/user-event"; jest.mock("../../src/features/User/userAPI"); @@ -10,6 +11,12 @@ const mockedSearchUsers = searchUsers as jest.MockedFunction< typeof searchUsers >; +// Test wrapper component to provide calendarRef +function CalendarTestWrapper() { + const calendarRef = useRef(null); + return ; +} + describe("CalendarSelection", () => { const today = new Date(); const start = new Date(today); @@ -208,7 +215,7 @@ describe("calendar Availability search", () => { }, ]); - renderWithProviders(, preloadedState); + renderWithProviders(, preloadedState); const input = screen.getByPlaceholderText(/search user/i); userEvent.type(input, "New"); @@ -233,7 +240,7 @@ describe("calendar Availability search", () => { .mockImplementation((payload) => { return () => Promise.resolve(payload) as any; }); - renderWithProviders(, preloadedState); + renderWithProviders(, preloadedState); const input = screen.getByPlaceholderText(/search user/i); userEvent.type(input, "Alice"); diff --git a/__test__/components/Menubar.test.tsx b/__test__/components/Menubar.test.tsx index 2e7ffe7..e0c06f4 100644 --- a/__test__/components/Menubar.test.tsx +++ b/__test__/components/Menubar.test.tsx @@ -30,11 +30,12 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); - const navbarElement = screen.getByText("Twake"); - expect(navbarElement).toBeInTheDocument(); + const logoElement = screen.getByAltText("Calendar"); + expect(logoElement).toBeInTheDocument(); }); it("renders the main title", () => { (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; @@ -47,11 +48,11 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); - expect(screen.getByText(/Twake/i)).toBeInTheDocument(); - expect(screen.getByText(/Calendar/i)).toBeInTheDocument(); + expect(screen.getByAltText("Calendar")).toBeInTheDocument(); }); it("shows avatar with user initials", () => { @@ -65,6 +66,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -93,6 +95,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -123,6 +126,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -152,6 +156,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -181,6 +186,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -210,6 +216,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -239,6 +246,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -270,6 +278,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -301,6 +310,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -320,6 +330,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -327,7 +338,10 @@ describe("Calendar App Component Display Tests", () => { }); it("opens popover when clicking AppsIcon", () => { - (window as any).appList = [{ name: "test", icon: "test", link: "test" }]; + (window as any).appList = [ + { name: "Twake", icon: "twake.svg", link: "/twake" }, + { name: "Calendar", icon: "calendar.svg", link: "/calendar" } + ]; const mockCalendarRef = { current: null }; const mockOnRefresh = jest.fn(); const mockCurrentDate = new Date("2024-04-15"); @@ -337,6 +351,7 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); @@ -357,13 +372,14 @@ describe("Calendar App Component Display Tests", () => { calendarRef={mockCalendarRef} onRefresh={mockOnRefresh} currentDate={mockCurrentDate} + currentView="dayGridMonth" />, preloadedState ); const appsButton = screen.getByTestId("AppsIcon"); fireEvent.click(appsButton); - const twakeLink = screen.getByRole("link", { name: /test/i }); - expect(twakeLink).toHaveAttribute("href", "test"); + const testLink = screen.getByRole("link", { name: /test/i }); + expect(testLink).toHaveAttribute("href", "test"); }); }); diff --git a/babel.config.ts b/babel.config.js similarity index 100% rename from babel.config.ts rename to babel.config.js