Write tests for \_shared.tsx (onboarding building blocks)

[quiet-node]

Problem Statement

src/view/onboarding/_shared.tsx exports two small components used across the onboarding flow:

• StepCard — a container that changes its border, background, and glow based on active and done props
• Badge — a small status pill (currently only supports color: 'green')

Neither component has a test file. This project requires 100% code coverage, and these components are currently covered only indirectly through the tests for the steps that use them. Having direct tests makes it easier to catch regressions if the visual logic changes.

---

Proposed Solution

Create a new test file:

File to create: src/view/onboarding/__tests__/_shared.test.tsx

Write tests using Vitest and React Testing Library, following the same patterns as the existing test files nearby (e.g. IntroStep.test.tsx, ModelCheckStep.test.tsx).

What to test

StepCard:

• Renders its children
• Applies the correct border color when done is true (green-tinted)
• Applies the correct border color when active is true and done is false (orange-tinted)
• Applies the correct border color when both active and done are false (neutral/faint white)
• Applies the box-shadow glow only when active is true and done is false
• Does not apply box-shadow when done is true (done state takes priority)

Badge:

• Renders its children
• Applies the correct color styles for color="green"

Useful references

• src/view/onboarding/__tests__/IntroStep.test.tsx — see how to render components and assert on styles
• React Testing Library docs: render, screen, and style assertions

---

Definition of Done

• src/view/onboarding/__tests__/_shared.test.tsx exists and covers all cases above
• All three StepCard visual states are tested (active, done, waiting)
• Badge green variant is tested
• 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/_shared.tsx to understand what each component does
2. Look at src/view/onboarding/__tests__/IntroStep.test.tsx to see the test style used in this project
3. Create your test file and write the cases listed above
4. Run bun run test:watch to get instant feedback as you write

Questions? Leave a comment on this issue.