eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #504 from linagora/UI/update-header-bar

Browse Source 
UI/update header bar
This commit is contained in:
lenhanphung
2026-02-05 19:18:30 +07:00
committed by GitHub
parent 9cf8d7f3ab af53ad158a
commit fe8e19686d
36 changed files with 1021 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/components/EventModifications.test.tsx
+4
View File
@@ -400,6 +400,10 @@ describe("CalendarApp integration", () => {
preloadedState
);
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const startDateInput = await screen.findByTestId("start-time-input");
await act(async () => {
__test__/components/Menubar.test.tsx
+19 -6
View File
@@ -1,9 +1,14 @@
import { Menubar } from "@/components/Menubar/Menubar";
import * as oidcAuth from "@/features/User/oidcAuth";
import { redirectTo } from "@/utils/navigation";
import "@testing-library/jest-dom";
import { act, fireEvent, screen, waitFor } from "@testing-library/react";
import { renderWithProviders } from "../utils/Renderwithproviders";
jest.mock("@/utils/navigation", () => ({
redirectTo: jest.fn(),
}));
describe("Calendar App Component Display Tests", () => {
const preloadedState = {
user: {
@@ -320,7 +325,7 @@ describe("Calendar App Component Display Tests", () => {
expect(avatar).toBeInTheDocument();
});
it("shows AppsIcon when applist is not empty", () => {
it("shows apps button when applist is not empty", () => {
(window as any).appList = [{ name: "test", icon: "test", link: "test" }];
const mockCalendarRef = { current: null };
const mockOnRefresh = jest.fn();
@@ -335,10 +340,10 @@ describe("Calendar App Component Display Tests", () => {
/>,
preloadedState
);
expect(screen.getByTestId("AppsIcon")).toBeInTheDocument();
expect(screen.getByLabelText("menubar.apps")).toBeInTheDocument();
});
it("opens popover when clicking AppsIcon", () => {
it("opens popover when clicking apps button", () => {
(window as any).appList = [
{ name: "Twake", icon: "twake.svg", link: "/twake" },
{ name: "Calendar", icon: "calendar.svg", link: "/calendar" },
@@ -356,7 +361,7 @@ describe("Calendar App Component Display Tests", () => {
/>,
preloadedState
);
const appsButton = screen.getByTestId("AppsIcon");
const appsButton = screen.getByLabelText("menubar.apps");
fireEvent.click(appsButton);
expect(screen.getByText("Twake")).toBeInTheDocument();
expect(screen.getByText("Calendar")).toBeInTheDocument();
@@ -377,7 +382,7 @@ describe("Calendar App Component Display Tests", () => {
/>,
preloadedState
);
const appsButton = screen.getByTestId("AppsIcon");
const appsButton = screen.getByLabelText("menubar.apps");
fireEvent.click(appsButton);
const testLink = screen.getByRole("link", { name: /test/i });
@@ -532,7 +537,7 @@ describe("Menubar interaction with expanded Dialog", () => {
preloadedState
);
const appsButton = screen.getByTestId("AppsIcon");
const appsButton = screen.getByLabelText("menubar.apps");
expect(appsButton).toBeVisible();
fireEvent.click(appsButton);
@@ -717,10 +722,17 @@ describe("Menubar interaction with expanded Dialog", () => {
});
describe("Menubar logout flow", () => {
const redirectToMock = redirectTo as jest.Mock;
beforeEach(() => {
localStorage.clear();
sessionStorage.clear();
jest.clearAllMocks();
redirectToMock.mockReset();
});
afterEach(() => {
redirectToMock.mockReset();
});
function renderMenubar(user = { name: "John", email: "test@example.com" }) {
@@ -756,6 +768,7 @@ describe("Menubar logout flow", () => {
fireEvent.click(screen.getByText("menubar.logout"));
});
expect(logoutSpy).toHaveBeenCalled();
expect(redirectToMock).toHaveBeenCalledWith("https://logout.url/");
expect(sessionStorage.length).toBe(0);
});
__test__/components/ResponsiveDialog.test.tsx
+1 -1
View File
@@ -248,7 +248,7 @@ describe("ResponsiveDialog", () => {
onClose={mockOnClose}
title="Test"
isExpanded={true}
headerHeight="100px"
headerHeight="70px"
>
<div>Custom Header Content</div>
</ResponsiveDialog>
__test__/features/Events/EventDisplay.test.tsx
+11 -6
View File
@@ -164,12 +164,12 @@ describe("Event Preview Display", () => {
expect(screen.getByText(/January/i)).toBeInTheDocument();
expect(screen.getByText(/15/)).toBeInTheDocument();
// Check time is displayed with exact values
// Format: "Wednesday, January 15, 2025 at 10:00 AM" and " – 10:00 AM" are in separate elements
// Check time is displayed in 24h format (no AM/PM)
// Format: "Wednesday, January 15, 2025 at 10:00" and " – 10:00" are in separate elements
expect(
screen.getByText(/Wednesday, January 15, 2025 at 10:00 AM/)
screen.getByText(/Wednesday, January 15, 2025 at 10:00/)
).toBeInTheDocument();
expect(screen.getByText(/– 10:00 AM/)).toBeInTheDocument();
expect(screen.getByText(/– 10:00/)).toBeInTheDocument();
expect(screen.getByText("Calendar")).toBeInTheDocument();
});
@@ -1719,6 +1719,9 @@ describe("Event Full Display", () => {
expect(screen.getByDisplayValue("Test Event")).toBeInTheDocument();
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const startDateInput = screen.getByTestId("start-date-input");
const startTimeInput = screen.getByTestId("start-time-input");
const endTimeInput = screen.getByTestId("end-time-input");
@@ -1804,6 +1807,7 @@ describe("Event Full Display", () => {
preloadedState
);
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
fireEvent.click(allDayCheckbox);
expect(allDayCheckbox).toBeChecked();
@@ -1878,6 +1882,7 @@ describe("Event Full Display", () => {
)
);
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const calendarSelect = screen.getByLabelText("event.form.calendar");
await act(async () => fireEvent.mouseDown(calendarSelect));
@@ -1947,9 +1952,9 @@ describe("Event Full Display", () => {
stateWithTimezone
);
// Expand to show timezone selector (normal mode hides it)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// The timezone select should have Asia/Bangkok selected
// Since the component uses formatLocalDateTime, the displayed time will be in local format
// but the timezone selector should show Asia/Bangkok
const timeZone = screen.getByDisplayValue(/Asia\/Bangkok/i);
expect(timeZone).toBeInTheDocument();
});
__test__/features/Events/EventModal.test.tsx
+34 -7
View File
@@ -124,8 +124,10 @@ describe("EventPopover", () => {
});
expect(addDescriptionButton).toBeInTheDocument();
const calendarSelect = screen.getByRole("combobox", { name: /calendar/i });
expect(calendarSelect).toBeInTheDocument();
// In normal mode calendar is a SectionPreviewRow (button), not combobox
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toBeInTheDocument();
// Check button
expect(
@@ -154,7 +156,8 @@ describe("EventPopover", () => {
allDay: false,
} as unknown as DateSelectArg);
// MUI DatePicker/TimePicker values are stored differently - just check elements exist
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
});
@@ -179,6 +182,10 @@ describe("EventPopover", () => {
"Event Description"
);
// Expand location section (normal mode shows SectionPreviewRow)
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: "Conference Room" },
});
@@ -190,13 +197,14 @@ describe("EventPopover", () => {
it("changes selected calendar", async () => {
renderPopover();
// Expand to show calendar combobox (normal mode shows SectionPreviewRow)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
const select = screen.getByLabelText("event.form.calendar");
fireEvent.mouseDown(select); // Open menu
const option = await screen.findByText("Calendar 2");
fireEvent.click(option);
// Find the calendar combobox specifically by its aria-labelledby
const calendarSelect = screen.getByRole("combobox", { name: /Calendar/i });
expect(calendarSelect).toHaveTextContent("Calendar 2");
});
@@ -290,6 +298,9 @@ describe("EventPopover", () => {
fireEvent.change(screen.getByLabelText("event.form.description"), {
target: { value: newEvent.description },
});
fireEvent.click(
screen.getByRole("button", { name: "event.form.locationPlaceholder" })
);
fireEvent.change(screen.getByLabelText("event.form.location"), {
target: { value: newEvent.location },
});
@@ -338,10 +349,11 @@ describe("EventPopover", () => {
it("BUGFIX: Prefill Calendar field", async () => {
renderPopover();
// In normal mode calendar is a SectionPreviewRow (button) with calendar name
await waitFor(() =>
expect(screen.getByLabelText("event.form.calendar")).toHaveTextContent(
"Calendar 1"
)
expect(
screen.getByRole("button", { name: "Calendar 1" })
).toHaveTextContent("Calendar 1")
);
});
@@ -357,6 +369,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -375,6 +390,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -403,6 +421,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -427,6 +448,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
@@ -451,6 +475,9 @@ describe("EventPopover", () => {
} as unknown as DateSelectArg;
renderPopover(selectedRange);
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
await waitFor(() => {
__test__/features/Events/EventRepetition.test.tsx
+2 -1
View File
@@ -1176,7 +1176,8 @@ describe("Event URL handling for recurring events", () => {
)
);
// Change calendar
// Expand to show calendar combobox (normal mode shows SectionPreviewRow)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
fireEvent.mouseDown(screen.getByLabelText("event.form.calendar"));
const option = await screen.findByText("Calendar 2");
fireEvent.click(option);
__test__/features/Events/EventUpdateModal.recurring.test.tsx
+9 -1
View File
@@ -129,6 +129,10 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
screen.queryByDisplayValue("Modified Instance Title")
).not.toBeInTheDocument();
// Expand more options to show timezone (normal mode shows summary first)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
// Verify timezone dropdown shows master timezone
await waitFor(() => {
expect(screen.getByDisplayValue(/New York/i)).toBeDefined();
@@ -493,8 +497,12 @@ describe("EventUpdateModal - Recurring Event 'Edit All' Handling", () => {
expect(screen.getByDisplayValue("Daily Standup")).toBeInTheDocument();
});
// Expand more options to show date/time inputs (normal mode shows DateTimeSummary first)
fireEvent.click(
screen.getByRole("button", { name: "common.moreOptions" })
);
const input = await waitFor(() => screen.getByTestId("start-time-input"));
// Change time to 2:00 PM (14:00)
const input = screen.getByTestId("start-time-input");
await userEvent.click(input);
await userEvent.clear(input);
await userEvent.type(input, "14:00{enter}");
__test__/features/Events/EventUpdateModal.test.tsx
+6
View File
@@ -93,6 +93,9 @@ describe("EventUpdateModal Timezone Handling", () => {
const titleInput = screen.getByDisplayValue("Timezone Event");
expect(titleInput).toBeInTheDocument();
// Expand to show date/time inputs (normal mode shows DateTimeSummary)
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Verify the start date and time inputs exist
await waitFor(() => {
const startDateInput = screen.getByTestId("start-date-input");
@@ -282,6 +285,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(mockGetMasterEvent).toHaveBeenCalled();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Wait for the repeat checkbox to be checked (indicating form is initialized)
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
@@ -414,6 +418,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Wait for repeat checkbox to be checked
const repeatCheckbox = await waitFor(() => {
const checkbox = screen.getByLabelText("event.form.repeat");
@@ -546,6 +551,7 @@ describe("EventUpdateModal Recurring to Non-Recurring Conversion", () => {
expect(screen.getByDisplayValue("Recurring Meeting")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: "common.moreOptions" }));
// Uncheck repeat and save
const repeatCheckbox = screen.getByLabelText("event.form.repeat");