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
This commit is contained in:
lenhanphung
2025-09-25 17:33:58 +07:00
parent 7b8a2e74a5
commit e105e76f9e
3 changed files with 32 additions and 9 deletions
+9 -2
View File
@@ -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 <CalendarApp calendarRef={calendarRef} />;
}
describe("CalendarSelection", () => {
const today = new Date();
const start = new Date(today);
@@ -208,7 +215,7 @@ describe("calendar Availability search", () => {
},
]);
renderWithProviders(<CalendarApp />, preloadedState);
renderWithProviders(<CalendarTestWrapper />, 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(<CalendarApp />, preloadedState);
renderWithProviders(<CalendarTestWrapper />, preloadedState);
const input = screen.getByPlaceholderText(/search user/i);
userEvent.type(input, "Alice");
+23 -7
View File
@@ -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");
});
});