Skip to content

test: cover NavLink trailing-slash active-state edge cases#509

Open
Favourejiro wants to merge 1 commit into
Disciplr-Org:mainfrom
Favourejiro:test/navlink-trailing-slash-coverage
Open

test: cover NavLink trailing-slash active-state edge cases#509
Favourejiro wants to merge 1 commit into
Disciplr-Org:mainfrom
Favourejiro:test/navlink-trailing-slash-coverage

Conversation

@Favourejiro

Copy link
Copy Markdown
Contributor

closes #321

adds RTL coverage for NavLink's active-state and aria-current behaviour.

src/components/NavLink.tsx computes an active class and sets aria-current="page" from useLocation().pathname. This is the primary
navigation affordance, and its active/current logic is exactly the kind of thing that silently breaks on a router upgrade. This PR adds
focused tests for that logic under MemoryRouter, including the trailing-slash edge cases called out in the issue.

What's covered

All tests render NavLink inside a MemoryRouter with controllable initialEntries:

  • Active match — when to matches the current path, the link has the active class and aria-current="page".
  • Non-match — on a non-matching path, the active class is absent and aria-current is undefined.
  • Prop forwardingclassName and ariaLabel are forwarded to the rendered link.
  • Trimmed class string — no leading/trailing spaces (verified for empty-className + active, and empty-className + inactive).
  • Root vs non-root matching/ is active only on the exact / path; non-root links use prefix matching.
  • Exact vs partial path match — a nested path (/vaults/123) activates /vaults, while /vault does not activate /vaults.
  • Trailing-slash differencesto="/vaults/" with path /vaults stays inactive; path /vaults/ activates to="/vaults".

Testing

npm run test -- src/components/tests/NavLink.test.tsx

✅ 12/12 tests pass. No source changes — test-only, no regressions to navigation highlighting.

Add RTL cases for trailing-slash path differences in NavLink's
startsWith-based active logic (issue Disciplr-Org#321): a trailing slash on `to`
that the current path lacks stays inactive, and a current path that
appends a trailing slash to `to` is active.
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.

Add RTL tests for the NavLink active-state and aria-current behaviour

1 participant