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

UI/update header bar
This commit is contained in:
lenhanphung
2026-02-05 19:18:30 +07:00
committed by GitHub
36 changed files with 1021 additions and 317 deletions
+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();
});
+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(() => {
@@ -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);
@@ -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}");
@@ -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");