Skip to content

test(ui): nav data-testids + routerLink, discovery spec finds real bugs#488

Merged
nicdavidson merged 1 commit intodevelopfrom
test/nav-automation-affordances
Apr 22, 2026
Merged

test(ui): nav data-testids + routerLink, discovery spec finds real bugs#488
nicdavidson merged 1 commit intodevelopfrom
test/nav-automation-affordances

Conversation

@nicdavidson
Copy link
Copy Markdown
Contributor

Problem

Yesterday's attempt to add a Playwright discovery sweep (PR #487) hit a wall: the admin sidebar isn't automatable. `button.nav-item` elements have no `routerLink`, no `href`, no `data-testid`. Force-clicks either time out on actionability or fall through to nearby elements. Net result: zero bugs surfaced by the discovery run.

What this PR does

Sidebar affordances (df-side-nav.component.html)

  • Leaf nav items are now `` instead of `<button (click)>`. Real browser affordances:
    • Middle-click / ctrl-click opens in a new tab (long-standing admin ask)
    • Hover shows URL
    • Copy link address works
    • Screen readers announce "link"
  • `data-testid` on every leaf (`nav-api-connections-event-scripts`) and every expansion-panel header (`nav-group-api-connections`).
  • `handleNavClick()` kept as a click handler to clear the error banner but routing now happens through `[routerLink]`.

Common UI testids

  • `manage-table-create` on the `+` button
  • `manage-table-refresh-schema` on the refresh-icon button
  • `confirm-dialog-confirm` / `confirm-dialog-cancel` on the generic confirm dialog

Automation infrastructure

  • `e2e/fixtures/nav.ts` — `NavPage` object that expands parent accordions and navigates to any leaf by route path.
  • `e2e/_findings.spec.ts` — discovery spec that walks five journeys (event-scripts, database API, roles, admins, api-keys) and reports what breaks.
  • `playwright.config.ts` ignores `_*.spec.ts` files by default so exploratory runs don't gate CI.

What the discovery spec surfaced on first run

After the nav fix, the discovery reached real forms on 4 of 5 journeys:

Journey Finding
api-db Database create form renders zero mat-selects where a service-type picker is expected. Either form control style changed or a control isn't rendering.
roles Create form has only 1 input/select. A role form should have many fields (name, description, service matrix). Suggests a lazy-load race or licensing gate.
admins `/admin-settings/admins` still can't be reached via NavPage — the expansion panel opening logic needs another pass. Either the route name differs or the parent group isn't `admin-settings`.
event-scripts Page crashed after picking `service=db` on the create form. Needs focused repro.
api-keys Create form loaded cleanly.

Bug fixes not in this PR — these are findings to triage separately.

Test plan

  • `npm run build` passes, new dist committed, testids visible in compiled chunks.
  • Discovery spec reaches real forms on 4/5 journeys (was 0/5 before).
  • Existing functional behavior unchanged (leaf items still route, error banner still cleared on nav).

Out of scope / follow-ups

The 2026-04-22 discovery run couldn't navigate the sidebar because the
admin UI's nav items are <button (click)="handleNavClick(item)"> with no
routerLink, href, or testid. Force-clicks either timed out on
actionability or fell through to neighboring elements.

This branch fixes that at the source:

Sidebar (df-side-nav.component.html):
* Leaf items are now <a routerLink> instead of <button (click)>. Real
  browser affordances (middle-click / ctrl-click opens in a new tab,
  hover shows URL, copy link works, screen readers announce "link").
  handleNavClick() keeps clearing the error banner but routing now
  happens through [routerLink].
* data-testid on every leaf (`nav-api-connections-event-scripts`) and
  every expansion-panel header (`nav-group-api-connections`).

Common dialog / table buttons:
* data-testid on df-manage-table's `+` and refresh-schema buttons.
* data-testid on df-confirm-dialog's confirm / cancel buttons.

Automation:
* New NavPage page-object (e2e/fixtures/nav.ts) that expands parent
  accordions and routes to any leaf by path.
* Discovery spec (_findings.spec.ts) now uses NavPage; reaches real
  forms on four of five journeys.

First rerun surfaced concrete findings (not fixed here, just reported):
  • api-db: Database create form has zero mat-selects at the position
    where a service-type picker was expected.
  • roles: create form renders only 1 input/select — a role form should
    have many fields. Suggests a lazy-load or licensing gate.
  • admins: /admin-settings/admins path still can't be reached via
    NavPage — the expansion panel opening logic may need another pass.
  • event-scripts: page crashed after picking service=db on the create
    form. Needs a focused repro.

Files prefixed with `_` are exploratory; playwright.config.ts now
ignores them on the default run so CI isn't gated on flaky discovery.
@nicdavidson nicdavidson force-pushed the test/nav-automation-affordances branch from cadcd7f to 3809422 Compare April 22, 2026 18:48
@nicdavidson nicdavidson merged commit ce33e8e into develop Apr 22, 2026
1 check passed
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.

1 participant