Skip to content

test: add component unit tests for critical UI components (Closes #535) - #589

Open
waterWang wants to merge 1 commit into
Protocol-Guild:mainfrom
waterWang:test/535-component-unit-tests
Open

test: add component unit tests for critical UI components (Closes #535)#589
waterWang wants to merge 1 commit into
Protocol-Guild:mainfrom
waterWang:test/535-component-unit-tests

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Add component unit tests for 5 critical UI components as specified in #535.

Changes

  • vitest.config.ts — standalone vitest config with jsdom environment, test setup, and CSS modules support
  • src/test/setup.ts — test setup importing jest-dom matchers, clearing localStorage between tests, and stubbing matchMedia/scrollTo for jsdom
  • src/components/tests/ErrorBoundary.test.tsx — 3 tests: renders children, shows fallback on error, captures exception via Sentry
  • src/components/tests/CSVUploader.test.tsx — 8 tests: renders upload zone, parses valid CSV, validates required columns, applies custom validators, rejects non-CSV files, supports drag-and-drop, shows row counts, opens file picker
  • src/components/tests/ConnectAccount.test.tsx — 7 tests: disconnected state, connected state with address, Social Active badge, connecting spinner, Sign In navigation, Connect Wallet click, Exit disconnect
  • src/components/tests/EmployeeList.test.tsx — 10 tests: renders table, empty state, wallet shortening, mobile card view, salary edit modal, delete confirmation, CSV import flow, cancellation
  • src/components/tests/BulkPaymentStatusTracker.test.tsx — 11 tests: mount with fetch, empty state, data rendering, error state, refresh, expand recipient details, Retry Failed button, socket setup, batch subscription, cleanup on unmount
  • eslint.config.js — relax unsafe-type rules scoped to test files
  • package.json — add test and test:watch scripts

Dev Dependencies Added

  • @testing-library/react ^16.3.2
  • @testing-library/jest-dom ^7.0.1
  • @testing-library/user-event ^14.6.6
  • jsdom ^30.0.1

Verification

cd frontend
pnpm test
# → 39 tests passed across 5 test files

Closes #535

Add vitest component tests for EmployeeList, CSVUploader, ErrorBoundary,
ConnectAccount, and BulkPaymentStatusTracker per Protocol-Guild#535.

- Add vitest.config.ts with jsdom environment and test setup file
- Add @testing-library/react, @testing-library/jest-dom,
  @testing-library/user-event, and jsdom dev dependencies
- 39 unit tests covering rendering, interactions, validators,
  error handling, sorting, modals, CSV import, and socket lifecycle
- Relax unsafe-type eslint rules scoped to test files only
- Add test scripts (test, test:watch) to package.json
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 component unit tests for critical UI components

1 participant