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 }: ComponentFixtureContext): void {
    container.style.width = '400px';

    const instantiationService = createEditorServices(disposableStore, {
        colorTheme: theme,
        additionalServices: (reg) => {
            // Register additional services the component needs
            reg.define(IMyService, MyServiceImpl);
            reg.defineInstance(IMockService, mockInstance);
        },
    });

    const widget = disposableStore.add(
        instantiationService.createInstance(MyWidget, /* constructor args */)
    );
    container.appendChild(widget.domNode);
}
```

Key points:
- **`defineThemedFixtureGroup`** automatically creates Dark and Light variants for each fixture
- **`defineComponentFixture`** wraps your render function with theme setup and shadow DOM isolation
- **`createEditorServices`** provides a `TestInstantiationService` with base editor services pre-registered
- Always register created widgets with `disposableStore.add(...)` to prevent leaks
- Pass `colorTheme: theme` to `createEditorServices` so theme colors render correctly

## Utilities from fixtureUtils.ts

| Export | Purpose |
|---|---|
| `defineComponentFixture` | Creates Dark/Light themed fixture variants from a render function |
| `defineThemedFixtureGroup` | Groups multiple themed fixtures into a named fixture group |
| `createEditorServices` | Creates `TestInstantiationService` with all base editor services |
| `registerWorkbenchServices` | Registers additional workbench services (context menu, label, etc.) |
| `createTextModel` | Creates a text model via `ModelService` for editor fixtures |
| `setupTheme` | Applies theme CSS to a container (called automatically by `defineComponentFixture`) |
| `darkTheme` / `lightTheme` | Pre-loaded `ColorThemeData` instances |

**Important:** Only `fixtureUtils.ts` may import from `@vscode/component-explorer`. All fixture files must go through the helpers in `fixtureUtils.ts`.

## CSS Scoping

Fixtures render inside shadow DOM. The component-explorer automatically adopts the global VS Code stylesheets and theme CSS.

### Matching production CSS selectors

Many VS Code components have CSS rules scoped to deep ancestor selectors (e.g., `.interactive-session .interactive-input-p