Description
components/events/events-table.tsx (EventsTable) renders the paginated events grid (Title, Category, Odds, End Date, Time Remaining, Participants, Actions), drives sorting through the useEventsStore setters, slices rows by pagination.page/pageSize, and owns a delete-confirmation dialog wired to deleteEvent in lib/events-store.ts. Despite being the central data-table of the dashboard, it has no test file — the only events test today is components/events/__tests__/virtualized-events-list.integration.test.tsx, which covers the separate virtualized list. This issue adds focused unit tests for EventsTable and its interaction with the store.
Requirements and context
- Add
components/events/__tests__/events-table.test.tsx rendering EventsTable against the real useEventsStore (reset store state in beforeEach).
- Cover: column headers render; the current page shows exactly
pageSize rows; sorting toggles sort.field/direction; the empty state ("No events found") appears when filteredEvents is empty.
- Cover the delete flow: clicking the row action opens the confirmation dialog, confirming calls
deleteEvent and removes the row, cancelling leaves the row intact.
- Non-functional: tests must be deterministic (mock timers for the live countdown that ticks every second) and must not depend on real network or wall-clock time.
- Follow the existing Jest + React Testing Library conventions used in
components/ui/__tests__/ (role-based queries, userEvent).
Acceptance criteria
Suggested execution
1. Fork the repo and create a branch — git checkout -b feature/events-table-tests.
2. Implement changes — add components/events/__tests__/events-table.test.tsx; if a store helper for resetting state is missing, add a small test util under lib/__tests__/.
3. Write/extend tests — this repo uses Jest + React Testing Library (@testing-library/react, @testing-library/user-event, @testing-library/jest-dom) run with pnpm; jest.config.js maps @/ to the repo root and uses jest-environment-jsdom. Place tests in a sibling __tests__/ folder per the existing layout.
4. Test and commit —
pnpm install
pnpm test
pnpm test:coverage
pnpm lint
Example commit message
test(events): cover EventsTable sorting, pagination, and delete-confirmation flow
Guidelines
- Raise coverage for
events-table.tsx from the current 0% to >=90% line coverage.
- Use accessible queries (
getByRole) so the tests double as a light a11y check; document any new test utility in a short comment.
- Timeframe: 96 hours.
Description
components/events/events-table.tsx(EventsTable) renders the paginated events grid (Title, Category, Odds, End Date, Time Remaining, Participants, Actions), drives sorting through theuseEventsStoresetters, slices rows bypagination.page/pageSize, and owns a delete-confirmation dialog wired todeleteEventinlib/events-store.ts. Despite being the central data-table of the dashboard, it has no test file — the only events test today iscomponents/events/__tests__/virtualized-events-list.integration.test.tsx, which covers the separate virtualized list. This issue adds focused unit tests forEventsTableand its interaction with the store.Requirements and context
components/events/__tests__/events-table.test.tsxrenderingEventsTableagainst the realuseEventsStore(reset store state inbeforeEach).pageSizerows; sorting togglessort.field/direction; the empty state ("No events found") appears whenfilteredEventsis empty.deleteEventand removes the row, cancelling leaves the row intact.components/ui/__tests__/(role-based queries,userEvent).Acceptance criteria
components/events/__tests__/events-table.test.tsxexists and passes underpnpm test.useEventsStore.getState().sortvalue.events-table.tsx.Suggested execution
1. Fork the repo and create a branch —
git checkout -b feature/events-table-tests.2. Implement changes — add
components/events/__tests__/events-table.test.tsx; if a store helper for resetting state is missing, add a small test util underlib/__tests__/.3. Write/extend tests — this repo uses Jest + React Testing Library (
@testing-library/react,@testing-library/user-event,@testing-library/jest-dom) run with pnpm;jest.config.jsmaps@/to the repo root and usesjest-environment-jsdom. Place tests in a sibling__tests__/folder per the existing layout.4. Test and commit —
pnpm install pnpm test pnpm test:coverage pnpm lintExample commit message
Guidelines
events-table.tsxfrom the current 0% to >=90% line coverage.getByRole) so the tests double as a light a11y check; document any new test utility in a short comment.