luckberg/familysync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(13-03): apply Prettier formatting across repo

Browse Source 
Mechanical reformat — no logic changes. 398 files changed, 19125
insertions(+), 16457 deletions(-). Prettier 3.8.4 with .prettierrc
(singleQuote:true, semi:true, tabWidth:2, trailingComma:all,
printWidth:100). Isolated per D-13-08 for reviewability.
This commit is contained in:
Lucas Berger
2026-06-11 20:35:18 -04:00
parent 4bc0445173
commit 982438dc10
398 changed files with 19050 additions and 16382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/pwa/src/components/EventDetailPopover.test.tsx
+110 -114
View File
@@ -9,26 +9,22 @@
* - Backdrop click closes the popover
*/
import 'temporal-polyfill/global'
import React from 'react'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import 'temporal-polyfill/global';
import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// window.matchMedia polyfilled in test-setup.ts
// ── Module mocks ──────────────────────────────────────────────────────────────
const {
mockSetOpenEventId,
mockSetEventForm,
mockSetDeleteDialog,
} = vi.hoisted(() => ({
const { mockSetOpenEventId, mockSetEventForm, mockSetDeleteDialog } = vi.hoisted(() => ({
mockSetOpenEventId: vi.fn(),
mockSetEventForm: vi.fn(),
mockSetDeleteDialog: vi.fn(),
}))
let mockOpenEventId: string | null = null
}));
let mockOpenEventId: string | null = null;
vi.mock('../store/calendarStore.js', () => ({
useCalendarStore: vi.fn((selector?: (s: Record<string, unknown>) => unknown) => {
@@ -37,15 +33,15 @@ vi.mock('../store/calendarStore.js', () => ({
setOpenEventId: mockSetOpenEventId,
setEventForm: mockSetEventForm,
setDeleteDialog: mockSetDeleteDialog,
}
if (typeof selector === 'function') return selector(state)
return state
};
if (typeof selector === 'function') return selector(state);
return state;
}),
}))
}));
// ── Fixtures ───────────────────────────────────────────────────────────────────
import type { CalendarOccurrence } from '../api/client.js'
import type { CalendarOccurrence } from '../api/client.js';
const TIMED_OCCURRENCE: CalendarOccurrence = {
id: 'test-uid::2026-06-15T10:00:00',
@@ -63,7 +59,7 @@ const TIMED_OCCURRENCE: CalendarOccurrence = {
location: 'Conference Room B',
description: 'Daily team sync meeting',
hasRrule: false,
}
};
const OCCURRENCE_WITH_HTML: CalendarOccurrence = {
...TIMED_OCCURRENCE,
@@ -72,7 +68,7 @@ const OCCURRENCE_WITH_HTML: CalendarOccurrence = {
title: '<script>alert("xss")</script>Team Meeting',
description: '<b>Bold</b> description',
location: '<img src=x onerror=alert(1)>Room',
}
};
const ALLDAY_OCCURRENCE: CalendarOccurrence = {
id: 'allday-uid::2026-06-20',
@@ -90,182 +86,182 @@ const ALLDAY_OCCURRENCE: CalendarOccurrence = {
location: null,
description: null,
hasRrule: false,
}
};
// ── Import component (after mocks are declared) ───────────────────────────────
import { EventDetailPopover } from './EventDetailPopover.js'
import { useCalendarStore } from '../store/calendarStore.js'
import { EventDetailPopover } from './EventDetailPopover.js';
import { useCalendarStore } from '../store/calendarStore.js';
// ── Helpers ───────────────────────────────────────────────────────────────────
function renderPopover(occurrence = TIMED_OCCURRENCE) {
mockOpenEventId = occurrence.id
;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
mockOpenEventId = occurrence.id;
(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
};
if (typeof selector === 'function') return selector(state);
return state;
},
)
);
const client = new QueryClient({
defaultOptions: { queries: { retry: false, staleTime: Infinity } },
})
});
// Pre-populate the events cache so EventDetailPopover can resolve by id
client.setQueryData(['events'], { occurrences: [occurrence] })
client.setQueryData(['events'], { occurrences: [occurrence] });
return render(
<QueryClientProvider client={client}>
<EventDetailPopover />
</QueryClientProvider>,
)
);
}
// ── Tests ─────────────────────────────────────────────────────────────────────
describe('EventDetailPopover', () => {
beforeEach(() => {
vi.clearAllMocks()
mockOpenEventId = null
})
vi.clearAllMocks();
mockOpenEventId = null;
});
it('renders the event title as a heading', () => {
renderPopover(TIMED_OCCURRENCE)
expect(screen.getByRole('heading')).toHaveTextContent('Team Standup')
})
renderPopover(TIMED_OCCURRENCE);
expect(screen.getByRole('heading')).toHaveTextContent('Team Standup');
});
it('renders location when present', () => {
renderPopover(TIMED_OCCURRENCE)
expect(screen.getByText(/Conference Room B/)).toBeDefined()
})
renderPopover(TIMED_OCCURRENCE);
expect(screen.getByText(/Conference Room B/)).toBeDefined();
});
it('renders description when present', () => {
renderPopover(TIMED_OCCURRENCE)
expect(screen.getByText(/Daily team sync meeting/)).toBeDefined()
})
renderPopover(TIMED_OCCURRENCE);
expect(screen.getByText(/Daily team sync meeting/)).toBeDefined();
});
it('renders owner name in footer for personal events', () => {
renderPopover(TIMED_OCCURRENCE)
renderPopover(TIMED_OCCURRENCE);
// TIMED_OCCURRENCE is personal (isShared:false) with ownerName:'Alice'
expect(screen.getByText(/Alice/)).toBeDefined()
})
expect(screen.getByText(/Alice/)).toBeDefined();
});
it('renders "Family" in footer for shared calendar events', () => {
renderPopover(ALLDAY_OCCURRENCE)
renderPopover(ALLDAY_OCCURRENCE);
// ALLDAY_OCCURRENCE has isShared:true — footer must show 'Family'
expect(screen.getByText('Family')).toBeDefined()
})
expect(screen.getByText('Family')).toBeDefined();
});
it('renders calendarName in footer when ownerName is null', () => {
const noOwnerName: CalendarOccurrence = {
...TIMED_OCCURRENCE,
id: 'no-owner-uid::2026-06-15T10:00:00',
ownerName: null,
}
renderPopover(noOwnerName)
expect(screen.getByText(/My Calendar/)).toBeDefined()
})
};
renderPopover(noOwnerName);
expect(screen.getByText(/My Calendar/)).toBeDefined();
});
it('renders an all-day event without crashing', () => {
renderPopover(ALLDAY_OCCURRENCE)
expect(screen.getByRole('heading')).toHaveTextContent('Birthday Party')
})
renderPopover(ALLDAY_OCCURRENCE);
expect(screen.getByRole('heading')).toHaveTextContent('Birthday Party');
});
it('close button has aria-label="Close"', () => {
renderPopover(TIMED_OCCURRENCE)
expect(screen.getByLabelText('Close')).toBeDefined()
})
renderPopover(TIMED_OCCURRENCE);
expect(screen.getByLabelText('Close')).toBeDefined();
});
it('pressing Escape calls setOpenEventId(null)', () => {
renderPopover(TIMED_OCCURRENCE)
fireEvent.keyDown(document, { key: 'Escape' })
expect(mockSetOpenEventId).toHaveBeenCalledWith(null)
})
renderPopover(TIMED_OCCURRENCE);
fireEvent.keyDown(document, { key: 'Escape' });
expect(mockSetOpenEventId).toHaveBeenCalledWith(null);
});
it('clicking the close button calls setOpenEventId(null)', () => {
renderPopover(TIMED_OCCURRENCE)
fireEvent.click(screen.getByLabelText('Close'))
expect(mockSetOpenEventId).toHaveBeenCalledWith(null)
})
renderPopover(TIMED_OCCURRENCE);
fireEvent.click(screen.getByLabelText('Close'));
expect(mockSetOpenEventId).toHaveBeenCalledWith(null);
});
it('clicking the backdrop calls setOpenEventId(null)', () => {
renderPopover(TIMED_OCCURRENCE)
fireEvent.click(screen.getByTestId('popover-backdrop'))
expect(mockSetOpenEventId).toHaveBeenCalledWith(null)
})
renderPopover(TIMED_OCCURRENCE);
fireEvent.click(screen.getByTestId('popover-backdrop'));
expect(mockSetOpenEventId).toHaveBeenCalledWith(null);
});
it('renders nothing when openEventId is null', () => {
mockOpenEventId = null
;(useCalendarStore as unknown as ReturnType<typeof vi.fn>).mockImplementation(
mockOpenEventId = null;
(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
};
if (typeof selector === 'function') return selector(state);
return state;
},
)
);
const client = new QueryClient({
defaultOptions: { queries: { retry: false, staleTime: Infinity } },
})
});
const { container } = render(
<QueryClientProvider client={client}>
<EventDetailPopover />
</QueryClientProvider>,
)
expect(container.firstChild).toBeNull()
})
);
expect(container.firstChild).toBeNull();
});
it('XSS guard: HTML in title renders as escaped text, not as DOM elements', () => {
renderPopover(OCCURRENCE_WITH_HTML)
const heading = screen.getByRole('heading')
renderPopover(OCCURRENCE_WITH_HTML);
const heading = screen.getByRole('heading');
// <script> must NOT be injected as a DOM element
expect(heading.innerHTML).not.toContain('<script>')
expect(heading.innerHTML).not.toContain('<script>');
// The raw text including angle brackets must appear as literal text
expect(heading.textContent).toContain('<script>alert("xss")</script>Team Meeting')
})
expect(heading.textContent).toContain('<script>alert("xss")</script>Team Meeting');
});
it('XSS guard: HTML in description renders as escaped text', () => {
renderPopover(OCCURRENCE_WITH_HTML)
const descEl = screen.getByTestId('event-description')
renderPopover(OCCURRENCE_WITH_HTML);
const descEl = screen.getByTestId('event-description');
// <b> must NOT be rendered as a bold element
expect(descEl.innerHTML).not.toContain('<b>')
expect(descEl.textContent).toContain('<b>Bold</b> description')
})
expect(descEl.innerHTML).not.toContain('<b>');
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()
})
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()
})
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)
})
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)
})
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]'.
@@ -277,16 +273,16 @@ describe('EventDetailPopover', () => {
uid: 'iana-bracket-uid',
start: '2026-06-18T08:00:00-04:00[America/Toronto]',
end: '2026-06-18T09:00:00-04:00[America/Toronto]',
}
renderPopover(occurrence)
};
renderPopover(occurrence);
// The date/time text must not contain 'Invalid Date'
const dialogEl = screen.getByRole('dialog')
expect(dialogEl.textContent).not.toContain('Invalid Date')
const dialogEl = screen.getByRole('dialog');
expect(dialogEl.textContent).not.toContain('Invalid Date');
// It must contain recognizable date content (month name or a digit)
// toLocaleDateString output varies by locale; check for a digit at minimum
const dateTimeText = dialogEl.textContent ?? ''
expect(dateTimeText).toMatch(/\d/)
})
})
const dateTimeText = dialogEl.textContent ?? '';
expect(dateTimeText).toMatch(/\d/);
});
});