Skip to content

Test/dialogs 01 component#778

Open
Devadakene wants to merge 2 commits into
Talenttrust:mainfrom
Devadakene:test/dialogs-01-component
Open

Test/dialogs 01 component#778
Devadakene wants to merge 2 commits into
Talenttrust:mainfrom
Devadakene:test/dialogs-01-component

Conversation

@Devadakene

Copy link
Copy Markdown

Closes #543

Description

This PR addresses the issue of the dialogs component's states and interactions being under-tested. It implements state support in ConfirmDialog and adds comprehensive React Testing Library tests for all major component states to maintain our >95% test coverage requirement.

Specifically, it introduces backwards-compatible props (isLoading, isEmpty, error, isSuccess) to allow for explicit loading, empty, error, and success states within the dialog, fulfilling standard dialog interaction patterns. Existing usages of ConfirmDialog are entirely unaffected as these new props default to undefined.

Closes #

Type of Change

  • Bug fix (non-breaking change that resolves an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Refactor (no functional change, internal code improvement)
  • Documentation update

Pre-flight Checklist

All items must be checked before requesting review.

  • npm run lint passes with no errors
  • npm test passes with no failures
  • npm run build completes successfully

Testing & Coverage

  • Module test coverage for impacted files meets or exceeds the 95% minimum threshold
    (run npm test -- --coverage and check the per-file table)
  • If this PR adds or modifies UI components, accessibility tests were written using
    the shared utilities in src/test-utils/a11y.tsx

What was tested?

Added new isolated unit tests in ConfirmDialog.test.tsx for:

  • Loading state: Asserts that confirm and cancel buttons become disabled and the confirm text updates to "Loading...".
  • Empty state: Asserts that an empty state message is rendered ("No data available.") and the confirm button is disabled.
  • Error state: Asserts that an alert is rendered dynamically containing the error text while keeping the confirm button interactive.
  • Success state: Asserts that a success message is displayed with standard status roles.

Test Output:

 PASS  src/components/__tests__/ConfirmDialog.test.tsx
  ConfirmDialog
    ✓ renders nothing when closed (15 ms)
    ✓ renders the dialog content and calls handlers (42 ms)
    ✓ assigns role="dialog" by default and role="alertdialog" when tone="destructive" (12 ms)
    ✓ matches aria-labelledby and aria-describedby exactly with generated title and description IDs (8 ms)
    ✓ has aria-modal="true" attribute present (6 ms)
    ✓ restricts and restores background content with aria-hidden and inert when open/closed (20 ms)
    ✓ triggers cancel when Escape is pressed (11 ms)
    ✓ wraps focus when tabbing past the last focusable element (25 ms)
    ✓ wraps focus backwards when shift+tab reaches the first focusable element (18 ms)
    ✓ renders loading state and disables buttons (9 ms)
    ✓ renders empty state message and disables confirm button (7 ms)
    ✓ renders error message and keeps confirm button enabled (8 ms)
    ✓ renders success state message and disables confirm button (7 ms)

-----------------------|---------|----------|---------|---------|-------------------
File                   | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------------|---------|----------|---------|---------|-------------------
All files              |     100 |      100 |     100 |     100 |                   
 ConfirmDialog.tsx     |     100 |      100 |     100 |     100 |                   
-----------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       13 passed, 13 total
Snapshots:   0 total
Time:        1.45 s

Accessibility & Security Notes

Accessibility

Standard React Testing Library queries by semantic role (e.g., getByRole('alert'), getByRole('status')) were used to verify that state messages are exposed to assistive technology properly.

Security

N/A - no authentication, wallet logic, or security-sensitive paths modified.

@drips-wave

drips-wave Bot commented Jul 25, 2026

Copy link
Copy Markdown

@Devadakene 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

@Devadakene
Devadakene force-pushed the test/dialogs-01-component branch from 0ea087c to b48223e Compare July 25, 2026 14:27
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 tests for the dialogs component states and interactions

1 participant