Add component tests for VisualizationSwitcher

[williamthorsen]

Description

VisualizationSwitcher.tsx toggles between the factory (Excalibur GameCanvas) and flow diagram (React Flow FlowDiagram) views. It is the primary rendering path in App.tsx.

Core tests already exist (7 tests covering switching behavior, active-button styling, and URL param integration). Two gaps remain:

1. Status prop forwarding is untested: The mocks render static <div> elements that ignore all props, so there is no verification that status reaches the child component.
2. No shared mock setup: GameCanvas/FlowDiagram mocks are defined inline in the test file. A shared module would let other test files (e.g., App.test.tsx) reuse them.

Key files

• Component: packages/factory/src/client/components/VisualizationSwitcher.tsx
• Existing tests: packages/factory/src/client/components/__tests__/VisualizationSwitcher.test.tsx
• Test helpers: packages/factory/src/__test-helpers__/fixtures.ts

Acceptance criteria

Must have (already met)

• React Testing Library tests covering: default view renders factory, clicking "Flow" switches to flow diagram, clicking "Factory" switches back
• Appropriate mocks for GameCanvas (Excalibur) and FlowDiagram (React Flow) dependencies

Should have

• Tests verify that the correct component receives the status prop

Nice to have

• Shared mock setup in __test-helpers__/ reusable by other component tests

Part of

#57

[williamthorsen]

Implementation plan

Context

VisualizationSwitcher toggles between the factory (Excalibur GameCanvas) and flow diagram (FlowDiagram) views. Tests already exist covering the switching behavior, active-button styling, and URL param integration (7 tests). Two gaps remain from the original acceptance criteria:

1. Status prop forwarding is untested (should-have): The mocks render static <div> elements that ignore all props, so there is no verification that status reaches the child component.
2. No shared mock setup (nice-to-have): GameCanvas/FlowDiagram mocks are defined inline in the test file. A shared module would let other test files reuse them.

Changes

Step 1: Create shared mock module

Create packages/factory/src/__test-helpers__/mock-visualization-components.tsx

Export two mock components (MockGameCanvas, MockFlowDiagram) that accept { status: CanonicalRunStatus } and render a <div> with data-testid (matching the real component's test surface) plus data-run-id={status.runId} for prop verification.

This follows the pattern of the existing __test-helpers__/fixtures.ts module. The .tsx extension is required for JSX. Import paths in consumers must use .js extension per moduleResolution: "NodeNext".

Step 2: Update VisualizationSwitcher test mocks

Modify packages/factory/src/client/components/__tests__/VisualizationSwitcher.test.tsx

Replace the two inline vi.mock() factories with async factories that import from the shared module:

vi.mock('../GameCanvas.js', async () => {
  const { MockGameCanvas } = await import('../../../__test-helpers__/mock-visualization-components.js');
  return { GameCanvas: MockGameCanvas };
});

vi.mock('../FlowDiagram/FlowDiagram.js', async () => {
  const { MockFlowDiagram } = await import('../../../__test-helpers__/mock-visualization-components.js');
  return { FlowDiagram: MockFlowDiagram };
});

All 7 existing tests continue to pass unchanged because the mocks still render data-testid="game-canvas" / data-testid="flow-diagram".

Step 3: Add status prop forwarding tests

Modify same file — add two tests to the existing describe block:

1. 'forwards status to GameCanvas in factory view' — renders with a distinct runId, asserts screen.getByTestId('game-canvas').dataset.runId matches.
2. 'forwards status to FlowDiagram in flow view' — clicks "Flow" button, asserts screen.getByTestId('flow-diagram').dataset.runId matches.

Out of scope

App.test.tsx already verifies status prop forwarding via its vi.fn().mockImplementation() pattern. Changing it to use the shared module would require switching mocking styles for no benefit. Leave as-is.

File inventory

File	Action
packages/factory/src/__test-helpers__/mock-visualization-components.tsx	Create
packages/factory/src/client/components/__tests__/VisualizationSwitcher.test.tsx	Modify

Verification

pnpm run ws test -- --run src/client/components/__tests__/VisualizationSwitcher.test.tsx
pnpm run ws typecheck