Skip to content

Add unit tests for EventsTable sorting, pagination, and delete-confirmation flow #201

Description

@greatest0fallt1me

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

  • components/events/__tests__/events-table.test.tsx exists and passes under pnpm test.
  • Sorting interaction asserts the resulting useEventsStore.getState().sort value.
  • Pagination slicing is asserted for at least two pages.
  • Delete-confirmation dialog open/confirm/cancel paths are all covered.
  • The per-second countdown is controlled with fake timers so tests are non-flaky.
  • New lines added/touched in the test reach >=90% coverage for events-table.tsx.

Suggested execution

1. Fork the repo and create a branchgit 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions