Problem Statement
src/view/onboarding/PermissionsStep.tsx is the onboarding screen where users grant Accessibility and Screen Recording permissions. It is one of the larger components in the onboarding flow (around 400 lines) and has no test file.
This project requires 100% code coverage. Writing tests for this component closes a real coverage gap and makes it safe to modify the permissions flow in the future without accidentally breaking it.
Proposed Solution
Create a new test file:
File to create: src/view/onboarding/__tests__/PermissionsStep.test.tsx
Write tests using Vitest and React Testing Library, following the same patterns as ModelCheckStep.test.tsx (which tests the step right after this one and is a great reference at 20KB).
What to test
Read through PermissionsStep.tsx first to understand what the component does. At a minimum, cover:
- Renders the step title and description text
- Shows the Accessibility permission card in the correct state (waiting, active, done)
- Shows the Screen Recording permission card in the correct state
- Calls the right Tauri command when the user clicks "Open System Settings" (or equivalent button) for each permission
- Advances to the next onboarding step when both permissions are granted
- Handles the case where a permission check returns an error gracefully
Tauri commands are already mocked in the test environment. Look at how ModelCheckStep.test.tsx sets up and uses those mocks.
Useful references
src/view/onboarding/__tests__/ModelCheckStep.test.tsx — the closest analogue; shows how to mock Tauri invoke calls, simulate button clicks, and assert on step progression
src/view/onboarding/_shared.tsx — the StepCard and Badge components used inside PermissionsStep
src/view/onboarding/__tests__/_shared.tsx — shared test helpers used across onboarding tests
Definition of Done
Getting Started
- Read
src/view/onboarding/PermissionsStep.tsx top to bottom
- Study
src/view/onboarding/__tests__/ModelCheckStep.test.tsx for patterns
- Create your test file and build up cases one at a time
- Run
bun run test:watch for instant feedback as you write
This one is a bit more involved than the _shared.tsx test issue, but the patterns are all there. A good approach is to start with the simplest render case and work outward from there.
Questions? Leave a comment on this issue.
Problem Statement
src/view/onboarding/PermissionsStep.tsxis the onboarding screen where users grant Accessibility and Screen Recording permissions. It is one of the larger components in the onboarding flow (around 400 lines) and has no test file.This project requires 100% code coverage. Writing tests for this component closes a real coverage gap and makes it safe to modify the permissions flow in the future without accidentally breaking it.
Proposed Solution
Create a new test file:
File to create:
src/view/onboarding/__tests__/PermissionsStep.test.tsxWrite tests using Vitest and React Testing Library, following the same patterns as
ModelCheckStep.test.tsx(which tests the step right after this one and is a great reference at 20KB).What to test
Read through
PermissionsStep.tsxfirst to understand what the component does. At a minimum, cover:Tauri commands are already mocked in the test environment. Look at how
ModelCheckStep.test.tsxsets up and uses those mocks.Useful references
src/view/onboarding/__tests__/ModelCheckStep.test.tsx— the closest analogue; shows how to mock Tauri invoke calls, simulate button clicks, and assert on step progressionsrc/view/onboarding/_shared.tsx— theStepCardandBadgecomponents used insidePermissionsStepsrc/view/onboarding/__tests__/_shared.tsx— shared test helpers used across onboarding testsDefinition of Done
src/view/onboarding/__tests__/PermissionsStep.test.tsxexistsbun run test:all:coveragepasses (100% coverage maintained)bun run validate-buildpasses with zero warnings and zero errorsGetting Started
src/view/onboarding/PermissionsStep.tsxtop to bottomsrc/view/onboarding/__tests__/ModelCheckStep.test.tsxfor patternsbun run test:watchfor instant feedback as you writeThis one is a bit more involved than the
_shared.tsxtest issue, but the patterns are all there. A good approach is to start with the simplest render case and work outward from there.Questions? Leave a comment on this issue.