test(03-06): add failing tests for EventDetailPopover footer and DeleteConfirmationDialog

apps/pwa/src/components/EventDetailPopover.test.tsx

@@ -19,14 +19,28 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 // ── Module mocks ──────────────────────────────────────────────────────────────
 
-const mockSetOpenEventId = vi.fn()
+const {
+  mockSetOpenEventId,
+  mockSetEventForm,
+  mockSetDeleteDialog,
+} = vi.hoisted(() => ({
+  mockSetOpenEventId: vi.fn(),
+  mockSetEventForm: vi.fn(),
+  mockSetDeleteDialog: vi.fn(),
+}))
 let mockOpenEventId: string | null = null
 
 vi.mock('../store/calendarStore.js', () => ({
-  useCalendarStore: vi.fn(() => ({
-    openEventId: mockOpenEventId,
-    setOpenEventId: mockSetOpenEventId,
-  })),
+  useCalendarStore: vi.fn((selector?: (s: Record<string, unknown>) => unknown) => {
+    const state = {
+      openEventId: mockOpenEventId,
+      setOpenEventId: mockSetOpenEventId,
+      setEventForm: mockSetEventForm,
+      setDeleteDialog: mockSetDeleteDialog,
+    }
+    if (typeof selector === 'function') return selector(state)
+    return state
+  }),
 }))
 
 // ── Fixtures ───────────────────────────────────────────────────────────────────
@@ -85,10 +99,18 @@ import { useCalendarStore } from '../store/calendarStore.js'
 
 function renderPopover(occurrence = TIMED_OCCURRENCE) {
   mockOpenEventId = occurrence.id
-  ;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(() => ({
-    openEventId: mockOpenEventId,
-    setOpenEventId: mockSetOpenEventId,
-  }))
+  ;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
+    (selector?: (s: Record<string, unknown>) => unknown) => {
+      const state = {
+        openEventId: mockOpenEventId,
+        setOpenEventId: mockSetOpenEventId,
+        setEventForm: mockSetEventForm,
+        setDeleteDialog: mockSetDeleteDialog,
+      }
+      if (typeof selector === 'function') return selector(state)
+      return state
+    },
+  )
 
   const client = new QueryClient({
     defaultOptions: { queries: { retry: false, staleTime: Infinity } },
@@ -178,10 +200,18 @@ describe('EventDetailPopover', () => {
 
   it('renders nothing when openEventId is null', () => {
     mockOpenEventId = null
-    ;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(() => ({
-      openEventId: null,
-      setOpenEventId: mockSetOpenEventId,
-    }))
+    ;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
+      (selector?: (s: Record<string, unknown>) => unknown) => {
+        const state = {
+          openEventId: null,
+          setOpenEventId: mockSetOpenEventId,
+          setEventForm: mockSetEventForm,
+          setDeleteDialog: mockSetDeleteDialog,
+        }
+        if (typeof selector === 'function') return selector(state)
+        return state
+      },
+    )
     const client = new QueryClient({
       defaultOptions: { queries: { retry: false, staleTime: Infinity } },
     })
@@ -210,6 +240,31 @@ describe('EventDetailPopover', () => {
     expect(descEl.textContent).toContain('<b>Bold</b> description')
   })
 
+  // ── Phase 3 footer: Edit/Delete actions ────────────────────────────────────
+
+  it('footer renders an "Edit" button', () => {
+    renderPopover(TIMED_OCCURRENCE)
+    expect(screen.getByRole('button', { name: /edit/i })).toBeInTheDocument()
+  })
+
+  it('footer renders a "Delete" button', () => {
+    renderPopover(TIMED_OCCURRENCE)
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument()
+  })
+
+  it('clicking "Edit" opens EventForm in edit mode and closes popover', () => {
+    renderPopover(TIMED_OCCURRENCE)
+    fireEvent.click(screen.getByRole('button', { name: /edit/i }))
+    expect(mockSetEventForm).toHaveBeenCalledWith(true, 'edit', TIMED_OCCURRENCE.uid)
+    expect(mockSetOpenEventId).toHaveBeenCalledWith(null)
+  })
+
+  it('clicking "Delete" opens DeleteConfirmationDialog (setDeleteDialog)', () => {
+    renderPopover(TIMED_OCCURRENCE)
+    fireEvent.click(screen.getByRole('button', { name: /delete/i }))
+    expect(mockSetDeleteDialog).toHaveBeenCalledWith(true, TIMED_OCCURRENCE.uid)
+  })
+
   it('BUG-3 regression: IANA-bracketed start/end does not produce "Invalid Date" in rendered output', () => {
     // Fastmail events are serialized with IANA bracket notation e.g. '2026-06-18T08:00:00-04:00[America/Toronto]'.
     // new Date() cannot parse the bracket, so the date/time line showed "Invalid Date, Invalid Date – Invalid Date".