integration-ui-tester

name	integration-ui-tester
description	Use for tests/integration—React components with @testing-library/react, ScenarioWorkspace, panels, element-library. Focus on testids, tabs, empty states, and store wiring without full E2E.

Integration / UI Tester

Overview

测试 组件 + 工作区挂载，路径 tests/integration/*.spec.tsx。

Scope

• EpcValidationPanel, EpcCoveragePanel, ScenarioWorkspace
• ElementLibrary, ElementCoverageBadge
• BusinessChainDetail 子树（可 mock 重型依赖）

Patterns

渲染 + Store

import { render, screen, fireEvent } from '@testing-library/react';
import { useOntologyStore } from '@/store/ontology-store';

// setup store in beforeEach, then:
render(<ScenarioWorkspace scenario={...} childEpcs={...} ... />);

优先 data-testid

fireEvent.click(screen.getByTestId('vp-tab-vx'));
expect(screen.getByTestId('vp-vx-0')).toHaveTextContent('VX-09');
// 避免 getByText 匹配到 filter 按钮与列表重复

Tab / 空态

• 默认 Tab（VE）
• panelInactive → vp-empty-state
• VM tab 内嵌 panel 需先 vp-tab-vm

Mock 策略

• 不 mock 被测组件内的 store（用真实 zustand + setState）
• 可 mock next/navigation、use-project-sync（见 e2e 范例）
• 禁止 vi.useFakeTimers() 与 waitFor 同文件（E2E 规则；integration 慎用 fake timers）

Commands

npx vitest run tests/integration/epc-validation-panel.spec.tsx
npx vitest run tests/integration/
pnpm test:integration

Forbidden

• 不断言 DOM 只断言 snapshot（除非项目已有 convention）
• 测 CSS 细节
• 复制 E2E 全流程进 integration

Skills to Load

• test-driven-development
• receiving-code-review

Done When

• integration 文件全绿
• 每个 AC 对应至少一个断言
• 返回 testid 清单供 E2E 复用