Skip to content

Test: Write tests for PermissionsStep.tsx #137

@quiet-node

Description

@quiet-node

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

  • src/view/onboarding/__tests__/PermissionsStep.test.tsx exists
  • All rendering states covered (each permission in waiting/active/done state)
  • Button interactions tested (open settings, permission granted flow)
  • Error states handled
  • bun run test:all:coverage passes (100% coverage maintained)
  • bun run validate-build passes with zero warnings and zero errors

Getting Started

  1. Read src/view/onboarding/PermissionsStep.tsx top to bottom
  2. Study src/view/onboarding/__tests__/ModelCheckStep.test.tsx for patterns
  3. Create your test file and build up cases one at a time
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions