fix: type API mock responses in browser tests

Add guideline requiring typed mock data in route.fulfill() calls and
refactor existing untyped mocks to use schema-derived types.

Refs #10656
This commit is contained in:
dante01yoon
2026-03-28 17:05:40 +09:00
parent 82242f1b00
commit 5deac34098
4 changed files with 61 additions and 36 deletions

View File

@@ -216,6 +216,7 @@ See @docs/testing/\*.md for detailed patterns.
1. Follow the Best Practices described [in the Playwright documentation](https://playwright.dev/docs/best-practices)
2. Do not use waitForTimeout, use Locator actions and [retrying assertions](https://playwright.dev/docs/test-assertions#auto-retrying-assertions)
3. Tags like `@mobile`, `@2x` are respected by config and should be used for relevant tests
4. Type all API mock responses in `route.fulfill()` using schemas from `src/schemas/`, `packages/ingest-types`, or `packages/registry-types` — see `docs/guidance/playwright.md` for details
## External Resources

View File

@@ -1,8 +1,21 @@
import { expect } from '@playwright/test'
import type { ReleaseNote } from '../../src/platform/updates/common/releaseService'
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
import { TestIds } from '../fixtures/selectors'
function createMockRelease(overrides?: Partial<ReleaseNote>): ReleaseNote {
return {
id: 1,
project: 'comfyui',
version: 'v0.3.44',
attention: 'medium',
content: '## New Features\n\n- Added awesome feature',
published_at: new Date().toISOString(),
...overrides
}
}
test.describe('Release Notifications', () => {
test.beforeEach(async ({ comfyPage }) => {
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
@@ -22,15 +35,10 @@ test.describe('Release Notifications', () => {
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{
id: 1,
project: 'comfyui',
version: 'v0.3.44',
attention: 'medium',
createMockRelease({
content:
'## New Features\n\n- Added awesome feature\n- Fixed important bug',
published_at: new Date().toISOString()
}
'## New Features\n\n- Added awesome feature\n- Fixed important bug'
})
])
})
} else {
@@ -157,16 +165,7 @@ test.describe('Release Notifications', () => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{
id: 1,
project: 'comfyui',
version: 'v0.3.44',
attention: 'high',
content: '## New Features\n\n- Added awesome feature',
published_at: new Date().toISOString()
}
])
body: JSON.stringify([createMockRelease({ attention: 'high' })])
})
} else {
await route.continue()
@@ -250,16 +249,7 @@ test.describe('Release Notifications', () => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{
id: 1,
project: 'comfyui',
version: 'v0.3.44',
attention: 'medium',
content: '## New Features\n\n- Added awesome feature',
published_at: new Date().toISOString()
}
])
body: JSON.stringify([createMockRelease()])
})
} else {
await route.continue()
@@ -303,14 +293,10 @@ test.describe('Release Notifications', () => {
status: 200,
contentType: 'application/json',
body: JSON.stringify([
{
id: 1,
project: 'comfyui',
version: 'v0.3.44',
createMockRelease({
attention: 'low',
content: '## Bug Fixes\n\n- Fixed minor issue',
published_at: new Date().toISOString()
}
content: '## Bug Fixes\n\n- Fixed minor issue'
})
])
})
} else {

View File

@@ -1,6 +1,7 @@
import type { Page } from '@playwright/test'
import { expect } from '@playwright/test'
import type { WorkflowTemplates } from '../../src/platform/workflow/templates/types/template'
import { comfyPageFixture as test } from '../fixtures/ComfyPage'
async function checkTemplateFileExists(
@@ -239,7 +240,7 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
await comfyPage.page.route(
'**/templates/index.json',
async (route, _) => {
const response = [
const response: WorkflowTemplates[] = [
{
moduleName: 'default',
title: 'Test Templates',

View File

@@ -87,6 +87,43 @@ Tags are respected by config:
- Check `browser_tests/assets/` for test data and fixtures
- Use realistic ComfyUI workflows for E2E tests
## Typed API Mocks
When mocking API responses with `route.fulfill()`, always type the response body
using existing schemas or generated types. This catches shape mismatches at compile
time instead of through flaky runtime failures.
### Sources of truth
| Endpoint category | Type source |
| --------------------------------------------------- | -------------------------------------------------------- |
| Cloud-only (hub, billing, workflows) | `@comfyorg/ingest-types` (auto-generated from OpenAPI) |
| Registry (releases, nodes, publishers) | `@comfyorg/registry-types` (auto-generated from OpenAPI) |
| Manager (queue tasks, packages) | `generatedManagerTypes.ts` (auto-generated from OpenAPI) |
| Python backend (queue, history, settings, features) | Manual Zod schemas in `src/schemas/apiSchema.ts` |
| Node definitions | `src/schemas/nodeDefSchema.ts` |
| Templates | `src/platform/workflow/templates/types/template.ts` |
### Patterns
```typescript
// ✅ Import the type and annotate mock data
import type { ReleaseNote } from '@/platform/updates/common/releaseService'
const mockRelease: ReleaseNote = {
id: 1,
project: 'comfyui',
version: 'v0.3.44',
attention: 'medium',
content: '## New Features',
published_at: new Date().toISOString()
}
body: JSON.stringify([mockRelease])
// ❌ Untyped inline JSON — schema drift goes unnoticed
body: JSON.stringify([{ id: 1, project: 'comfyui', version: 'v0.3.44', ... }])
```
## Running Tests
```bash