Skip to content

Test: Component: Customer Active Deliveries (Table View) Pagination - #527

Open
Deb-Auth wants to merge 1 commit into
SwiftChainn:mainfrom
Deb-Auth:test-comp-deliveries-table
Open

Test: Component: Customer Active Deliveries (Table View) Pagination#527
Deb-Auth wants to merge 1 commit into
SwiftChainn:mainfrom
Deb-Auth:test-comp-deliveries-table

Conversation

@Deb-Auth

Copy link
Copy Markdown

closes #495

Summary

Adds automated component tests covering pagination of the customer Active Deliveries table view, together with the table view itself and the pagination hook it needs.

The repository had no table view for active deliveries at the time of writing — components/DeliveryList.tsx renders an unpaginated card list — so there was no subject for the tests this issue asks for. This PR therefore adds the minimum implementation required to make the behaviour testable, following the project's Component -> Hook -> Service layering, then tests it thoroughly.

What was added

hooks/useTablePagination.ts — a generic client-side pagination hook.

  • Default page size of 10, matching the threshold called out in the issue.
  • The visible page index is derived rather than stored, clamped against the current dataset. A shrinking dataset (a filter being applied, rows being removed) can therefore never strand the table on a page that no longer exists.
  • Guards against a zero or negative page size and against dividing by zero on an empty dataset.

features/deliveries/components/ActiveDeliveriesTable.tsx — the table view.

  • Renders tracking number, route, status, amount and creation date.
  • Pagination controls (Previous / numbered pages / Next) appear only when there is more than one page.
  • A Showing X-Y of N deliveries summary, plus loading, error (with optional retry) and empty states.
  • Exported from features/deliveries/components/index.ts alongside DeliveryFilters.

Test coverage

features/deliveries/components/__tests__/ActiveDeliveriesTable.test.tsx (18 tests)

  • Happy path: rows render with their tracking number, route, status and amount; controls are hidden when the data fits on one page.
  • Pagination beyond 10 rows: only the first 10 rows render; Next / Previous / numbered jumps move between pages; the final partial page renders its real row count rather than padding; Previous is disabled on the first page and Next on the last; a custom pageSize is respected; the view falls back to the last valid page when the dataset shrinks beneath the current page.
  • Edge cases: empty state renders and suppresses the table; loading and error states render in place of the table and take precedence in that order; the retry button is omitted when no handler is supplied; an unparseable date renders a placeholder; a missing currency falls back to XLM.

hooks/__tests__/useTablePagination.test.ts (10 tests)

Page-size defaults, page splitting, range reporting, clamping at both ends, out-of-range goToPage requests, dataset shrinkage, the empty dataset, custom page sizes and a non-positive page size.

Mocking of external dependencies

None is required, and that is deliberate. The table is a pure presentational component fed entirely by props, and the pagination hook is pure state — no API, wallet or WebSocket is involved on either path. That removes the main source of flakiness in this suite rather than papering over it with mocks.

Verification

  • npx jest features/deliveries/components/__tests__/ActiveDeliveriesTable.test.tsx hooks/__tests__/useTablePagination.test.ts — 28 tests pass.
  • pnpm test — the full suite goes from 921 to 949 tests with no change to the set of pre-existing failures.
  • npx eslint on every changed file — no errors.
  • pnpm run type-check — no new errors.

Note for the maintainer

CI on main is currently red before any of this, and these changes do not fix or worsen it:

  1. components/mobile/MobileFooter.tsx has lost every quote character in the file (line 1 reads ​`use client and line 3 import React from react). This is a hard parse error that fails pnpm run lint, pnpm run type-check and pnpm run build on main today.
  2. 21 test suites already fail on main, largely around the wallet/Freighter mocks (useWallet, useTheme, WalletConnect, MultiSigApprovals and related).

Both look like they need a maintainer decision rather than a drive-by fix from a test PR, so I have deliberately left them untouched to keep this diff scoped to the issue.

@drips-wave

drips-wave Bot commented Aug 29, 2026

Copy link
Copy Markdown

@Deb-Auth Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Test] Component: Customer Active Deliveries (Table View) Pagination

1 participant