SuperAPI AI 工具集

component-fixtures

测试与质量

查看项目

更新于 10-16 03:44

技能介绍

用途:为截图测试提供隔离渲染的 UI 组件 fixture,并指导如何让组件对 fixture 友好。

主要能力与使用方式:fixture 文件位于 src/vs/workbench/test/browser/componentFixtures/,由 Vite 以 glob src/**/*.fixture.ts 自动发现。用 mcp_component-exp_list_fixtures 列出可用 fixture 及 URL,用 mcp_component-exp_screenshot 截图;本地需先运行 Component Explorer Server task。每个 fixture 文件需以 .fixture.ts 结尾,并默认导出 defineThemedFixtureGroup,其会自动为每个 fixture 生成 Dark 与 Light 变体。defineComponentFixture 包装渲染函数,提供主题设置与 shadow DOM 隔离;createEditorServices 提供预注册基础编辑器服务的 TestInstantiationService,额外服务可通过 additionalServices 注册;用 mock<T>() 创建模拟服务实例。创建的小部件须通过 disposableStore.add(...) 注册以防泄漏,并向 createEditorServices 传入 colorTheme: theme。只有 fixtureUtils.ts 可导入 @vscode/component-explorer,其余 fixture 文件必须走其辅助函数。

CSS 与渲染注意:组件在 shadow DOM 中渲染,需重建深层选择器依赖的祖先 DOM 结构;建议新组件使用自包含类名。组件探索器在同步渲染后等待 2 个动画帧,渲染函数返回 Promise 时会等待其完成;避免初始渲染后重新挂载 DOM 父节点,以免布局重算、焦点丢失和截图不稳定。

组件适配:应改造原组件而非复制修改,常见做法包括解耦祖先上下文 CSS、通过依赖注入抽取硬编码服务、提供选项控制自动聚焦与动画、支持直接初始化为已完成状态、公开 domNode 属性。

限制:需通过 MCP 工具操作,若看不到相关工具需提示用户开启;截图稳定性受自动聚焦、动画和布局读取影响;不过资料未提供具体安装命令、收费或平台支持细节。