372 drag and drop multiple days event to use normal mode instead of extended mode (#407)
- When dragging from allday slot: open normal mode with allday checked, show start date and end date - When dragging from week/month view grid: open normal mode with allday checked, show 4 fields (start date, start time, end date, end time) - Update DateTimeFields logic to support displaying time fields when allday=true and hasEndDateChanged=true for multiple days events Add setHasEndDateChanged(false) to resetAllStateToDefault function to prevent stale state when: - User creates multi-day event from grid (sets hasEndDateChanged = true) - Closes the modal - Opens modal again for a single-day event This ensures hasEndDateChanged is properly reset to false when modal is closed or reset. Fix drag and drop logic: keep allday=false when dragging from week view - Remove setAllDay(true) when dragging multiple days from week view grid - Keep allday=false to show time fields for week view drag scenarios - Add comprehensive test cases for drag and drop scenarios - Test cases cover allday slot and week view drag scenarios - Prevent regressions with test coverage for display logic
This commit is contained in:
lenhanphung
@@ -279,4 +279,65 @@ describe("DateTimeFields", () => {
|
||||
"dateTimeFields.endTime"
|
||||
);
|
||||
});
|
||||
|
||||
describe("DateTimeFields - Drag and Drop Display Logic", () => {
|
||||
// Test 1.1: Display 2 fields when drag from allday slot (multiple days)
|
||||
it("displays only 2 date fields when allday=true and multiple days", async () => {
|
||||
await renderField({
|
||||
allday: true,
|
||||
hasEndDateChanged: false,
|
||||
startDate: "2025-07-18",
|
||||
endDate: "2025-07-20",
|
||||
showEndDate: true,
|
||||
showMore: false,
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("start-time-input")).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId("end-time-input")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Test 1.2: Display 4 fields when drag from week view (multiple days)
|
||||
it("displays 4 fields when allday=false, hasEndDateChanged=true, and multiple days", async () => {
|
||||
await renderField({
|
||||
allday: false,
|
||||
hasEndDateChanged: true,
|
||||
startDate: "2025-07-18",
|
||||
endDate: "2025-07-20",
|
||||
startTime: "09:00",
|
||||
endTime: "10:00",
|
||||
showEndDate: true,
|
||||
showMore: false,
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Test 1.3: Display single date + time fields
|
||||
it("displays single date field with time fields for single day event", async () => {
|
||||
await renderField({
|
||||
allday: false,
|
||||
hasEndDateChanged: false,
|
||||
startDate: "2025-07-18",
|
||||
endDate: "2025-07-18",
|
||||
startTime: "09:00",
|
||||
endTime: "10:00",
|
||||
showEndDate: false,
|
||||
showMore: false,
|
||||
});
|
||||
|
||||
const startDateInput = screen.getByTestId("start-date-input");
|
||||
expect(startDateInput).toHaveAttribute(
|
||||
"aria-label",
|
||||
"dateTimeFields.date"
|
||||
);
|
||||
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("end-date-input")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -344,4 +344,126 @@ describe("EventPopover", () => {
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
describe("EventModal - Drag and Drop Scenarios", () => {
|
||||
// Test 2.1: Drag from allday slot (single day)
|
||||
it("sets allday=true when drag from allday slot (single day)", async () => {
|
||||
const selectedRange = {
|
||||
startStr: "2025-07-18",
|
||||
endStr: "2025-07-19",
|
||||
start: new Date("2025-07-18"),
|
||||
end: new Date("2025-07-19"),
|
||||
allDay: true,
|
||||
} as unknown as DateSelectArg;
|
||||
|
||||
renderPopover(selectedRange);
|
||||
|
||||
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
|
||||
await waitFor(() => {
|
||||
expect(allDayCheckbox).toBeChecked();
|
||||
});
|
||||
});
|
||||
|
||||
// Test 2.2: Drag from allday slot (multiple days)
|
||||
it("sets allday=true and shows 2 date fields when drag from allday slot (multiple days)", async () => {
|
||||
const selectedRange = {
|
||||
startStr: "2025-07-18",
|
||||
endStr: "2025-07-21",
|
||||
start: new Date("2025-07-18"),
|
||||
end: new Date("2025-07-21"),
|
||||
allDay: true,
|
||||
} as unknown as DateSelectArg;
|
||||
|
||||
renderPopover(selectedRange);
|
||||
|
||||
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
|
||||
await waitFor(() => {
|
||||
expect(allDayCheckbox).toBeChecked();
|
||||
});
|
||||
|
||||
// Verify only date fields are shown
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByTestId("start-time-input")
|
||||
).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId("end-time-input")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Test 2.3: Drag from week view (single day)
|
||||
it("keeps allday=false when drag from week view (single day)", async () => {
|
||||
const selectedRange = {
|
||||
startStr: "2025-07-18T09:00",
|
||||
endStr: "2025-07-18T10:00",
|
||||
start: new Date("2025-07-18T09:00"),
|
||||
end: new Date("2025-07-18T10:00"),
|
||||
allDay: false,
|
||||
} as unknown as DateSelectArg;
|
||||
|
||||
renderPopover(selectedRange);
|
||||
|
||||
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
|
||||
await waitFor(() => {
|
||||
expect(allDayCheckbox).not.toBeChecked();
|
||||
});
|
||||
|
||||
// Verify time fields are shown
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Test 2.4: Drag from week view (multiple days) - CRITICAL TEST
|
||||
it("keeps allday=false and shows 4 fields when drag from week view (multiple days)", async () => {
|
||||
const selectedRange = {
|
||||
startStr: "2025-07-18T09:00",
|
||||
endStr: "2025-07-20T10:00",
|
||||
start: new Date("2025-07-18T09:00"),
|
||||
end: new Date("2025-07-20T10:00"),
|
||||
allDay: false,
|
||||
} as unknown as DateSelectArg;
|
||||
|
||||
renderPopover(selectedRange);
|
||||
|
||||
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
|
||||
await waitFor(() => {
|
||||
expect(allDayCheckbox).not.toBeChecked(); // CRITICAL: should NOT be checked
|
||||
});
|
||||
|
||||
// Verify all 4 fields are shown
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Test 2.5: Drag from week view (multiple days) - fallback path
|
||||
it("handles drag from week view (multiple days) with Date objects only", async () => {
|
||||
const selectedRange = {
|
||||
start: new Date("2025-07-18T09:00"),
|
||||
end: new Date("2025-07-20T10:00"),
|
||||
allDay: false,
|
||||
} as unknown as DateSelectArg;
|
||||
|
||||
renderPopover(selectedRange);
|
||||
|
||||
const allDayCheckbox = screen.getByLabelText("event.form.allDay");
|
||||
await waitFor(() => {
|
||||
expect(allDayCheckbox).not.toBeChecked();
|
||||
});
|
||||
|
||||
// Verify all 4 fields are shown
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("start-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("start-time-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-date-input")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("end-time-input")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user