mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
3b78dfbe1c
## Summary Complete the @e2e/ path alias migration started in #10735 by converting all 354 remaining relative imports and adding a lint rule to prevent backsliding. ## Changes - **What**: Migrate all relative imports in browser_tests/ to use `@e2e/` (intra-directory) and `@/` (src/ imports) path aliases. Add `no-restricted-imports` ESLint rule banning `./` and `../` imports in `browser_tests/**/*.ts`. Suppress pre-existing oxlint `no-eval` and `no-console` warnings exposed by touching those files. ## Review Focus - ESLint flat-config merging: the `@playwright/test` ban and relative-import ban are in two separate blocks to avoid last-match-wins collision with the `useI18n`/`useVirtualList` blocks higher in the config. - The `['./**', '../**']` glob patterns (not `['./*', '../*']`) are needed to catch multi-level relative paths like `../../../src/foo`. Follows up on #10735 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10958-test-migrate-browser_tests-to-e2e-path-alias-and-add-lint-rule-33c6d73d365081649d1be771eac986fd) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
|
|
import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
|
|
import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
|
|
|
|
test.describe('Image Compare', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.workflow.loadWorkflow('widgets/image_compare_widget')
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
|
|
function createTestImageDataUrl(label: string, color: string): string {
|
|
const svg =
|
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">` +
|
|
`<rect width="200" height="200" fill="${color}"/>` +
|
|
`<text x="50%" y="50%" fill="white" font-size="24" ` +
|
|
`text-anchor="middle" dominant-baseline="middle">${label}</text></svg>`
|
|
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
|
|
}
|
|
|
|
async function setImageCompareValue(
|
|
comfyPage: ComfyPage,
|
|
value: { beforeImages: string[]; afterImages: string[] }
|
|
) {
|
|
await comfyPage.page.evaluate(
|
|
({ value }) => {
|
|
const node = window.app!.graph.getNodeById(1)
|
|
const widget = node?.widgets?.find((w) => w.type === 'imagecompare')
|
|
if (widget) {
|
|
widget.value = value
|
|
widget.callback?.(value)
|
|
}
|
|
},
|
|
{ value }
|
|
)
|
|
await comfyPage.nextFrame()
|
|
}
|
|
|
|
test(
|
|
'Shows empty state when no images are set',
|
|
{ tag: '@smoke' },
|
|
async ({ comfyPage }) => {
|
|
const node = comfyPage.vueNodes.getNodeLocator('1')
|
|
await expect(node).toBeVisible()
|
|
|
|
await expect(node).toContainText('No images to compare')
|
|
await expect(node.locator('img')).toHaveCount(0)
|
|
await expect(node.locator('[role="presentation"]')).toHaveCount(0)
|
|
}
|
|
)
|
|
|
|
test(
|
|
'Slider defaults to 50% with both images set',
|
|
{ tag: ['@smoke', '@screenshot'] },
|
|
async ({ comfyPage }) => {
|
|
const beforeUrl = createTestImageDataUrl('Before', '#c00')
|
|
const afterUrl = createTestImageDataUrl('After', '#00c')
|
|
await setImageCompareValue(comfyPage, {
|
|
beforeImages: [beforeUrl],
|
|
afterImages: [afterUrl]
|
|
})
|
|
|
|
const node = comfyPage.vueNodes.getNodeLocator('1')
|
|
const beforeImg = node.locator('img[alt="Before image"]')
|
|
const afterImg = node.locator('img[alt="After image"]')
|
|
await expect(beforeImg).toBeVisible()
|
|
await expect(afterImg).toBeVisible()
|
|
|
|
const handle = node.locator('[role="presentation"]')
|
|
await expect(handle).toBeVisible()
|
|
|
|
expect(
|
|
await handle.evaluate((el) => (el as HTMLElement).style.left)
|
|
).toBe('50%')
|
|
await expect(beforeImg).toHaveCSS('clip-path', /50%/)
|
|
|
|
await expect(node).toHaveScreenshot('image-compare-default-50.png')
|
|
}
|
|
)
|
|
})
|