test(frontend): set up Vitest + React Testing Library, add initial suite - #440
Open
Williams-1604 wants to merge 1 commit into
Open
test(frontend): set up Vitest + React Testing Library, add initial suite#440Williams-1604 wants to merge 1 commit into
Williams-1604 wants to merge 1 commit into
Conversation
The frontend had zero test files despite vitest already being listed as a
devDependency. Wire it up and cover a first slice of high-value units:
- vitest.config.ts: jsdom environment, globals, setup file. Kept separate
from vite.config.ts so the wasm/node-polyfill plugins meant for the
browser build don't slow down the unit test run.
- vitest.setup.ts: registers @testing-library/jest-dom matchers.
- src/vitest.d.ts: ambient import so the jest-dom matcher types augment
every test file under src/ (tsconfig.app.json's project).
- tsconfig.node.json: include vitest.config.ts/vitest.setup.ts, matching
the existing vite.config.ts/playwright.config.ts entries.
- package.json: "test" (used by CI's `npm test --if-present`) and
"test:watch" scripts; @testing-library/{react,dom,jest-dom,user-event}
and jsdom devDependencies.
Initial suite (10 tests):
- useWalletSigning: isReady derivation, successful sign, and error
capture/notification on failure (wallet/notification hooks mocked).
- Avatar: gravatar fallback, explicit imageUrl override, title attribute,
default name.
- CountdownTimer: null render, tick countdown, expired state.
Documented briefly in a new frontend/README.md.
Closes Protocol-Guild#415
Contributor
|
@Williams-1604 Kindly check failing ci checks |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Sets up a frontend test harness and adds an initial suite (
Closes #415) — the frontend previously had zero test files, even thoughvitestwas already a devDependency.What's added
vitest.config.ts— jsdom environment,globals: true, setup file. Kept separate fromvite.config.tsso the wasm/node-polyfill Vite plugins (meant for the browser build) don't slow down or complicate the unit test run.vitest.setup.ts— registers@testing-library/jest-dommatchers.src/vitest.d.ts— ambient import so the jest-dom matcher types (toBeInTheDocument,toHaveAttribute, …) augment every test file undertsconfig.app.json's project; without ittsc -bfails with "Property 'toBeInTheDocument' does not exist".tsconfig.node.json— includesvitest.config.ts/vitest.setup.ts, matching the existingvite.config.ts/playwright.config.tsentries (otherwise eslint's type-aware parser can't find a project for them).package.json—"test": "vitest run"(this is exactly what CI'snpm test --if-presentstep now picks up) and"test:watch"; added@testing-library/react,@testing-library/dom,@testing-library/jest-dom,@testing-library/user-event,jsdomas devDependencies.Initial suite (10 tests)
useWalletSigning—isReadyderivation from wallet state, a successful sign, and error capture + notification on failure (useWallet/useNotificationmocked withvi.mock).Avatar— gravatar fallback, explicitimageUrloverride,titleattribute, default name.CountdownTimer— null render when no target date, tick countdown (fake timers), all-zeros once expired.Documented briefly in a new
frontend/README.md(Testing section).Acceptance criteria
npm run testruns the frontend suite and passesVerification
Ran the exact CI gate locally:
npm run lint(clean),npx prettier . --check(clean),npm run build(tsc -b && vite build, succeeds),npm run test(10/10 pass).Closes #415