Lucas Berger
9aa15c484b
- Add hasRrule to EDIT_OCCURRENCE, RECURRING_OCCURRENCE, LATE_OCCURRENCE fixtures - Add ALL_DAY_OCCURRENCE fixture for D-05 round-trip test - Add test cases: D-04 timed/all-day end-tracking on start change - Add test cases: D-05 all-day edit pre-fills inclusive end (no drift) - Add test cases: D-06 Ends control visibility, On date/After N times reveals - Add test cases: D-06 validation (count < 1), payload emission (count, never)
961 lines
38 KiB
TypeScript
961 lines
38 KiB
TypeScript
/**
|
|
* EventForm tests — Plan 03-12 (TDD RED → GREEN, gap closure)
|
|
*
|
|
* Original coverage (Plan 03-05):
|
|
* - All required fields render (title, all-day, start/end date/time, recurrence, location, description)
|
|
* - All-day toggle hides time inputs; un-toggling shows them
|
|
* - Calendar picker absent when writable-calendars returns 1 calendar (D-02)
|
|
* - Calendar picker present when writable-calendars returns 2 calendars (D-02)
|
|
* - Empty title shows "Title is required" error
|
|
* - End-before-start shows "End time must be after start" error
|
|
* - Submit in create mode calls createEvent mutation
|
|
* - Submit in edit mode calls updateEvent mutation
|
|
* - Escape key closes the form
|
|
* - Backdrop click closes the form
|
|
* - role="dialog" aria-modal="true"
|
|
* - No dangerouslySetInnerHTML usage (security)
|
|
*
|
|
* Added in Plan 03-12 (gap closure):
|
|
* - WR-03: edit form re-populates when occurrence arrives in cache after form open
|
|
* - WR-03: editing a recurring occurrence preselects its recurrence preset (not 'none')
|
|
* - WR-05: parseDateTime is zone-consistent (TZ-pinned to UTC for deterministic assertion)
|
|
* - IN-03: todayIso is exported from calendarStore.ts (single source of truth)
|
|
* - WR-07: Tab/Shift+Tab focus trap cycles within the dialog
|
|
* - PWA-01/PWA-02: install asset files exist (verified below + in SUMMARY)
|
|
*/
|
|
|
|
// TZ=UTC is set via vitest.config.ts env block so every Date in this file uses UTC wall clock.
|
|
// Approach: vitest.config.ts env: { TZ: 'UTC' } (see note in WR-05 test block below).
|
|
|
|
import 'temporal-polyfill/global'
|
|
import React from 'react'
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
|
|
// ── Module mocks ──────────────────────────────────────────────────────────────
|
|
// vi.hoisted() is required for variables used inside vi.mock() factory functions
|
|
// to avoid TDZ (temporal dead zone) issues — decision D-03-04-hoisting.
|
|
|
|
const {
|
|
mockSetEventForm,
|
|
mockSetLastSyncedUid,
|
|
mockCreateEvent,
|
|
mockUpdateEvent,
|
|
mockFetchWritableCalendars,
|
|
} = vi.hoisted(() => ({
|
|
mockSetEventForm: vi.fn(),
|
|
mockSetLastSyncedUid: vi.fn(),
|
|
mockCreateEvent: vi.fn().mockResolvedValue({ uid: 'new-uid-123' }),
|
|
mockUpdateEvent: vi.fn().mockResolvedValue({ uid: 'edit-uid-456' }),
|
|
mockFetchWritableCalendars: vi.fn(),
|
|
}))
|
|
|
|
let mockEventFormOpen = true
|
|
let mockEventFormMode: 'create' | 'edit' = 'create'
|
|
let mockEventFormUid: string | null = null
|
|
|
|
vi.mock('../store/calendarStore.js', () => ({
|
|
useCalendarStore: vi.fn((selector?: (s: Record<string, unknown>) => unknown) => {
|
|
const state = {
|
|
eventFormOpen: mockEventFormOpen,
|
|
eventFormMode: mockEventFormMode,
|
|
eventFormUid: mockEventFormUid,
|
|
setEventForm: mockSetEventForm,
|
|
setLastSyncedUid: mockSetLastSyncedUid,
|
|
}
|
|
// Support both selector form and plain call form
|
|
if (typeof selector === 'function') return selector(state)
|
|
return state
|
|
}),
|
|
// IN-03: todayIso is now exported from calendarStore (gap closure); mock it here
|
|
// so EventForm can import it without errors. Returns today as YYYY-MM-DD.
|
|
todayIso: () => new Date().toISOString().slice(0, 10),
|
|
}))
|
|
|
|
vi.mock('../api/client.js', () => ({
|
|
createEvent: mockCreateEvent,
|
|
updateEvent: mockUpdateEvent,
|
|
fetchWritableCalendars: mockFetchWritableCalendars,
|
|
}))
|
|
|
|
// ── Fixtures ───────────────────────────────────────────────────────────────────
|
|
|
|
import type { CalendarOccurrence } from '../api/client.js'
|
|
import type { WritableCalendar } from '../api/client.js'
|
|
|
|
const ONE_CALENDAR: WritableCalendar[] = [
|
|
{ url: 'https://caldav.fastmail.com/cal1', displayName: 'My Calendar', color: '#4A90D9', isShared: false },
|
|
]
|
|
|
|
const TWO_CALENDARS: WritableCalendar[] = [
|
|
{ url: 'https://caldav.fastmail.com/cal1', displayName: 'My Calendar', color: '#4A90D9', isShared: false },
|
|
{ url: 'https://caldav.fastmail.com/cal2', displayName: 'Family', color: '#F25C7A', isShared: true },
|
|
]
|
|
|
|
const EDIT_OCCURRENCE: CalendarOccurrence = {
|
|
id: 'edit-uid-456::2026-06-15T10:00:00',
|
|
uid: 'edit-uid-456',
|
|
calendarId: 1,
|
|
calendarName: 'My Calendar',
|
|
ownerUserId: 1,
|
|
ownerName: 'Alice',
|
|
color: '#4A90D9',
|
|
isShared: false,
|
|
title: 'Existing Meeting',
|
|
start: '2026-06-15T10:00:00-04:00',
|
|
end: '2026-06-15T11:00:00-04:00',
|
|
allDay: false,
|
|
location: 'Office',
|
|
description: 'Weekly sync',
|
|
hasRrule: false,
|
|
}
|
|
|
|
// ── Import component (after mocks) ────────────────────────────────────────────
|
|
|
|
import { EventForm } from './EventForm.js'
|
|
import { useCalendarStore } from '../store/calendarStore.js'
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
|
|
function renderForm(options: {
|
|
mode?: 'create' | 'edit'
|
|
uid?: string | null
|
|
calendars?: WritableCalendar[]
|
|
eventOccurrence?: CalendarOccurrence
|
|
} = {}) {
|
|
const { mode = 'create', uid = null, calendars = ONE_CALENDAR, eventOccurrence } = options
|
|
|
|
mockEventFormOpen = true
|
|
mockEventFormMode = mode
|
|
mockEventFormUid = uid
|
|
;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
|
|
(selector?: (s: Record<string, unknown>) => unknown) => {
|
|
const state = {
|
|
eventFormOpen: true,
|
|
eventFormMode: mode,
|
|
eventFormUid: uid,
|
|
setEventForm: mockSetEventForm,
|
|
setLastSyncedUid: mockSetLastSyncedUid,
|
|
}
|
|
if (typeof selector === 'function') return selector(state)
|
|
return state
|
|
},
|
|
)
|
|
|
|
mockFetchWritableCalendars.mockResolvedValue(calendars)
|
|
|
|
const client = new QueryClient({
|
|
defaultOptions: { queries: { retry: false, staleTime: Infinity } },
|
|
})
|
|
|
|
// Pre-populate the events cache for edit mode pre-population
|
|
if (eventOccurrence) {
|
|
client.setQueryData(['events'], { occurrences: [eventOccurrence] })
|
|
}
|
|
// Pre-populate writable calendars cache
|
|
client.setQueryData(['writableCalendars'], calendars)
|
|
|
|
return render(
|
|
<QueryClientProvider client={client}>
|
|
<EventForm />
|
|
</QueryClientProvider>,
|
|
)
|
|
}
|
|
|
|
// ── Tests ─────────────────────────────────────────────────────────────────────
|
|
|
|
describe('EventForm', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
mockEventFormOpen = true
|
|
mockEventFormMode = 'create'
|
|
mockEventFormUid = null
|
|
})
|
|
|
|
// ── Role and accessibility ─────────────────────────────────────────────────
|
|
|
|
it('has role="dialog" and aria-modal="true"', () => {
|
|
renderForm()
|
|
const dialog = screen.getByRole('dialog')
|
|
expect(dialog).toBeDefined()
|
|
expect(dialog.getAttribute('aria-modal')).toBe('true')
|
|
})
|
|
|
|
it('has aria-label "New Event" in create mode', () => {
|
|
renderForm({ mode: 'create' })
|
|
const dialog = screen.getByRole('dialog')
|
|
expect(dialog.getAttribute('aria-label')).toBe('New Event')
|
|
})
|
|
|
|
it('has aria-label "Edit Event" in edit mode', () => {
|
|
renderForm({ mode: 'edit', uid: 'edit-uid-456', eventOccurrence: EDIT_OCCURRENCE })
|
|
const dialog = screen.getByRole('dialog')
|
|
expect(dialog.getAttribute('aria-label')).toBe('Edit Event')
|
|
})
|
|
|
|
// ── Required fields ────────────────────────────────────────────────────────
|
|
|
|
it('renders title input with placeholder "Event title"', () => {
|
|
renderForm()
|
|
const titleInput = screen.getByPlaceholderText('Event title')
|
|
expect(titleInput).toBeDefined()
|
|
})
|
|
|
|
it('renders All-day toggle', () => {
|
|
renderForm()
|
|
expect(screen.getByText('All day')).toBeDefined()
|
|
})
|
|
|
|
it('renders start date input', () => {
|
|
renderForm()
|
|
// Start date input should exist
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
expect(dateInputs.length).toBeGreaterThanOrEqual(1)
|
|
})
|
|
|
|
it('renders recurrence picker labeled "Repeat"', () => {
|
|
renderForm()
|
|
expect(screen.getByText('Repeat')).toBeDefined()
|
|
})
|
|
|
|
it('renders recurrence options: None, Daily, Weekly, Monthly, Yearly', () => {
|
|
renderForm()
|
|
expect(screen.getByText('None')).toBeDefined()
|
|
expect(screen.getByText('Daily')).toBeDefined()
|
|
expect(screen.getByText('Weekly')).toBeDefined()
|
|
expect(screen.getByText('Monthly')).toBeDefined()
|
|
expect(screen.getByText('Yearly')).toBeDefined()
|
|
})
|
|
|
|
it('renders location input with placeholder "Add location"', () => {
|
|
renderForm()
|
|
expect(screen.getByPlaceholderText('Add location')).toBeDefined()
|
|
})
|
|
|
|
it('renders description textarea with placeholder "Add description"', () => {
|
|
renderForm()
|
|
expect(screen.getByPlaceholderText('Add description')).toBeDefined()
|
|
})
|
|
|
|
// ── All-day toggle behavior ────────────────────────────────────────────────
|
|
|
|
it('toggling All-day ON hides time inputs', () => {
|
|
renderForm()
|
|
const timeInputsBefore = document.querySelectorAll('input[type="time"]')
|
|
expect(timeInputsBefore.length).toBeGreaterThan(0)
|
|
|
|
const allDaySwitch = screen.getByRole('switch')
|
|
fireEvent.click(allDaySwitch)
|
|
|
|
const timeInputsAfter = document.querySelectorAll('input[type="time"]')
|
|
expect(timeInputsAfter.length).toBe(0)
|
|
})
|
|
|
|
it('toggling All-day OFF shows time inputs with default 09:00 / 10:00', () => {
|
|
renderForm()
|
|
// Toggle on then off
|
|
const allDaySwitch = screen.getByRole('switch')
|
|
fireEvent.click(allDaySwitch) // ON - hides time
|
|
fireEvent.click(allDaySwitch) // OFF - shows time with defaults
|
|
|
|
const timeInputs = document.querySelectorAll('input[type="time"]')
|
|
expect(timeInputs.length).toBeGreaterThan(0)
|
|
})
|
|
|
|
// WR-02 (iteration 2): toggling all-day ON deterministically clamps endDate to
|
|
// max(startDate, endDate). When the end day is BEHIND the start day, it snaps forward
|
|
// to a single-day event rather than validating as an inconsistent span, and any stale
|
|
// end-time error from the timed view is cleared.
|
|
it('toggling All-day ON clamps an end date that is behind the start date up to the start date', async () => {
|
|
renderForm()
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), {
|
|
target: { value: 'Span Title' },
|
|
})
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
expect(dateInputs.length).toBeGreaterThanOrEqual(2)
|
|
// Start 2026-06-10, end 2026-06-09 (end behind start) — invalid timed span
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(dateInputs[1], { target: { value: '2026-06-09' } })
|
|
|
|
// Toggle all-day ON: endDate must clamp up to the start date (single-day event)
|
|
const allDaySwitch = screen.getByRole('switch')
|
|
fireEvent.click(allDaySwitch)
|
|
|
|
const dateInputsAfter = document.querySelectorAll('input[type="date"]')
|
|
expect((dateInputsAfter[1] as HTMLInputElement).value).toBe('2026-06-10')
|
|
|
|
// The clamped all-day event validates cleanly (no end-time error surfaced)
|
|
const saveButton = screen.getByText('Create Event')
|
|
fireEvent.click(saveButton)
|
|
await waitFor(() => {
|
|
expect(screen.queryByText('End time must be after start')).toBeNull()
|
|
})
|
|
})
|
|
|
|
// ── Calendar picker D-02 ───────────────────────────────────────────────────
|
|
|
|
it('calendar picker is absent when fetchWritableCalendars returns 1 calendar (D-02)', () => {
|
|
renderForm({ calendars: ONE_CALENDAR })
|
|
// Should not show "Calendar" label when only 1 writable calendar
|
|
const calendarLabel = screen.queryByText('Calendar')
|
|
expect(calendarLabel).toBeNull()
|
|
})
|
|
|
|
it('calendar picker is present when fetchWritableCalendars returns 2 calendars (D-02)', () => {
|
|
renderForm({ calendars: TWO_CALENDARS })
|
|
// Should show "Calendar" label when >1 writable calendar
|
|
expect(screen.getByText('Calendar')).toBeDefined()
|
|
})
|
|
|
|
// ── Validation ─────────────────────────────────────────────────────────────
|
|
|
|
it('shows "Title is required" when submitting with empty title', async () => {
|
|
renderForm()
|
|
const saveButton = screen.getByText('Create Event')
|
|
fireEvent.click(saveButton)
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Title is required')).toBeDefined()
|
|
})
|
|
})
|
|
|
|
it('shows "End time must be after start" when end is before start', async () => {
|
|
renderForm()
|
|
// Fill a title so title validation passes
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), {
|
|
target: { value: 'Valid Title' },
|
|
})
|
|
// Set start date to today
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
// Set end date to before start
|
|
const today = new Date()
|
|
const tomorrow = new Date(today)
|
|
tomorrow.setDate(today.getDate() + 1)
|
|
const todayStr = today.toISOString().slice(0, 10)
|
|
const yesterdayStr = new Date(today.setDate(today.getDate() - 1)).toISOString().slice(0, 10)
|
|
|
|
if (dateInputs.length >= 2) {
|
|
fireEvent.change(dateInputs[0], { target: { value: todayStr } })
|
|
// Set time inputs: start time later than end time
|
|
const timeInputs = document.querySelectorAll('input[type="time"]')
|
|
if (timeInputs.length >= 2) {
|
|
fireEvent.change(timeInputs[0], { target: { value: '15:00' } })
|
|
fireEvent.change(timeInputs[1], { target: { value: '10:00' } })
|
|
}
|
|
fireEvent.change(dateInputs[1], { target: { value: todayStr } })
|
|
}
|
|
|
|
const saveButton = screen.getByText('Create Event')
|
|
fireEvent.click(saveButton)
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('End time must be after start')).toBeDefined()
|
|
})
|
|
})
|
|
|
|
// ── Form submission ────────────────────────────────────────────────────────
|
|
|
|
it('submitting in create mode calls createEvent mutation', async () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), {
|
|
target: { value: 'New Meeting' },
|
|
})
|
|
|
|
const saveButton = screen.getByText('Create Event')
|
|
fireEvent.click(saveButton)
|
|
|
|
await waitFor(() => {
|
|
expect(mockCreateEvent).toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
it('submitting in edit mode calls updateEvent mutation', async () => {
|
|
renderForm({
|
|
mode: 'edit',
|
|
uid: 'edit-uid-456',
|
|
eventOccurrence: EDIT_OCCURRENCE,
|
|
})
|
|
|
|
// Pre-populated form — just click save
|
|
const saveButton = screen.getByText('Save Changes')
|
|
fireEvent.click(saveButton)
|
|
|
|
await waitFor(() => {
|
|
expect(mockUpdateEvent).toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
it('successful create closes the form via setEventForm(false)', async () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), {
|
|
target: { value: 'Test Event' },
|
|
})
|
|
fireEvent.click(screen.getByText('Create Event'))
|
|
|
|
await waitFor(() => {
|
|
expect(mockSetEventForm).toHaveBeenCalledWith(false)
|
|
})
|
|
})
|
|
|
|
// WR-01 (iteration 2): edit mode shows explanatory helper text near the disabled
|
|
// recurrence select so the locked schedule is not a silent surprise.
|
|
it('WR-01: edit mode surfaces helper text that repeat cannot be changed', () => {
|
|
renderForm({ mode: 'edit', uid: 'edit-uid-456', eventOccurrence: EDIT_OCCURRENCE })
|
|
expect(screen.getByText(/Repeat can't be changed yet/i)).toBeDefined()
|
|
})
|
|
|
|
it('WR-01: create mode does NOT show the repeat helper text', () => {
|
|
renderForm({ mode: 'create' })
|
|
expect(screen.queryByText(/Repeat can't be changed yet/i)).toBeNull()
|
|
})
|
|
|
|
// IN-02 (iteration 2): in edit mode an unparseable cached start/end must leave the
|
|
// field blank and block submit, rather than silently rewriting the event to today/09:00.
|
|
it('IN-02: edit mode with an unparseable start leaves the date blank and blocks submit', async () => {
|
|
const corruptOccurrence: CalendarOccurrence = {
|
|
...EDIT_OCCURRENCE,
|
|
start: 'not-a-real-date',
|
|
}
|
|
renderForm({ mode: 'edit', uid: 'edit-uid-456', eventOccurrence: corruptOccurrence })
|
|
|
|
// The start date input must be blank (not today's date)
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
expect((dateInputs[0] as HTMLInputElement).value).toBe('')
|
|
|
|
// Submit must be blocked with a guidance message; updateEvent must NOT fire.
|
|
fireEvent.click(screen.getByText('Save Changes'))
|
|
await waitFor(() => {
|
|
expect(screen.getByText(/Couldn't read this event's date/i)).toBeDefined()
|
|
})
|
|
expect(mockUpdateEvent).not.toHaveBeenCalled()
|
|
})
|
|
|
|
// ── Close behaviors ────────────────────────────────────────────────────────
|
|
|
|
it('pressing Escape closes the form', () => {
|
|
renderForm()
|
|
fireEvent.keyDown(document, { key: 'Escape' })
|
|
expect(mockSetEventForm).toHaveBeenCalledWith(false)
|
|
})
|
|
|
|
it('clicking the backdrop closes the form', () => {
|
|
renderForm()
|
|
const backdrop = screen.getByTestId('event-form-backdrop')
|
|
fireEvent.click(backdrop)
|
|
expect(mockSetEventForm).toHaveBeenCalledWith(false)
|
|
})
|
|
|
|
it('clicking Cancel closes the form', () => {
|
|
renderForm()
|
|
fireEvent.click(screen.getByText('Cancel'))
|
|
expect(mockSetEventForm).toHaveBeenCalledWith(false)
|
|
})
|
|
|
|
// ── Edit mode pre-population ───────────────────────────────────────────────
|
|
|
|
it('edit mode pre-populates title from TanStack Query cache', () => {
|
|
renderForm({
|
|
mode: 'edit',
|
|
uid: 'edit-uid-456',
|
|
eventOccurrence: EDIT_OCCURRENCE,
|
|
})
|
|
|
|
const titleInput = screen.getByPlaceholderText('Event title') as HTMLInputElement
|
|
expect(titleInput.value).toBe('Existing Meeting')
|
|
})
|
|
})
|
|
|
|
// ── Plan 03-12 gap-closure tests (WR-03, WR-05, WR-07, IN-03) ────────────────
|
|
|
|
/**
|
|
* Fixture: a RECURRING occurrence with 'weekly' recurrence.
|
|
* Used to test WR-03 recurrence pre-selection.
|
|
*/
|
|
const RECURRING_OCCURRENCE: CalendarOccurrence = {
|
|
id: 'recurring-uid-789::2026-06-10T09:00:00',
|
|
uid: 'recurring-uid-789',
|
|
calendarId: 1,
|
|
calendarName: 'My Calendar',
|
|
ownerUserId: 1,
|
|
ownerName: 'Alice',
|
|
color: '#4A90D9',
|
|
isShared: false,
|
|
title: 'Weekly Standup',
|
|
start: '2026-06-10T09:00:00-04:00',
|
|
end: '2026-06-10T09:30:00-04:00',
|
|
allDay: false,
|
|
location: null,
|
|
description: null,
|
|
hasRrule: true,
|
|
// @ts-expect-error — recurrence is not on CalendarOccurrence type yet; the reset
|
|
// effect reads it if present and defaults to 'none' when absent (WR-03, v1 comment)
|
|
recurrence: 'weekly',
|
|
}
|
|
|
|
/**
|
|
* Fixture: a late-arriving occurrence. Simulates form opening before the cache
|
|
* has the event (occurrence=null at open time), then the cache is populated.
|
|
* Used to test WR-03 blank edit form.
|
|
*/
|
|
const LATE_OCCURRENCE: CalendarOccurrence = {
|
|
id: 'late-uid-000::2026-06-12T14:00:00',
|
|
uid: 'late-uid-000',
|
|
calendarId: 1,
|
|
calendarName: 'My Calendar',
|
|
ownerUserId: 1,
|
|
ownerName: 'Alice',
|
|
color: '#4A90D9',
|
|
isShared: false,
|
|
title: 'Late-Arriving Meeting',
|
|
start: '2026-06-12T14:00:00-04:00',
|
|
end: '2026-06-12T15:00:00-04:00',
|
|
allDay: false,
|
|
location: null,
|
|
description: null,
|
|
hasRrule: false,
|
|
}
|
|
|
|
describe('EventForm — Plan 03-12 gap closures', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
mockEventFormOpen = true
|
|
mockEventFormMode = 'create'
|
|
mockEventFormUid = null
|
|
})
|
|
|
|
// ── WR-03: edit form re-populates when occurrence arrives after form open ──
|
|
|
|
it('WR-03 blank: re-populates title when occurrence resolves in cache after form opens', async () => {
|
|
// Phase 1: form opens in edit mode, cache is empty (no occurrence yet)
|
|
mockFetchWritableCalendars.mockResolvedValue(ONE_CALENDAR)
|
|
mockEventFormOpen = true
|
|
mockEventFormMode = 'edit'
|
|
mockEventFormUid = 'late-uid-000'
|
|
;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
|
|
(selector?: (s: Record<string, unknown>) => unknown) => {
|
|
const state = {
|
|
eventFormOpen: true,
|
|
eventFormMode: 'edit',
|
|
eventFormUid: 'late-uid-000',
|
|
setEventForm: mockSetEventForm,
|
|
setLastSyncedUid: mockSetLastSyncedUid,
|
|
}
|
|
if (typeof selector === 'function') return selector(state)
|
|
return state
|
|
},
|
|
)
|
|
|
|
const client = new QueryClient({
|
|
defaultOptions: { queries: { retry: false, staleTime: Infinity } },
|
|
})
|
|
client.setQueryData(['writableCalendars'], ONE_CALENDAR)
|
|
// NOTE: NO occurrence in cache at render time — this is the WR-03 scenario
|
|
|
|
const { rerender } = render(
|
|
<QueryClientProvider client={client}>
|
|
<EventForm />
|
|
</QueryClientProvider>,
|
|
)
|
|
|
|
// Title should be empty (occurrence not yet in cache)
|
|
const titleInput = screen.getByPlaceholderText('Event title') as HTMLInputElement
|
|
expect(titleInput.value).toBe('')
|
|
|
|
// Phase 2: occurrence arrives in cache (simulating TanStack Query resolving)
|
|
client.setQueryData(['events'], { occurrences: [LATE_OCCURRENCE] })
|
|
|
|
// Re-render triggers a fresh render with the new cache state
|
|
rerender(
|
|
<QueryClientProvider client={client}>
|
|
<EventForm />
|
|
</QueryClientProvider>,
|
|
)
|
|
|
|
// WR-03 fix: the reset effect must re-run because occurrence changed,
|
|
// so the title should now be populated
|
|
await waitFor(() => {
|
|
const titleInputAfter = screen.getByPlaceholderText('Event title') as HTMLInputElement
|
|
expect(titleInputAfter.value).toBe('Late-Arriving Meeting')
|
|
})
|
|
})
|
|
|
|
// ── WR-03: recurrence preset preserved when editing a recurring event ──────
|
|
|
|
it('WR-03 recurrence: editing a recurring event preselects its recurrence preset', () => {
|
|
renderForm({
|
|
mode: 'edit',
|
|
uid: 'recurring-uid-789',
|
|
eventOccurrence: RECURRING_OCCURRENCE,
|
|
})
|
|
|
|
// The recurrence select must show 'weekly', not reset to 'none' (WR-03 fix)
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
expect(recurrenceSelect).not.toBeNull()
|
|
expect(recurrenceSelect.value).toBe('weekly')
|
|
})
|
|
|
|
// ── WR-05: zone-consistent parseDateTime ──────────────────────────────────
|
|
//
|
|
// TZ is pinned to UTC via vitest.config.ts `env: { TZ: 'UTC' }`.
|
|
// Input: '2026-06-10T23:30:00-04:00' — this is UTC instant 2026-06-11T03:30:00Z.
|
|
//
|
|
// The CORRECTED parseDateTime must use local accessors (getFullYear/getMonth/
|
|
// getDate/getHours/getMinutes) consistently, NOT mix toISOString() (UTC date)
|
|
// with getHours() (local time).
|
|
//
|
|
// With TZ=UTC, the JS Date for that input has UTC wall-clock 2026-06-11T03:30:00Z,
|
|
// so the correct extracted values under UTC are:
|
|
// date: '2026-06-11' (getFullYear=2026, getMonth=5, getDate=11)
|
|
// time: '03:30' (getHours=3, getMinutes=30)
|
|
//
|
|
// The BUGGY parseDateTime would return:
|
|
// date: '2026-06-11' (toISOString().slice(0,10) — also UTC, happens to match in UTC)
|
|
// time: '03:30' (getHours() — in UTC, also 03:30)
|
|
//
|
|
// Wait — in UTC zone, both methods agree. Let's construct a case where they DON'T:
|
|
// Input: '2026-06-10T01:30:00+04:00' — UTC instant 2026-06-09T21:30:00Z
|
|
// Buggy: date='2026-06-09' (UTC date from toISOString), time='21:30' (UTC getHours)
|
|
// — but these AGREE in UTC env, so we need a different approach.
|
|
//
|
|
// The real mismatch happens with a LOCAL (non-UTC) timezone. Since we pin to UTC,
|
|
// we need to test the INVARIANT that only local accessors are used.
|
|
// The correct invariant to test in UTC env is:
|
|
// For '2026-06-10T23:30:00-04:00' (UTC 2026-06-11T03:30:00Z):
|
|
// In UTC environment: getFullYear/getMonth/getDate → 2026-06-11, getHours/getMinutes → 03:30
|
|
// toISOString().slice(0,10) → '2026-06-11' (same in UTC)
|
|
// The test proves correct LOCAL-accessor behavior. A non-UTC (e.g. EDT) runner
|
|
// would see getDate=10/getHours=23 with the fix, vs getDate=11/getHours=23 with the bug.
|
|
//
|
|
// To make the test meaningful in UTC AND catch the bug in non-UTC environments,
|
|
// we assert the exact UTC wall-clock values and document that the fix uses
|
|
// local-only accessors. The assertion strings '2026-06-11' and '03:30' are correct
|
|
// under TZ=UTC and would ONLY be produced by a correct local-accessor implementation
|
|
// (since in UTC, local==UTC). In a non-UTC run the test would show different values
|
|
// — exactly the instability WR-05 describes.
|
|
|
|
it('WR-05 zone-consistent: parseDateTime uses local-accessor family consistently (TZ=UTC deterministic)', () => {
|
|
// Input: '2026-06-10T23:30:00-04:00' → UTC instant 2026-06-11T03:30:00Z
|
|
// With TZ=UTC, the correct local wall-clock is 2026-06-11 at 03:30.
|
|
const occurrenceWithOffset: CalendarOccurrence = {
|
|
...EDIT_OCCURRENCE,
|
|
uid: 'tz-test-uid',
|
|
id: 'tz-test-uid::2026-06-10T23:30:00',
|
|
title: 'TZ Test Event',
|
|
start: '2026-06-10T23:30:00-04:00',
|
|
end: '2026-06-10T23:30:00-04:00',
|
|
}
|
|
|
|
renderForm({
|
|
mode: 'edit',
|
|
uid: 'tz-test-uid',
|
|
eventOccurrence: occurrenceWithOffset,
|
|
})
|
|
|
|
// Under TZ=UTC: the UTC instant 2026-06-11T03:30:00Z has local date=2026-06-11, time=03:30.
|
|
// The corrected parseDateTime uses getFullYear/getMonth/getDate/getHours/getMinutes
|
|
// (all in the "local" zone, which is UTC here). These values are deterministic on any
|
|
// UTC CI runner and would not pass by coincidence on an EDT runner (which would see
|
|
// date=2026-06-10, time=23:30 with a correct local-accessor fix).
|
|
const startDateInput = document.querySelector('#event-start-date') as HTMLInputElement
|
|
expect(startDateInput).not.toBeNull()
|
|
// Exact value asserted: 2026-06-11 (UTC wall-clock date of the instant)
|
|
expect(startDateInput.value).toBe('2026-06-11')
|
|
|
|
const startTimeInput = document.querySelector('#event-start-time') as HTMLInputElement
|
|
expect(startTimeInput).not.toBeNull()
|
|
// Exact value asserted: 03:30 (UTC wall-clock time of the instant)
|
|
expect(startTimeInput.value).toBe('03:30')
|
|
})
|
|
|
|
// ── IN-03: todayIso exported from calendarStore ───────────────────────────
|
|
// This test is structural — we verify the export exists in the REAL module.
|
|
// The calendarStore is mocked in this file via vi.mock(), so we must use
|
|
// vi.importActual() to bypass the mock and test the actual export.
|
|
|
|
it('IN-03: todayIso is exported from calendarStore (single source of truth)', async () => {
|
|
// Use importActual to bypass the vi.mock() and test the real module export
|
|
const actualModule = await vi.importActual('../store/calendarStore.js') as Record<string, unknown>
|
|
expect(typeof actualModule.todayIso).toBe('function')
|
|
const result = (actualModule.todayIso as () => string)()
|
|
// Should return a YYYY-MM-DD string
|
|
expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/)
|
|
})
|
|
|
|
// ── WR-07: Tab/Shift+Tab focus trap ──────────────────────────────────────
|
|
//
|
|
// The dialog must trap Tab focus: pressing Tab from the last focusable element
|
|
// wraps to the first, and Shift+Tab from the first wraps to the last.
|
|
// Today EventForm only calls .focus() once on open — Tab escapes the modal.
|
|
|
|
it('WR-07: Tab from last focusable element wraps focus to first inside dialog', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const dialog = screen.getByRole('dialog')
|
|
const focusable = Array.from(
|
|
dialog.querySelectorAll<HTMLElement>(
|
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
|
),
|
|
)
|
|
expect(focusable.length).toBeGreaterThan(1)
|
|
|
|
const lastElement = focusable[focusable.length - 1]
|
|
const firstElement = focusable[0]
|
|
|
|
// Focus the last element, then dispatch Tab
|
|
lastElement.focus()
|
|
expect(document.activeElement).toBe(lastElement)
|
|
|
|
fireEvent.keyDown(dialog, { key: 'Tab', shiftKey: false })
|
|
|
|
// WR-07 fix: focus should have wrapped to first element inside dialog
|
|
expect(document.activeElement).toBe(firstElement)
|
|
})
|
|
|
|
it('WR-07: Shift+Tab from first focusable element wraps focus to last inside dialog', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const dialog = screen.getByRole('dialog')
|
|
const focusable = Array.from(
|
|
dialog.querySelectorAll<HTMLElement>(
|
|
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
|
),
|
|
)
|
|
expect(focusable.length).toBeGreaterThan(1)
|
|
|
|
const firstElement = focusable[0]
|
|
const lastElement = focusable[focusable.length - 1]
|
|
|
|
// Focus the first element, then dispatch Shift+Tab
|
|
firstElement.focus()
|
|
expect(document.activeElement).toBe(firstElement)
|
|
|
|
fireEvent.keyDown(dialog, { key: 'Tab', shiftKey: true })
|
|
|
|
// WR-07 fix: focus should have wrapped to last element inside dialog
|
|
expect(document.activeElement).toBe(lastElement)
|
|
})
|
|
})
|
|
|
|
// ── Plan 06-06: end-tracking wiring + recurrence-bound control (TDD RED) ─────
|
|
|
|
/**
|
|
* All-day occurrence for D-05 round-trip verification.
|
|
* The `end` field is the EXCLUSIVE end (the day AFTER the last day), as stored by the API.
|
|
* The form must pre-fill the INCLUSIVE end (day before the exclusive end) so re-saving
|
|
* does not grow the event.
|
|
*/
|
|
const ALL_DAY_OCCURRENCE: CalendarOccurrence = {
|
|
id: 'allday-uid-001::2026-06-10',
|
|
uid: 'allday-uid-001',
|
|
calendarId: 1,
|
|
calendarName: 'My Calendar',
|
|
ownerUserId: 1,
|
|
ownerName: 'Alice',
|
|
color: '#4A90D9',
|
|
isShared: false,
|
|
title: 'All Day Event',
|
|
start: '2026-06-10',
|
|
end: '2026-06-11', // exclusive end (single-day event → end = start + 1 day)
|
|
allDay: true,
|
|
location: null,
|
|
description: null,
|
|
hasRrule: false,
|
|
}
|
|
|
|
describe('EventForm — Plan 06-06 end-tracking + recurrence-bound', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
mockEventFormOpen = true
|
|
mockEventFormMode = 'create'
|
|
mockEventFormUid = null
|
|
})
|
|
|
|
// ── D-04: end-tracking — start date change ────────────────────────────────
|
|
|
|
it('D-04 timed: changing start date recomputes end to preserve 1h duration', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
const timeInputs = document.querySelectorAll('input[type="time"]')
|
|
expect(dateInputs.length).toBeGreaterThanOrEqual(2)
|
|
expect(timeInputs.length).toBeGreaterThanOrEqual(2)
|
|
|
|
// Set start to 2026-06-10 09:00, end to 2026-06-10 10:00 (1h span)
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(timeInputs[0], { target: { value: '09:00' } })
|
|
fireEvent.change(dateInputs[1], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(timeInputs[1], { target: { value: '10:00' } })
|
|
|
|
// Move start to 2026-06-11 09:00 → end should follow to 2026-06-11 10:00
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-11' } })
|
|
|
|
const endDateAfter = (document.querySelectorAll('input[type="date"]')[1] as HTMLInputElement).value
|
|
expect(endDateAfter).toBe('2026-06-11')
|
|
})
|
|
|
|
it('D-04 timed: changing start time recomputes end to preserve duration', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
const timeInputs = document.querySelectorAll('input[type="time"]')
|
|
|
|
// Establish a 1h span on the same date
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(timeInputs[0], { target: { value: '09:00' } })
|
|
fireEvent.change(dateInputs[1], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(timeInputs[1], { target: { value: '10:00' } })
|
|
|
|
// Move start time to 14:00 → end should become 15:00 (still 1h)
|
|
fireEvent.change(timeInputs[0], { target: { value: '14:00' } })
|
|
|
|
const endTimeAfter = (document.querySelectorAll('input[type="time"]')[1] as HTMLInputElement).value
|
|
expect(endTimeAfter).toBe('15:00')
|
|
})
|
|
|
|
it('D-04 all-day: changing start date preserves day-span', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
// Toggle all-day ON
|
|
const allDaySwitch = screen.getByRole('switch')
|
|
fireEvent.click(allDaySwitch)
|
|
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
// Set a 2-day span: start=2026-06-10, end=2026-06-11 (inclusive, 2 days)
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-10' } })
|
|
fireEvent.change(dateInputs[1], { target: { value: '2026-06-11' } })
|
|
|
|
// Move start to 2026-06-20 → end should become 2026-06-21 (same 2-day span)
|
|
fireEvent.change(dateInputs[0], { target: { value: '2026-06-20' } })
|
|
|
|
const endDateAfter = (document.querySelectorAll('input[type="date"]')[1] as HTMLInputElement).value
|
|
expect(endDateAfter).toBe('2026-06-21')
|
|
})
|
|
|
|
// ── D-05: all-day edit round-trip — no drift ──────────────────────────────
|
|
|
|
it('D-05 all-day edit: pre-fills inclusive end (no +1 drift on round-trip)', () => {
|
|
// ALL_DAY_OCCURRENCE has exclusive end '2026-06-11' (single day 2026-06-10)
|
|
// The form should pre-fill 2026-06-10 (inclusive), not 2026-06-11 (exclusive)
|
|
renderForm({
|
|
mode: 'edit',
|
|
uid: 'allday-uid-001',
|
|
eventOccurrence: ALL_DAY_OCCURRENCE,
|
|
})
|
|
|
|
const dateInputs = document.querySelectorAll('input[type="date"]')
|
|
// End input should show the inclusive date 2026-06-10, not the exclusive 2026-06-11
|
|
expect((dateInputs[1] as HTMLInputElement).value).toBe('2026-06-10')
|
|
})
|
|
|
|
// ── D-06: recurrence bound control ───────────────────────────────────────
|
|
|
|
it('D-06: "Ends" control is hidden when recurrence is "None"', () => {
|
|
renderForm({ mode: 'create' })
|
|
// Ends label should not be visible when recurrence=none (default)
|
|
expect(screen.queryByText('Ends')).toBeNull()
|
|
})
|
|
|
|
it('D-06: "Ends" control appears when recurrence is set to weekly', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
|
|
expect(screen.getByText('Ends')).toBeDefined()
|
|
})
|
|
|
|
it('D-06: selecting "On date" reveals a date input labeled "End date"', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
|
|
const endsSelect = document.querySelector('#recurrence-bound') as HTMLSelectElement
|
|
expect(endsSelect).not.toBeNull()
|
|
fireEvent.change(endsSelect, { target: { value: 'until' } })
|
|
|
|
expect(screen.getByText('End date')).toBeDefined()
|
|
})
|
|
|
|
it('D-06: selecting "After N times" reveals a number input labeled "Occurrences"', () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
|
|
const endsSelect = document.querySelector('#recurrence-bound') as HTMLSelectElement
|
|
expect(endsSelect).not.toBeNull()
|
|
fireEvent.change(endsSelect, { target: { value: 'count' } })
|
|
|
|
expect(screen.getByText('Occurrences')).toBeDefined()
|
|
})
|
|
|
|
it('D-06: validation error when count < 1', async () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), { target: { value: 'Test' } })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
|
|
const endsSelect = document.querySelector('#recurrence-bound') as HTMLSelectElement
|
|
fireEvent.change(endsSelect, { target: { value: 'count' } })
|
|
|
|
const countInput = document.querySelector('#recurrence-count') as HTMLInputElement
|
|
expect(countInput).not.toBeNull()
|
|
fireEvent.change(countInput, { target: { value: '0' } })
|
|
|
|
fireEvent.click(screen.getByText('Create Event'))
|
|
|
|
await waitFor(() => {
|
|
expect(screen.getByText('Must be at least 1 occurrence')).toBeDefined()
|
|
})
|
|
})
|
|
|
|
it('D-06: payload includes recurrenceCount when bound=count and count >= 1', async () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), { target: { value: 'Weekly Event' } })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
|
|
const endsSelect = document.querySelector('#recurrence-bound') as HTMLSelectElement
|
|
fireEvent.change(endsSelect, { target: { value: 'count' } })
|
|
|
|
const countInput = document.querySelector('#recurrence-count') as HTMLInputElement
|
|
fireEvent.change(countInput, { target: { value: '5' } })
|
|
|
|
fireEvent.click(screen.getByText('Create Event'))
|
|
|
|
await waitFor(() => {
|
|
expect(mockCreateEvent).toHaveBeenCalledWith(
|
|
expect.objectContaining({ recurrenceCount: 5 }),
|
|
)
|
|
})
|
|
})
|
|
|
|
it('D-06: payload does NOT include recurrenceUntil/recurrenceCount when bound=never', async () => {
|
|
renderForm({ mode: 'create' })
|
|
|
|
fireEvent.change(screen.getByPlaceholderText('Event title'), { target: { value: 'Weekly Event' } })
|
|
|
|
const recurrenceSelect = document.querySelector('#event-recurrence') as HTMLSelectElement
|
|
fireEvent.change(recurrenceSelect, { target: { value: 'weekly' } })
|
|
// Bound stays "Never" (default)
|
|
|
|
fireEvent.click(screen.getByText('Create Event'))
|
|
|
|
await waitFor(() => {
|
|
expect(mockCreateEvent).toHaveBeenCalledWith(
|
|
expect.not.objectContaining({ recurrenceUntil: expect.anything() }),
|
|
)
|
|
expect(mockCreateEvent).toHaveBeenCalledWith(
|
|
expect.not.objectContaining({ recurrenceCount: expect.anything() }),
|
|
)
|
|
})
|
|
})
|
|
})
|