test: add test cases for dialog.tsx and drawer.tsx

Issue Summary

Add UI-focused test cases for dialog.tsx and drawer.tsx components to validate rendering, user interactions, and accessibility behavior.

---

Problem Statement

The dialog.tsx and drawer.tsx UI components currently lack proper test coverage.

Issues:

• ❌ UI rendering is not verified
• ❌ Open/close interactions are not tested
• ❌ Accessibility behavior (focus, keyboard actions) not covered
• ❌ Conditional UI states are untested

Impact:

• UI bugs may break user experience
• Accessibility issues may go unnoticed
• Reduced confidence in UI changes

---

Proposed Solution

• Write UI test cases using React Testing Library

• Focus on:

  • Component rendering
  • User interactions (click, keyboard)
  • Visibility changes
  • Accessibility behavior

• Add test files:

  src/__tests__/dialog.test.tsx
  src/__tests__/drawer.test.tsx

---

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Dialog renders and is hidden by default

Given the Dialog component is rendered
When no action is performed
Then the dialog should not be visible

Scenario 2: Dialog opens on trigger click

Given the Dialog is closed
When the user clicks the open button
Then the dialog should be visible on the screen

Scenario 3: Dialog closes on close button or overlay click

Given the Dialog is open
When the user clicks the close button or outside overlay
Then the dialog should be hidden

Scenario 4: Drawer opens and closes correctly

Given the Drawer is closed
When the user clicks the toggle button
Then the drawer should slide into view
When clicked again
Then the drawer should close

Scenario 5: Keyboard accessibility

Given the Dialog is open
When the user presses Escape key
Then the dialog should close

---

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Dialog initial render	Component loaded	Render component	Dialog hidden	High
TC-002	Dialog open	Dialog closed	Click open button	Dialog visible	High
TC-003	Dialog close (button)	Dialog open	Click close button	Dialog hidden	High
TC-004	Dialog close (overlay)	Dialog open	Click outside	Dialog closes	High
TC-005	Drawer render	Component loaded	Render component	Drawer hidden	High
TC-006	Drawer open	Drawer closed	Click toggle	Drawer visible	High
TC-007	Drawer close	Drawer open	Click toggle	Drawer hidden	High
TC-008	Keyboard close	Dialog open	Press Escape	Dialog closes	Medium

---

Unit Test Requirements

Components to Test:

Component	Behavior	Test Cases
dialog.tsx	Open/close, overlay, keyboard	TC-001 to TC-004, TC-008
drawer.tsx	Toggle visibility	TC-005 to TC-007

---

Test Assertions Required:

• Renders correctly in DOM
• Visibility toggles based on state
• Responds to user clicks
• Handles keyboard interactions
• Proper ARIA roles (dialog, modal)
• Focus management (if implemented)

---

Implementation Details

Files to Change

File Path	Action	Purpose
src/components/dialog.tsx	Review	Ensure accessibility/testability
src/components/drawer.tsx	Review	Ensure toggle logic testable
src/__tests__/dialog.test.tsx	Create	UI interaction tests
src/__tests__/drawer.test.tsx	Create	UI toggle tests

---

Technical Considerations

• Use screen.getByRole() (preferred for UI testing)

• Avoid testing internal state

• Use fireEvent or userEvent

• Ensure accessibility roles like:

  • role="dialog"
  • aria-modal="true"

---

UI/UX Requirements

• Dialog:

  • Opens as modal overlay

  • Closes on:

    • Button click
    • Outside click
    • Escape key

• Drawer:

  • Slides from side
  • Toggles visibility smoothly

---

Testing Strategy

Manual Testing

1. Click open dialog → verify modal appears
2. Click outside → verify closes
3. Press ESC → verify closes
4. Toggle drawer → verify open/close

---

Automated Testing

• UI rendering tests
• Interaction tests
• Accessibility tests

---

Test Data Requirements

const mockUIState = {
  isOpen: false,
};

---

Definition of Done

• UI behavior fully tested
• All interaction scenarios covered
• Accessibility checks included
• Tests passing
• Coverage improved

---

Additional Context

Notes

• Focus is strictly on UI behavior testing
• No changes to business logic
• Ensures better user experience and stability

---