component-fixtures

# Component Fixtures Component fixtures render isolated UI components for visual screenshot testing via the component explorer. Fixtures live in `src/vs/workbench/test/browser/componentFixtures/` and are auto-discovered by the Vite dev server using the glob `src/**/*.fixture.ts`. Use tools `mcp_component-exp_`* to list and screenshot fixtures. If you cannot see these tools, inform the user to them on. ## Running Fixtures Locally 1. Start the component explorer server: run the **Component Explorer Server** task 2. Use the `mcp_component-exp_list_fixtures` tool to see all available fixtures and their URLs 3. Use the `mcp_component-exp_screenshot` tool to capture screenshots programmatically ## File Structure Each fixture file exports a default `defineThemedFixtureGroup(...)`. The file must end with `.fixture.ts`. ``` src/vs/workbench/test/browser/componentFixtures/ fixtureUtils.ts # Shared helpers (DO NOT import @vscode/component-explorer elsewhere) myComponent.fixture.ts # Your fixture file ``` ## Basic Pattern ```typescript import { ComponentFixtureContext, createEditorServices, defineComponentFixture, defineThemedFixtureGroup } from './fixtureUtils.js'; export default defineThemedFixtureGroup({ path: 'myFeature/' }, { Default: defineComponentFixture({ render: renderMyComponent }), AnotherVariant: defineComponentFixture({ render: renderMyComponent }), }); function renderMyComponent({ container, disposableStore, theme }: ComponentFixtu...