test-engineer
Write meaningful tests for TypeScript/React (Vitest) and Rust (cargo test) code.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Write meaningful tests for TypeScript/React (Vitest) and Rust (cargo test) code.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Build and refine user interfaces with Tailwind CSS. Use when the user asks to build, design, style, or refine web UI — landing pages, dashboards, marketing sections, forms, buttons, cards, pricing tables, hero sections, testimonials, or Tailwind markup cleanup. Generates multiple design variations on exploratory requests.
Guide any engineering task — building, fixing, expanding, refactoring, investigating — like a senior engineer at a big company. Teaches the thinking process, not just rules. Study first, plan properly, implement with discipline. Use this skill whenever the user mentions "follow the patterns", "replicate the architecture", "proper system design", "production-ready plan", "do it properly", "don't hardcode", "build it like they would", "find the root cause", "fix it properly", "don't just patch it", "expand this feature", "refactor this", "how does this work", or asks for any engineering work to follow existing conventions exactly. Also trigger when the user is frustrated that previous work was half-baked, used hardcoded values, created workarounds, suppressed lints, or didn't follow the repo's architecture. Even if the user just says "plan this properly" or "I want it done right" or "check the codebase first", use this skill. When in doubt, prefer this skill — studying the codebase first never makes anything wo
Audit an implementation plan for Accessibility compliance. Use this skill when the user says "audit for accessibility", "a11y review this plan", "check accessibility", or any plan that adds interactive UI — buttons, dialogs, modals, forms, panels, trees, tabs, drag-and-drop, or custom widgets. Developer tools are notoriously poor at accessibility. This lens catches missing ARIA labels, broken keyboard navigation, trapped focus, insufficient contrast, and missing screen reader announcements that no other audit will find because they require thinking like a user who can't see the screen or use a mouse.
Audit an implementation plan through the eyes of a senior Backend/Rust Engineer. Use this skill when the user says "audit as backend", "backend review this plan", "review the Rust code", or any plan that involves Tauri commands, Rust crates, IPC protocol, sidecar processes, file system operations, terminal management, or backend state. This lens catches unsafe Rust patterns, error handling gaps, resource leaks, concurrency issues, and IPC protocol mistakes that frontend-focused audits miss entirely.
Audit an implementation plan through the eyes of a Design Engineer. Use this skill when the user says "audit as design engineer", "design review this plan", "review the design aspects", or any plan that involves UI changes, component styling, visual states, dark mode, colors, typography, spacing, or animations. Also trigger when reviewing plans that touch CSS, Tailwind classes, design tokens, or component visual structure. This lens catches visual inconsistencies, design system violations, and craft issues that other audits miss entirely.
Audit an implementation plan through the eyes of a Developer Experience (DX) Engineer. Use this skill when the user says "audit as DX", "DX review this plan", "review the developer experience", or any plan that adds user-facing features to a developer tool — CLI commands, error messages, configuration, onboarding, keyboard shortcuts, tool output, or API surfaces. Orbit is a developer tool; its users are developers. This lens catches the usability issues specific to developer tools that generic UX audits miss because they don't think like a developer using a tool.
| name | test-engineer |
| description | Write meaningful tests for TypeScript/React (Vitest) and Rust (cargo test) code. |
Write tests that fail when implementation breaks. No placeholders, no expect(true).toBe(true).
Use Read tool to read the entire file. Identify:
Before writing ANY test code, output:
## Analysis: [filename]
**Type:** [React Component | Zustand Store | Zod Schema | Rust Module | Tauri Command]
**Purpose:** [1-2 sentences]
**Middleware:** [persist | immer | none] (if Zustand)
**Public API:**
- `functionName`: [what it does]
**Test Scenarios:**
1. [Happy path]
2. [Edge case]
3. [Error case]
**Skip Testing:**
- [Any pass-through functions or trivial code]
See references/templates.md for framework-specific templates.
| File Type | Framework | Mock Strategy |
|---|---|---|
Zustand Store (/stores/*.ts) | Vitest | Mock @tauri-apps/api/core if store calls invoke |
| Zustand + persist | Vitest | Test partialize and merge callbacks |
React Component (*.tsx) | Vitest + RTL | Custom render with providers |
Zod Schema (/schemas/*.ts) | Vitest | None needed |
Rust Module (*.rs) | cargo test | tempfile for filesystem |
Tauri Command (/commands/*.rs) | #[tokio::test] | tempfile, real backend |
Before writing any assertion, ask: "If I delete the implementation, will this fail?"
Skip these entirely:
logger.debug was called)useInputMode = () => useStore(s => s.inputMode))// BAD: Testing internal state shape
expect(store.getState()._internal.cache).toHaveLength(3);
// GOOD: Testing observable behavior
expect(store.getState().items).toHaveLength(3);
For each public function, test:
For Zustand stores with middleware:
partialize returns correct subset, merge handles corruptiongetContextPercentage() with known inputsbeforeEachZustand Reset Pattern:
beforeEach(() => {
// Prefer reset() if the store exports it
const store = useStore;
const state = store.getState();
if ('reset' in state && typeof state.reset === 'function') {
state.reset();
} else if (typeof store.getInitialState === 'function') {
// Zustand v5: restores full initial state including actions
store.setState(store.getInitialState(), true);
} else {
// Last resort: reset known fields WITHOUT replace (avoid dropping actions)
store.setState({
items: [],
isLoading: false,
error: null,
});
}
vi.clearAllMocks();
});
Important: Do NOT use setState(partial, true) unless you're passing the full
initial state including actions. Replacing with a partial object will drop
actions and break the store.
Immer + Set/Map: If the store uses Set or Map with immer middleware, add at top of test file:
import { enableMapSet } from 'immer';
enableMapSet();
See references/anti-patterns.md for detailed examples.
// NEVER: Always-passing assertion
it('should work', () => {
const store = useStore.getState();
expect(store).toBeDefined(); // Passes even if store is broken
});
// NEVER: Testing implementation details
it('should set internal flag', () => {
action();
expect(store.getState()._hasLoaded).toBe(true);
});
// NEVER: Placeholder test
it('should handle edge cases', () => {
// TODO: implement
});
See references/tauri-mocks.md for composable mock patterns.
Key principle: Only mock Tauri if the code under test calls invoke directly. Many Zustand stores don't.
Composable invoke mock (accumulates, doesn't overwrite):
import { vi } from 'vitest';
import { invoke } from '@tauri-apps/api/core';
vi.mock('@tauri-apps/api/core', () => ({ invoke: vi.fn() }));
// In test setup file - creates composable mock
const commandMocks = new Map<string, unknown>();
export function mockCommand(cmd: string, response: unknown | Error) {
commandMocks.set(cmd, response);
}
export function clearCommandMocks() {
commandMocks.clear();
}
// Set up once globally
vi.mocked(invoke).mockImplementation(async (cmd: string) => {
if (commandMocks.has(cmd)) {
const response = commandMocks.get(cmd);
if (response instanceof Error) throw response;
return response;
}
throw new Error(`Unmocked command: ${cmd}`);
});
Use the right query for the situation:
| Query Type | When to Use | Throws if Missing? |
|---|---|---|
getBy* | Element should exist NOW | Yes |
findBy* | Element will appear ASYNC | Yes (after timeout) |
queryBy* | Element might NOT exist | No (returns null) |
// Element exists synchronously
expect(screen.getByRole('button')).toBeInTheDocument();
// Element appears after async operation
await waitFor(() => {
expect(screen.getByText('Loaded')).toBeInTheDocument();
});
// OR
const button = await screen.findByRole('button', { name: 'Submit' });
// Assert element does NOT exist
expect(screen.queryByText('Error')).not.toBeInTheDocument();
Most components need providers. Create a custom render:
// src/test/utils.tsx
import { render, type RenderOptions } from '@testing-library/react'
import { ThemeProvider } from '@/providers/theme-provider'
const AllProviders = ({ children }: { children: React.ReactNode }) => (
<ThemeProvider>
{children}
</ThemeProvider>
)
const customRender = (
ui: React.ReactElement,
options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, { wrapper: AllProviders, ...options })
export * from '@testing-library/react'
export { customRender as render }
expect(true).toBe(true) or expect(x).toBeDefined() without follow-upbeforeEach (using reset() or manual setState)Frontend Apps (Vitest):
bun run test # Run all frontend tests
bun run test apps/agent/src/path/to/test.ts # Run specific file
bun run test:watch # Watch mode
bun run test:coverage # With coverage report
Note: Uses Vitest with jsdom for DOM/React testing. Config:
vitest.config.ts
agent-bridge (Bun Test):
cd agent-bridge && bun test # Bun runtime tests (no jsdom)
Rust Backend (Cargo):
cargo test # Run all Rust tests
cargo test test_function_name # Run specific test
cargo test -- --nocapture # Show println! output