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:
@@ -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");
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user