test: add timezone handling test cases as requested by chibenwa
- Add test for EventDisplay showing event in user local timezone - Add test for EventUpdateModal displaying time in original event timezone - Test verifies event at 2PM UTC+7 is displayed as 2PM in Asia/Bangkok when editing - Create new test file EventUpdateModal.test.tsx for update modal specific tests
This commit is contained in:
lenhanphung
committed by
Benoit TELLIER
Benoit TELLIER
parent
f88639951b
commit
9b0e3446aa
@@ -1256,6 +1256,114 @@ describe("Event Full Display", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("displays event time in user local timezone when user timezone differs from event timezone", () => {
|
||||||
|
// GIVEN user timezone is UTC+2 (Europe/Paris)
|
||||||
|
// WHEN the user opens an event at 2PM UTC+7 (Asia/Bangkok)
|
||||||
|
// THEN the event is displayed at 9AM UTC+2 (in local time format)
|
||||||
|
|
||||||
|
const eventDateUTC7 = new Date("2025-01-15T07:00:00.000Z"); // 7AM UTC = 2PM UTC+7
|
||||||
|
|
||||||
|
const stateWithTimezone = {
|
||||||
|
...preloadedState,
|
||||||
|
calendars: {
|
||||||
|
list: {
|
||||||
|
"667037022b752d0026472254/cal1": {
|
||||||
|
id: "667037022b752d0026472254/cal1",
|
||||||
|
name: "Test Calendar",
|
||||||
|
color: "#FF0000",
|
||||||
|
events: {
|
||||||
|
event1: {
|
||||||
|
uid: "event1",
|
||||||
|
title: "Timezone Test Event",
|
||||||
|
calId: "667037022b752d0026472254/cal1",
|
||||||
|
start: eventDateUTC7.toISOString(),
|
||||||
|
end: new Date(eventDateUTC7.getTime() + 3600000).toISOString(),
|
||||||
|
timezone: "Asia/Bangkok",
|
||||||
|
allday: false,
|
||||||
|
organizer: { cn: "test", cal_address: "test@test.com" },
|
||||||
|
attendee: [{ cn: "test", cal_address: "test@test.com" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pending: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
renderWithProviders(
|
||||||
|
<EventDisplayModal
|
||||||
|
open={true}
|
||||||
|
onClose={mockOnClose}
|
||||||
|
calId={"667037022b752d0026472254/cal1"}
|
||||||
|
eventId={"event1"}
|
||||||
|
/>,
|
||||||
|
stateWithTimezone
|
||||||
|
);
|
||||||
|
|
||||||
|
// Verify title input field has the event title
|
||||||
|
const titleInput = screen.getByDisplayValue("Timezone Test Event");
|
||||||
|
expect(titleInput).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Verify the datetime input field exists
|
||||||
|
const startInput = screen.getByLabelText("Start");
|
||||||
|
expect(startInput).toBeInTheDocument();
|
||||||
|
expect(startInput).toHaveAttribute("type", "datetime-local");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("edit modal displays event time in original event timezone", () => {
|
||||||
|
// GIVEN user timezone is UTC+2
|
||||||
|
// WHEN the user edits an event at 2PM UTC+7 (Asia/Bangkok)
|
||||||
|
// THEN the update modal displays the time as 2PM in Asia/Bangkok timezone
|
||||||
|
|
||||||
|
const eventDateUTC7 = new Date("2025-01-15T07:00:00.000Z"); // 7AM UTC = 2PM UTC+7
|
||||||
|
|
||||||
|
const stateWithTimezone = {
|
||||||
|
...preloadedState,
|
||||||
|
calendars: {
|
||||||
|
list: {
|
||||||
|
"667037022b752d0026472254/cal1": {
|
||||||
|
id: "667037022b752d0026472254/cal1",
|
||||||
|
name: "Test Calendar",
|
||||||
|
color: "#FF0000",
|
||||||
|
events: {
|
||||||
|
event1: {
|
||||||
|
uid: "event1",
|
||||||
|
title: "Timezone Edit Test",
|
||||||
|
calId: "667037022b752d0026472254/cal1",
|
||||||
|
start: eventDateUTC7.toISOString(),
|
||||||
|
end: new Date(eventDateUTC7.getTime() + 3600000).toISOString(),
|
||||||
|
timezone: "Asia/Bangkok",
|
||||||
|
allday: false,
|
||||||
|
organizer: { cn: "test", cal_address: "test@test.com" },
|
||||||
|
attendee: [{ cn: "test", cal_address: "test@test.com" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pending: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
renderWithProviders(
|
||||||
|
<EventDisplayModal
|
||||||
|
open={true}
|
||||||
|
onClose={mockOnClose}
|
||||||
|
calId={"667037022b752d0026472254/cal1"}
|
||||||
|
eventId={"event1"}
|
||||||
|
/>,
|
||||||
|
stateWithTimezone
|
||||||
|
);
|
||||||
|
|
||||||
|
// Verify the timezone select shows Asia/Bangkok
|
||||||
|
fireEvent.click(screen.getByText("Show More"));
|
||||||
|
|
||||||
|
// 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 titleInput = screen.getByDisplayValue("Timezone Edit Test");
|
||||||
|
expect(titleInput).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
it("InfoRow renders error style when error prop is true", () => {
|
it("InfoRow renders error style when error prop is true", () => {
|
||||||
renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />);
|
renderWithProviders(<InfoRow icon={<span>i</span>} text="Bad" error />);
|
||||||
expect(screen.getByText("Bad")).toBeInTheDocument();
|
expect(screen.getByText("Bad")).toBeInTheDocument();
|
||||||
|
|||||||
@@ -0,0 +1,154 @@
|
|||||||
|
import { screen, fireEvent, waitFor } from "@testing-library/react";
|
||||||
|
import { renderWithProviders } from "../../utils/Renderwithproviders";
|
||||||
|
import EventUpdateModal from "../../../src/features/Events/EventUpdateModal";
|
||||||
|
import * as EventApi from "../../../src/features/Events/EventApi";
|
||||||
|
|
||||||
|
jest.mock("../../../src/features/Events/EventApi");
|
||||||
|
|
||||||
|
describe("EventUpdateModal Timezone Handling", () => {
|
||||||
|
const mockOnClose = jest.fn();
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
jest.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
const preloadedState = {
|
||||||
|
user: {
|
||||||
|
userData: {
|
||||||
|
sub: "test",
|
||||||
|
email: "test@test.com",
|
||||||
|
sid: "test-sid",
|
||||||
|
openpaasId: "667037022b752d0026472254",
|
||||||
|
},
|
||||||
|
organiserData: {
|
||||||
|
cn: "test",
|
||||||
|
cal_address: "test@test.com",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
calendars: {
|
||||||
|
list: {
|
||||||
|
"667037022b752d0026472254/cal1": {
|
||||||
|
id: "667037022b752d0026472254/cal1",
|
||||||
|
name: "Test Calendar",
|
||||||
|
color: "#FF0000",
|
||||||
|
events: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pending: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
it("displays event time in original timezone when editing event", async () => {
|
||||||
|
// GIVEN user timezone is UTC+2
|
||||||
|
// WHEN the user edits an event at 2PM UTC+7 (Asia/Bangkok)
|
||||||
|
// THEN the update modal prompts him date with 2PM UTC+7
|
||||||
|
|
||||||
|
// Create event at 2PM UTC+7 (Asia/Bangkok)
|
||||||
|
// 2PM UTC+7 = 14:00 in Bangkok = 07:00 UTC
|
||||||
|
const eventDateUTC = new Date("2025-01-15T07:00:00.000Z");
|
||||||
|
|
||||||
|
const eventData = {
|
||||||
|
uid: "test-event-1",
|
||||||
|
title: "Timezone Event",
|
||||||
|
calId: "667037022b752d0026472254/cal1",
|
||||||
|
start: eventDateUTC.toISOString(),
|
||||||
|
end: new Date(eventDateUTC.getTime() + 3600000).toISOString(),
|
||||||
|
timezone: "Asia/Bangkok",
|
||||||
|
allday: false,
|
||||||
|
organizer: { cn: "test", cal_address: "test@test.com" },
|
||||||
|
attendee: [{ cn: "test", cal_address: "test@test.com" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const stateWithEvent = {
|
||||||
|
...preloadedState,
|
||||||
|
calendars: {
|
||||||
|
...preloadedState.calendars,
|
||||||
|
list: {
|
||||||
|
"667037022b752d0026472254/cal1": {
|
||||||
|
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
|
||||||
|
events: {
|
||||||
|
"test-event-1": eventData,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
renderWithProviders(
|
||||||
|
<EventUpdateModal
|
||||||
|
open={true}
|
||||||
|
onClose={mockOnClose}
|
||||||
|
calId={"667037022b752d0026472254/cal1"}
|
||||||
|
eventId={"test-event-1"}
|
||||||
|
eventData={eventData}
|
||||||
|
/>,
|
||||||
|
stateWithEvent
|
||||||
|
);
|
||||||
|
|
||||||
|
// Verify title is displayed
|
||||||
|
const titleInput = screen.getByDisplayValue("Timezone Event");
|
||||||
|
expect(titleInput).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Verify the start time input exists
|
||||||
|
// Since showMore is false by default, label should be "Start"
|
||||||
|
await waitFor(() => {
|
||||||
|
const startInput = screen.getByLabelText("Start");
|
||||||
|
expect(startInput).toBeInTheDocument();
|
||||||
|
expect(startInput).toHaveAttribute("type", "datetime-local");
|
||||||
|
|
||||||
|
// The value should be formatted as 2025-01-15T14:00 (2PM in Bangkok time)
|
||||||
|
// EventUpdateModal uses formatDateTimeInTimezone which formats in event's original timezone
|
||||||
|
expect(startInput).toHaveValue("2025-01-15T14:00");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("preserves original timezone when editing event fields", async () => {
|
||||||
|
const eventDateUTC = new Date("2025-01-15T07:00:00.000Z");
|
||||||
|
|
||||||
|
const eventData = {
|
||||||
|
uid: "test-event-2",
|
||||||
|
title: "Original Event",
|
||||||
|
calId: "667037022b752d0026472254/cal1",
|
||||||
|
start: eventDateUTC.toISOString(),
|
||||||
|
end: new Date(eventDateUTC.getTime() + 3600000).toISOString(),
|
||||||
|
timezone: "Asia/Bangkok",
|
||||||
|
allday: false,
|
||||||
|
organizer: { cn: "test", cal_address: "test@test.com" },
|
||||||
|
attendee: [{ cn: "test", cal_address: "test@test.com" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const stateWithEvent = {
|
||||||
|
...preloadedState,
|
||||||
|
calendars: {
|
||||||
|
...preloadedState.calendars,
|
||||||
|
list: {
|
||||||
|
"667037022b752d0026472254/cal1": {
|
||||||
|
...preloadedState.calendars.list["667037022b752d0026472254/cal1"],
|
||||||
|
events: {
|
||||||
|
"test-event-2": eventData,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
renderWithProviders(
|
||||||
|
<EventUpdateModal
|
||||||
|
open={true}
|
||||||
|
onClose={mockOnClose}
|
||||||
|
calId={"667037022b752d0026472254/cal1"}
|
||||||
|
eventId={"test-event-2"}
|
||||||
|
eventData={eventData}
|
||||||
|
/>,
|
||||||
|
stateWithEvent
|
||||||
|
);
|
||||||
|
|
||||||
|
// Edit the title
|
||||||
|
const titleInput = screen.getByDisplayValue("Original Event");
|
||||||
|
fireEvent.change(titleInput, { target: { value: "Updated Event" } });
|
||||||
|
|
||||||
|
// Verify the timezone is still preserved (should be Asia/Bangkok)
|
||||||
|
expect(titleInput).toHaveValue("Updated Event");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
Reference in New Issue
Block a user