From e179f75387173a182e7007f0cdb91a2dfaab6d84 Mon Sep 17 00:00:00 2001 From: Chenlei Hu Date: Thu, 25 Jul 2024 10:10:18 -0400 Subject: [PATCH] Apply new code format standard (#217) --- .prettierrc | 6 +- browser_tests/ComfyPage.ts | 346 +-- browser_tests/copyPaste.spec.ts | 92 +- browser_tests/interaction.spec.ts | 118 +- browser_tests/litegraphEvent.spec.ts | 44 +- browser_tests/menu.spec.ts | 60 +- browser_tests/nodeSearchBox.spec.ts | 60 +- browser_tests/rightClickMenu.spec.ts | 148 +- browser_tests/textWidgetTruncate.spec.ts | 40 +- jest.config.ts | 32 +- playwright.config.ts | 20 +- postcss.config.js | 6 +- scripts/deploy.js | 16 +- scripts/zipdist.js | 10 +- src/App.vue | 74 +- .../LiteGraphCanvasSplitterOverlay.vue | 14 +- src/components/NodePreview.vue | 56 +- src/components/NodeSearchBox.vue | 82 +- src/components/NodeSearchBoxPopover.vue | 142 +- src/components/NodeSearchFilter.vue | 62 +- src/components/NodeSourceChip.vue | 14 +- .../primevueOverride/AutoCompletePlus.vue | 18 +- src/components/sidebar/SideBarIcon.vue | 14 +- .../sidebar/SideBarSettingsToggleIcon.vue | 8 +- .../sidebar/SideBarThemeToggleIcon.vue | 24 +- src/components/sidebar/SideToolBar.vue | 54 +- .../sidebar/tabs/QueueSideBarTab.vue | 110 +- src/extensions/core/clipspace.ts | 168 +- src/extensions/core/colorPalette.ts | 1112 ++++---- src/extensions/core/contextMenuFilter.ts | 182 +- src/extensions/core/dynamicPrompts.ts | 38 +- src/extensions/core/editAttention.ts | 146 +- src/extensions/core/groupNode.ts | 1322 +++++---- src/extensions/core/groupNodeManage.ts | 506 ++-- src/extensions/core/groupOptions.ts | 236 +- src/extensions/core/index.ts | 46 +- src/extensions/core/invertMenuScrolling.ts | 38 +- src/extensions/core/keybinds.ts | 84 +- src/extensions/core/linkRenderMode.ts | 28 +- src/extensions/core/maskeditor.ts | 1177 ++++---- src/extensions/core/nodeTemplates.ts | 446 ++-- src/extensions/core/noteNode.ts | 52 +- src/extensions/core/rerouteNode.ts | 256 +- src/extensions/core/saveImageExtraOutput.ts | 42 +- src/extensions/core/simpleTouchSupport.ts | 110 +- src/extensions/core/slotDefaults.ts | 84 +- src/extensions/core/snapToGrid.ts | 160 +- src/extensions/core/uploadAudio.ts | 200 +- src/extensions/core/uploadImage.ts | 12 +- src/extensions/core/webcamCapture.ts | 176 +- src/extensions/core/widgetInputs.ts | 702 +++-- src/i18n.ts | 30 +- src/main.ts | 52 +- src/scripts/api.ts | 412 +-- src/scripts/app.ts | 2376 ++++++++--------- src/scripts/changeTracker.ts | 280 +- src/scripts/defaultGraph.ts | 102 +- src/scripts/domWidget.ts | 328 +-- src/scripts/extensionManager.ts | 40 +- src/scripts/logging.ts | 370 +-- src/scripts/metadata/flac.ts | 78 +- src/scripts/metadata/png.ts | 44 +- src/scripts/pnginfo.ts | 512 ++-- src/scripts/ui.ts | 876 +++--- src/scripts/ui/components/asyncDialog.ts | 66 +- src/scripts/ui/components/button.ts | 192 +- src/scripts/ui/components/buttonGroup.ts | 32 +- src/scripts/ui/components/index.ts | 2 +- src/scripts/ui/components/popup.ts | 166 +- src/scripts/ui/components/splitButton.ts | 58 +- src/scripts/ui/dialog.ts | 50 +- src/scripts/ui/draggableList.ts | 246 +- src/scripts/ui/imagePreview.ts | 110 +- src/scripts/ui/menu/index.ts | 362 ++- src/scripts/ui/menu/interruptButton.ts | 24 +- src/scripts/ui/menu/queueButton.ts | 128 +- src/scripts/ui/menu/queueOptions.ts | 106 +- src/scripts/ui/menu/workflows.ts | 902 +++---- src/scripts/ui/settings.ts | 379 ++- src/scripts/ui/spinner.ts | 8 +- src/scripts/ui/toggleSwitch.ts | 50 +- src/scripts/ui/userSelection.ts | 136 +- src/scripts/ui/utils.ts | 48 +- src/scripts/utils.ts | 140 +- src/scripts/widgets.ts | 589 ++-- src/scripts/workflows.ts | 420 +-- src/services/nodeSearchService.ts | 184 +- src/stores/nodeDefStore.ts | 78 +- src/stores/queueStore.ts | 162 +- src/stores/settingStore.ts | 28 +- src/stores/workspaceStateStore.ts | 30 +- src/types/apiTypes.ts | 232 +- src/types/colorPalette.ts | 58 +- src/types/comfy.d.ts | 44 +- src/types/comfyWorkflow.ts | 78 +- src/types/extensionTypes.ts | 30 +- src/types/litegraph-augmentation.d.ts | 20 +- src/types/litegraph-core-augmentation.d.ts | 22 +- src/types/nodeSource.ts | 36 +- src/types/settingTypes.ts | 44 +- src/types/vue-shim.d.ts | 8 +- src/utils/colorUtil.ts | 100 +- tailwind.config.js | 8 +- tests-ui/afterSetup.ts | 12 +- tests-ui/extractExamples.ts | 158 +- tests-ui/globalSetup.ts | 12 +- tests-ui/setup.ts | 56 +- tests-ui/tests/apiTypes.test.ts | 86 +- tests-ui/tests/comfyWorkflow.test.ts | 156 +- tests-ui/tests/exampleWorkflows.test.ts | 74 +- tests-ui/tests/extensions.test.ts | 226 +- tests-ui/tests/groupNode.test.ts | 1519 ++++++----- tests-ui/tests/litegraph.test.ts | 50 +- tests-ui/tests/nodeSearchService.test.ts | 78 +- tests-ui/tests/users.test.ts | 366 ++- tests-ui/tests/widgetInputs.test.ts | 745 +++--- tests-ui/utils/ezgraph.ts | 254 +- tests-ui/utils/index.ts | 112 +- tests-ui/utils/litegraph.ts | 30 +- tests-ui/utils/nopProxy.ts | 4 +- tests-ui/utils/setup.ts | 74 +- 121 files changed, 11898 insertions(+), 11983 deletions(-) diff --git a/.prettierrc b/.prettierrc index f444ae604..9d774965d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,6 @@ { - "semi": true, - "trailingComma": "es5" + "singleQuote": true, + "tabWidth": 2, + "semi": false, + "trailingComma": "none" } \ No newline at end of file diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index 835e82914..673319003 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -1,310 +1,310 @@ -import type { Page, Locator } from "@playwright/test"; -import { test as base } from "@playwright/test"; -import dotenv from "dotenv"; -dotenv.config(); +import type { Page, Locator } from '@playwright/test' +import { test as base } from '@playwright/test' +import dotenv from 'dotenv' +dotenv.config() interface Position { - x: number; - y: number; + x: number + y: number } interface Size { - width: number; - height: number; + width: number + height: number } class ComfyNodeSearchBox { - public readonly input: Locator; - public readonly dropdown: Locator; + public readonly input: Locator + public readonly dropdown: Locator constructor(public readonly page: Page) { this.input = page.locator( '.comfy-vue-node-search-container input[type="text"]' - ); + ) this.dropdown = page.locator( - ".comfy-vue-node-search-container .p-autocomplete-list" - ); + '.comfy-vue-node-search-container .p-autocomplete-list' + ) } async fillAndSelectFirstNode(nodeName: string) { - await this.input.waitFor({ state: "visible" }); - await this.input.fill(nodeName); - await this.dropdown.waitFor({ state: "visible" }); + await this.input.waitFor({ state: 'visible' }) + await this.input.fill(nodeName) + await this.dropdown.waitFor({ state: 'visible' }) // Wait for some time for the auto complete list to update. // The auto complete list is debounced and may take some time to update. - await this.page.waitForTimeout(500); - await this.dropdown.locator("li").nth(0).click(); + await this.page.waitForTimeout(500) + await this.dropdown.locator('li').nth(0).click() } } class ComfyMenu { - public readonly themeToggleButton: Locator; + public readonly themeToggleButton: Locator constructor(public readonly page: Page) { - this.themeToggleButton = page.locator(".comfy-vue-theme-toggle"); + this.themeToggleButton = page.locator('.comfy-vue-theme-toggle') } async toggleTheme() { - await this.themeToggleButton.click(); + await this.themeToggleButton.click() await this.page.evaluate(() => { return new Promise((resolve) => { - window["app"].ui.settings.addEventListener( - "Comfy.ColorPalette.change", + window['app'].ui.settings.addEventListener( + 'Comfy.ColorPalette.change', resolve, { once: true } - ); + ) - setTimeout(resolve, 5000); - }); - }); + setTimeout(resolve, 5000) + }) + }) } async getThemeId() { return await this.page.evaluate(async () => { - return await window["app"].ui.settings.getSettingValue( - "Comfy.ColorPalette" - ); - }); + return await window['app'].ui.settings.getSettingValue( + 'Comfy.ColorPalette' + ) + }) } } export class ComfyPage { - public readonly url: string; + public readonly url: string // All canvas position operations are based on default view of canvas. - public readonly canvas: Locator; - public readonly widgetTextBox: Locator; + public readonly canvas: Locator + public readonly widgetTextBox: Locator // Buttons - public readonly resetViewButton: Locator; + public readonly resetViewButton: Locator // Inputs - public readonly workflowUploadInput: Locator; + public readonly workflowUploadInput: Locator // Components - public readonly searchBox: ComfyNodeSearchBox; - public readonly menu: ComfyMenu; + public readonly searchBox: ComfyNodeSearchBox + public readonly menu: ComfyMenu constructor(public readonly page: Page) { - this.url = process.env.PLAYWRIGHT_TEST_URL || "http://localhost:8188"; - this.canvas = page.locator("#graph-canvas"); - this.widgetTextBox = page.getByPlaceholder("text").nth(1); - this.resetViewButton = page.getByRole("button", { name: "Reset View" }); - this.workflowUploadInput = page.locator("#comfy-file-input"); - this.searchBox = new ComfyNodeSearchBox(page); - this.menu = new ComfyMenu(page); + this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188' + this.canvas = page.locator('#graph-canvas') + this.widgetTextBox = page.getByPlaceholder('text').nth(1) + this.resetViewButton = page.getByRole('button', { name: 'Reset View' }) + this.workflowUploadInput = page.locator('#comfy-file-input') + this.searchBox = new ComfyNodeSearchBox(page) + this.menu = new ComfyMenu(page) } async setup() { - await this.goto(); + await this.goto() // Unify font for consistent screenshots. await this.page.addStyleTag({ - url: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap", - }); + url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap' + }) await this.page.addStyleTag({ - url: "https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap", - }); + url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap' + }) await this.page.addStyleTag({ content: ` * { font-family: 'Roboto Mono', 'Noto Color Emoji'; - }`, - }); - await this.page.waitForFunction(() => document.fonts.ready); + }` + }) + await this.page.waitForFunction(() => document.fonts.ready) await this.page.waitForFunction( - () => window["app"] !== undefined && window["app"].vueAppReady - ); + () => window['app'] !== undefined && window['app'].vueAppReady + ) await this.page.evaluate(() => { - window["app"]["canvas"].show_info = false; - }); - await this.nextFrame(); + window['app']['canvas'].show_info = false + }) + await this.nextFrame() // Reset view to force re-rendering of canvas. So that info fields like fps // become hidden. - await this.resetView(); + await this.resetView() } async realod() { - await this.page.reload({ timeout: 15000 }); - await this.setup(); + await this.page.reload({ timeout: 15000 }) + await this.setup() } async goto() { - await this.page.goto(this.url); + await this.page.goto(this.url) } async nextFrame() { await this.page.evaluate(() => { - return new Promise(requestAnimationFrame); - }); + return new Promise(requestAnimationFrame) + }) } async loadWorkflow(workflowName: string) { await this.workflowUploadInput.setInputFiles( `./browser_tests/assets/${workflowName}.json` - ); - await this.nextFrame(); + ) + await this.nextFrame() } async resetView() { if (await this.resetViewButton.isVisible()) { - await this.resetViewButton.click(); + await this.resetViewButton.click() } // Avoid "Reset View" button highlight. - await this.page.mouse.move(10, 10); - await this.nextFrame(); + await this.page.mouse.move(10, 10) + await this.nextFrame() } async clickTextEncodeNode1() { await this.canvas.click({ position: { x: 618, - y: 191, - }, - }); - await this.nextFrame(); + y: 191 + } + }) + await this.nextFrame() } async clickTextEncodeNode2() { await this.canvas.click({ position: { x: 622, - y: 400, - }, - }); - await this.nextFrame(); + y: 400 + } + }) + await this.nextFrame() } async clickEmptySpace() { await this.canvas.click({ position: { x: 35, - y: 31, - }, - }); - await this.nextFrame(); + y: 31 + } + }) + await this.nextFrame() } async dragAndDrop(source: Position, target: Position) { - await this.page.mouse.move(source.x, source.y); - await this.page.mouse.down(); - await this.page.mouse.move(target.x, target.y); - await this.page.mouse.up(); - await this.nextFrame(); + await this.page.mouse.move(source.x, source.y) + await this.page.mouse.down() + await this.page.mouse.move(target.x, target.y) + await this.page.mouse.up() + await this.nextFrame() } async dragNode2() { - await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 }); - await this.nextFrame(); + await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 }) + await this.nextFrame() } async disconnectEdge() { // CLIP input anchor - await this.page.mouse.move(427, 198); - await this.page.mouse.down(); - await this.page.mouse.move(427, 98); - await this.page.mouse.up(); + await this.page.mouse.move(427, 198) + await this.page.mouse.down() + await this.page.mouse.move(427, 98) + await this.page.mouse.up() // Move out the way to avoid highlight of menu item. - await this.page.mouse.move(10, 10); - await this.nextFrame(); + await this.page.mouse.move(10, 10) + await this.nextFrame() } async connectEdge() { // CLIP output anchor on Load Checkpoint Node. - await this.page.mouse.move(332, 509); - await this.page.mouse.down(); + await this.page.mouse.move(332, 509) + await this.page.mouse.down() // CLIP input anchor on CLIP Text Encode Node. - await this.page.mouse.move(427, 198); - await this.page.mouse.up(); - await this.nextFrame(); + await this.page.mouse.move(427, 198) + await this.page.mouse.up() + await this.nextFrame() } async adjustWidgetValue() { // Adjust Empty Latent Image's width input. - const page = this.page; - await page.locator("#graph-canvas").click({ + const page = this.page + await page.locator('#graph-canvas').click({ position: { x: 724, - y: 645, - }, - }); - await page.locator('input[type="text"]').click(); - await page.locator('input[type="text"]').fill("128"); - await page.locator('input[type="text"]').press("Enter"); - await this.nextFrame(); + y: 645 + } + }) + await page.locator('input[type="text"]').click() + await page.locator('input[type="text"]').fill('128') + await page.locator('input[type="text"]').press('Enter') + await this.nextFrame() } async zoom(deltaY: number) { - await this.page.mouse.move(10, 10); - await this.page.mouse.wheel(0, deltaY); - await this.nextFrame(); + await this.page.mouse.move(10, 10) + await this.page.mouse.wheel(0, deltaY) + await this.nextFrame() } async pan(offset: Position) { - await this.page.mouse.move(10, 10); - await this.page.mouse.down(); - await this.page.mouse.move(offset.x, offset.y); - await this.page.mouse.up(); - await this.nextFrame(); + await this.page.mouse.move(10, 10) + await this.page.mouse.down() + await this.page.mouse.move(offset.x, offset.y) + await this.page.mouse.up() + await this.nextFrame() } async rightClickCanvas() { - await this.page.mouse.click(10, 10, { button: "right" }); - await this.nextFrame(); + await this.page.mouse.click(10, 10, { button: 'right' }) + await this.nextFrame() } async doubleClickCanvas() { - await this.page.mouse.dblclick(10, 10); - await this.nextFrame(); + await this.page.mouse.dblclick(10, 10) + await this.nextFrame() } async clickEmptyLatentNode() { await this.canvas.click({ position: { x: 724, - y: 625, - }, - }); - this.page.mouse.move(10, 10); - await this.nextFrame(); + y: 625 + } + }) + this.page.mouse.move(10, 10) + await this.nextFrame() } async rightClickEmptyLatentNode() { await this.canvas.click({ position: { x: 724, - y: 645, + y: 645 }, - button: "right", - }); - this.page.mouse.move(10, 10); - await this.nextFrame(); + button: 'right' + }) + this.page.mouse.move(10, 10) + await this.nextFrame() } async select2Nodes() { // Select 2 CLIP nodes. - await this.page.keyboard.down("Control"); - await this.clickTextEncodeNode1(); - await this.clickTextEncodeNode2(); - await this.page.keyboard.up("Control"); - await this.nextFrame(); + await this.page.keyboard.down('Control') + await this.clickTextEncodeNode1() + await this.clickTextEncodeNode2() + await this.page.keyboard.up('Control') + await this.nextFrame() } async ctrlC() { - await this.page.keyboard.down("Control"); - await this.page.keyboard.press("KeyC"); - await this.page.keyboard.up("Control"); - await this.nextFrame(); + await this.page.keyboard.down('Control') + await this.page.keyboard.press('KeyC') + await this.page.keyboard.up('Control') + await this.nextFrame() } async ctrlV() { - await this.page.keyboard.down("Control"); - await this.page.keyboard.press("KeyV"); - await this.page.keyboard.up("Control"); - await this.nextFrame(); + await this.page.keyboard.down('Control') + await this.page.keyboard.press('KeyV') + await this.page.keyboard.up('Control') + await this.nextFrame() } async closeMenu() { - await this.page.click("button.comfy-close-menu-btn"); - await this.nextFrame(); + await this.page.click('button.comfy-close-menu-btn') + await this.nextFrame() } async resizeNode( @@ -316,17 +316,17 @@ export class ComfyPage { ) { const bottomRight = { x: nodePos.x + nodeSize.width, - y: nodePos.y + nodeSize.height, - }; + y: nodePos.y + nodeSize.height + } const target = { x: nodePos.x + nodeSize.width * ratioX, - y: nodePos.y + nodeSize.height * ratioY, - }; - await this.dragAndDrop(bottomRight, target); - await this.nextFrame(); + y: nodePos.y + nodeSize.height * ratioY + } + await this.dragAndDrop(bottomRight, target) + await this.nextFrame() if (revertAfter) { - await this.dragAndDrop(target, bottomRight); - await this.nextFrame(); + await this.dragAndDrop(target, bottomRight) + await this.nextFrame() } } @@ -337,13 +337,13 @@ export class ComfyPage { ) { const ksamplerPos = { x: 864, - y: 157, - }; + y: 157 + } const ksamplerSize = { width: 315, - height: 292, - }; - this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter); + height: 292 + } + this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter) } async resizeLoadCheckpointNode( @@ -353,19 +353,19 @@ export class ComfyPage { ) { const loadCheckpointPos = { x: 25, - y: 440, - }; + y: 440 + } const loadCheckpointSize = { width: 320, - height: 120, - }; + height: 120 + } this.resizeNode( loadCheckpointPos, loadCheckpointSize, percentX, percentY, revertAfter - ); + ) } async resizeEmptyLatentNode( @@ -375,26 +375,26 @@ export class ComfyPage { ) { const emptyLatentPos = { x: 475, - y: 580, - }; + y: 580 + } const emptyLatentSize = { width: 303, - height: 132, - }; + height: 132 + } this.resizeNode( emptyLatentPos, emptyLatentSize, percentX, percentY, revertAfter - ); + ) } } export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({ comfyPage: async ({ page }, use) => { - const comfyPage = new ComfyPage(page); - await comfyPage.setup(); - await use(comfyPage); - }, -}); + const comfyPage = new ComfyPage(page) + await comfyPage.setup() + await use(comfyPage) + } +}) diff --git a/browser_tests/copyPaste.spec.ts b/browser_tests/copyPaste.spec.ts index f475b0e4c..7d76cfad5 100644 --- a/browser_tests/copyPaste.spec.ts +++ b/browser_tests/copyPaste.spec.ts @@ -1,56 +1,56 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' -test.describe("Copy Paste", () => { - test("Can copy and paste node", async ({ comfyPage }) => { - await comfyPage.clickEmptyLatentNode(); - await comfyPage.page.mouse.move(10, 10); - await comfyPage.ctrlC(); - await comfyPage.ctrlV(); - await expect(comfyPage.canvas).toHaveScreenshot("copied-node.png"); - }); +test.describe('Copy Paste', () => { + test('Can copy and paste node', async ({ comfyPage }) => { + await comfyPage.clickEmptyLatentNode() + await comfyPage.page.mouse.move(10, 10) + await comfyPage.ctrlC() + await comfyPage.ctrlV() + await expect(comfyPage.canvas).toHaveScreenshot('copied-node.png') + }) - test("Can copy and paste text", async ({ comfyPage }) => { - const textBox = comfyPage.widgetTextBox; - await textBox.click(); - const originalString = await textBox.inputValue(); - await textBox.selectText(); - await comfyPage.ctrlC(); - await comfyPage.ctrlV(); - await comfyPage.ctrlV(); - const resultString = await textBox.inputValue(); - expect(resultString).toBe(originalString + originalString); - }); + test('Can copy and paste text', async ({ comfyPage }) => { + const textBox = comfyPage.widgetTextBox + await textBox.click() + const originalString = await textBox.inputValue() + await textBox.selectText() + await comfyPage.ctrlC() + await comfyPage.ctrlV() + await comfyPage.ctrlV() + const resultString = await textBox.inputValue() + expect(resultString).toBe(originalString + originalString) + }) /** * https://github.com/Comfy-Org/ComfyUI_frontend/issues/98 */ - test("Paste in text area with node previously copied", async ({ - comfyPage, + test('Paste in text area with node previously copied', async ({ + comfyPage }) => { - await comfyPage.clickEmptyLatentNode(); - await comfyPage.ctrlC(); - const textBox = comfyPage.widgetTextBox; - await textBox.click(); - await textBox.inputValue(); - await textBox.selectText(); - await comfyPage.ctrlC(); - await comfyPage.ctrlV(); - await comfyPage.ctrlV(); + await comfyPage.clickEmptyLatentNode() + await comfyPage.ctrlC() + const textBox = comfyPage.widgetTextBox + await textBox.click() + await textBox.inputValue() + await textBox.selectText() + await comfyPage.ctrlC() + await comfyPage.ctrlV() + await comfyPage.ctrlV() await expect(comfyPage.canvas).toHaveScreenshot( - "paste-in-text-area-with-node-previously-copied.png" - ); - }); + 'paste-in-text-area-with-node-previously-copied.png' + ) + }) - test("Copy text area does not copy node", async ({ comfyPage }) => { - const textBox = comfyPage.widgetTextBox; - await textBox.click(); - await textBox.inputValue(); - await textBox.selectText(); - await comfyPage.ctrlC(); + test('Copy text area does not copy node', async ({ comfyPage }) => { + const textBox = comfyPage.widgetTextBox + await textBox.click() + await textBox.inputValue() + await textBox.selectText() + await comfyPage.ctrlC() // Unfocus textbox. - await comfyPage.page.mouse.click(10, 10); - await comfyPage.ctrlV(); - await expect(comfyPage.canvas).toHaveScreenshot("no-node-copied.png"); - }); -}); + await comfyPage.page.mouse.click(10, 10) + await comfyPage.ctrlV() + await expect(comfyPage.canvas).toHaveScreenshot('no-node-copied.png') + }) +}) diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts index 3895aca74..9a9dffae2 100644 --- a/browser_tests/interaction.spec.ts +++ b/browser_tests/interaction.spec.ts @@ -1,77 +1,75 @@ -import { expect } from "@playwright/test"; -import { ComfyPage, comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { ComfyPage, comfyPageFixture as test } from './ComfyPage' -test.describe("Node Interaction", () => { - test("Can enter prompt", async ({ comfyPage }) => { - const textBox = comfyPage.widgetTextBox; - await textBox.click(); - await textBox.fill("Hello World"); - await expect(textBox).toHaveValue("Hello World"); - await textBox.fill("Hello World 2"); - await expect(textBox).toHaveValue("Hello World 2"); - }); +test.describe('Node Interaction', () => { + test('Can enter prompt', async ({ comfyPage }) => { + const textBox = comfyPage.widgetTextBox + await textBox.click() + await textBox.fill('Hello World') + await expect(textBox).toHaveValue('Hello World') + await textBox.fill('Hello World 2') + await expect(textBox).toHaveValue('Hello World 2') + }) - test("Can highlight selected", async ({ comfyPage }) => { - await expect(comfyPage.canvas).toHaveScreenshot("default.png"); - await comfyPage.clickTextEncodeNode1(); - await expect(comfyPage.canvas).toHaveScreenshot("selected-node1.png"); - await comfyPage.clickTextEncodeNode2(); - await expect(comfyPage.canvas).toHaveScreenshot("selected-node2.png"); - }); + test('Can highlight selected', async ({ comfyPage }) => { + await expect(comfyPage.canvas).toHaveScreenshot('default.png') + await comfyPage.clickTextEncodeNode1() + await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png') + await comfyPage.clickTextEncodeNode2() + await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png') + }) // Flaky. See https://github.com/comfyanonymous/ComfyUI/issues/3866 - test.skip("Can drag node", async ({ comfyPage }) => { - await comfyPage.dragNode2(); - await expect(comfyPage.canvas).toHaveScreenshot("dragged-node1.png"); - }); + test.skip('Can drag node', async ({ comfyPage }) => { + await comfyPage.dragNode2() + await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png') + }) - test("Can disconnect/connect edge", async ({ comfyPage }) => { - await comfyPage.disconnectEdge(); + test('Can disconnect/connect edge', async ({ comfyPage }) => { + await comfyPage.disconnectEdge() await expect(comfyPage.canvas).toHaveScreenshot( - "disconnected-edge-with-menu.png" - ); - await comfyPage.connectEdge(); + 'disconnected-edge-with-menu.png' + ) + await comfyPage.connectEdge() // Litegraph renders edge with a slight offset. - await expect(comfyPage.canvas).toHaveScreenshot("default.png", { - maxDiffPixels: 50, - }); - }); + await expect(comfyPage.canvas).toHaveScreenshot('default.png', { + maxDiffPixels: 50 + }) + }) - test("Can adjust widget value", async ({ comfyPage }) => { - await comfyPage.adjustWidgetValue(); - await expect(comfyPage.canvas).toHaveScreenshot( - "adjusted-widget-value.png" - ); - }); + test('Can adjust widget value', async ({ comfyPage }) => { + await comfyPage.adjustWidgetValue() + await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png') + }) - test("Link snap to slot", async ({ comfyPage }) => { - await comfyPage.loadWorkflow("snap_to_slot"); - await expect(comfyPage.canvas).toHaveScreenshot("snap_to_slot.png"); + test('Link snap to slot', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('snap_to_slot') + await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png') const outputSlotPos = { x: 406, - y: 333, - }; + y: 333 + } const samplerNodeCenterPos = { x: 748, - y: 77, - }; - await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos); + y: 77 + } + await comfyPage.dragAndDrop(outputSlotPos, samplerNodeCenterPos) - await expect(comfyPage.canvas).toHaveScreenshot("snap_to_slot_linked.png"); - }); -}); + await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot_linked.png') + }) +}) -test.describe("Canvas Interaction", () => { - test("Can zoom in/out", async ({ comfyPage }) => { - await comfyPage.zoom(-100); - await expect(comfyPage.canvas).toHaveScreenshot("zoomed-in.png"); - await comfyPage.zoom(200); - await expect(comfyPage.canvas).toHaveScreenshot("zoomed-out.png"); - }); +test.describe('Canvas Interaction', () => { + test('Can zoom in/out', async ({ comfyPage }) => { + await comfyPage.zoom(-100) + await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in.png') + await comfyPage.zoom(200) + await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out.png') + }) - test("Can pan", async ({ comfyPage }) => { - await comfyPage.pan({ x: 200, y: 200 }); - await expect(comfyPage.canvas).toHaveScreenshot("panned.png"); - }); -}); + test('Can pan', async ({ comfyPage }) => { + await comfyPage.pan({ x: 200, y: 200 }) + await expect(comfyPage.canvas).toHaveScreenshot('panned.png') + }) +}) diff --git a/browser_tests/litegraphEvent.spec.ts b/browser_tests/litegraphEvent.spec.ts index 8683abe35..a5c583849 100644 --- a/browser_tests/litegraphEvent.spec.ts +++ b/browser_tests/litegraphEvent.spec.ts @@ -1,36 +1,36 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' function listenForEvent(): Promise { return new Promise((resolve) => { - document.addEventListener("litegraph:canvas", (e) => resolve(e), { - once: true, - }); - }); + document.addEventListener('litegraph:canvas', (e) => resolve(e), { + once: true + }) + }) } -test.describe("Canvas Event", () => { - test("Emit litegraph:canvas empty-release", async ({ comfyPage }) => { - const eventPromise = comfyPage.page.evaluate(listenForEvent); - const disconnectPromise = comfyPage.disconnectEdge(); - const event = await eventPromise; - await disconnectPromise; +test.describe('Canvas Event', () => { + test('Emit litegraph:canvas empty-release', async ({ comfyPage }) => { + const eventPromise = comfyPage.page.evaluate(listenForEvent) + const disconnectPromise = comfyPage.disconnectEdge() + const event = await eventPromise + await disconnectPromise - expect(event).not.toBeNull(); + expect(event).not.toBeNull() // No further check on event content as the content is dropped by // playwright for some reason. // See https://github.com/microsoft/playwright/issues/31580 - }); + }) - test("Emit litegraph:canvas empty-double-click", async ({ comfyPage }) => { - const eventPromise = comfyPage.page.evaluate(listenForEvent); - const doubleClickPromise = comfyPage.doubleClickCanvas(); - const event = await eventPromise; - await doubleClickPromise; + test('Emit litegraph:canvas empty-double-click', async ({ comfyPage }) => { + const eventPromise = comfyPage.page.evaluate(listenForEvent) + const doubleClickPromise = comfyPage.doubleClickCanvas() + const event = await eventPromise + await doubleClickPromise - expect(event).not.toBeNull(); + expect(event).not.toBeNull() // No further check on event content as the content is dropped by // playwright for some reason. // See https://github.com/microsoft/playwright/issues/31580 - }); -}); + }) +}) diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts index 104e1ed0b..1c74a8e98 100644 --- a/browser_tests/menu.spec.ts +++ b/browser_tests/menu.spec.ts @@ -1,45 +1,45 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' -test.describe("Menu", () => { +test.describe('Menu', () => { test.beforeEach(async ({ comfyPage }) => { await comfyPage.page.evaluate(async () => { - await window["app"].ui.settings.setSettingValueAsync( - "Comfy.UseNewMenu", - "Top" - ); - }); - }); + await window['app'].ui.settings.setSettingValueAsync( + 'Comfy.UseNewMenu', + 'Top' + ) + }) + }) test.afterEach(async ({ comfyPage }) => { - const currentThemeId = await comfyPage.menu.getThemeId(); - if (currentThemeId !== "dark") { - await comfyPage.menu.toggleTheme(); + const currentThemeId = await comfyPage.menu.getThemeId() + if (currentThemeId !== 'dark') { + await comfyPage.menu.toggleTheme() } await comfyPage.page.evaluate(async () => { - await window["app"].ui.settings.setSettingValueAsync( - "Comfy.UseNewMenu", - "Disabled" - ); - }); - }); + await window['app'].ui.settings.setSettingValueAsync( + 'Comfy.UseNewMenu', + 'Disabled' + ) + }) + }) - test("Toggle theme", async ({ comfyPage }) => { - test.setTimeout(30000); + test('Toggle theme', async ({ comfyPage }) => { + test.setTimeout(30000) - expect(await comfyPage.menu.getThemeId()).toBe("dark"); + expect(await comfyPage.menu.getThemeId()).toBe('dark') - await comfyPage.menu.toggleTheme(); + await comfyPage.menu.toggleTheme() - expect(await comfyPage.menu.getThemeId()).toBe("light"); + expect(await comfyPage.menu.getThemeId()).toBe('light') // Theme id should persist after reload. - await comfyPage.page.reload(); - await comfyPage.setup(); - expect(await comfyPage.menu.getThemeId()).toBe("light"); + await comfyPage.page.reload() + await comfyPage.setup() + expect(await comfyPage.menu.getThemeId()).toBe('light') - await comfyPage.menu.toggleTheme(); + await comfyPage.menu.toggleTheme() - expect(await comfyPage.menu.getThemeId()).toBe("dark"); - }); -}); + expect(await comfyPage.menu.getThemeId()).toBe('dark') + }) +}) diff --git a/browser_tests/nodeSearchBox.spec.ts b/browser_tests/nodeSearchBox.spec.ts index 8ee6aa573..8676d9a98 100644 --- a/browser_tests/nodeSearchBox.spec.ts +++ b/browser_tests/nodeSearchBox.spec.ts @@ -1,35 +1,35 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' -test.describe("Node search box", () => { - test("Can trigger on empty canvas double click", async ({ comfyPage }) => { - await comfyPage.doubleClickCanvas(); - await expect(comfyPage.searchBox.input).toHaveCount(1); - }); +test.describe('Node search box', () => { + test('Can trigger on empty canvas double click', async ({ comfyPage }) => { + await comfyPage.doubleClickCanvas() + await expect(comfyPage.searchBox.input).toHaveCount(1) + }) - test("Can trigger on link release", async ({ comfyPage }) => { - await comfyPage.page.keyboard.down("Shift"); - await comfyPage.disconnectEdge(); - await expect(comfyPage.searchBox.input).toHaveCount(1); - }); + test('Can trigger on link release', async ({ comfyPage }) => { + await comfyPage.page.keyboard.down('Shift') + await comfyPage.disconnectEdge() + await expect(comfyPage.searchBox.input).toHaveCount(1) + }) - test("Does not trigger on link release (no shift)", async ({ comfyPage }) => { - await comfyPage.disconnectEdge(); - await expect(comfyPage.searchBox.input).toHaveCount(0); - }); + test('Does not trigger on link release (no shift)', async ({ comfyPage }) => { + await comfyPage.disconnectEdge() + await expect(comfyPage.searchBox.input).toHaveCount(0) + }) - test("Can add node", async ({ comfyPage }) => { - await comfyPage.doubleClickCanvas(); - await expect(comfyPage.searchBox.input).toHaveCount(1); - await comfyPage.searchBox.fillAndSelectFirstNode("KSampler"); - await expect(comfyPage.canvas).toHaveScreenshot("added-node.png"); - }); + test('Can add node', async ({ comfyPage }) => { + await comfyPage.doubleClickCanvas() + await expect(comfyPage.searchBox.input).toHaveCount(1) + await comfyPage.searchBox.fillAndSelectFirstNode('KSampler') + await expect(comfyPage.canvas).toHaveScreenshot('added-node.png') + }) - test("Can auto link node", async ({ comfyPage }) => { - await comfyPage.page.keyboard.down("Shift"); - await comfyPage.disconnectEdge(); - await comfyPage.page.keyboard.up("Shift"); - await comfyPage.searchBox.fillAndSelectFirstNode("CLIPTextEncode"); - await expect(comfyPage.canvas).toHaveScreenshot("auto-linked-node.png"); - }); -}); + test('Can auto link node', async ({ comfyPage }) => { + await comfyPage.page.keyboard.down('Shift') + await comfyPage.disconnectEdge() + await comfyPage.page.keyboard.up('Shift') + await comfyPage.searchBox.fillAndSelectFirstNode('CLIPTextEncode') + await expect(comfyPage.canvas).toHaveScreenshot('auto-linked-node.png') + }) +}) diff --git a/browser_tests/rightClickMenu.spec.ts b/browser_tests/rightClickMenu.spec.ts index 6617f1aff..69f7f72e8 100644 --- a/browser_tests/rightClickMenu.spec.ts +++ b/browser_tests/rightClickMenu.spec.ts @@ -1,92 +1,88 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' -test.describe("Canvas Right Click Menu", () => { +test.describe('Canvas Right Click Menu', () => { // See https://github.com/comfyanonymous/ComfyUI/issues/3883 // Right-click menu on canvas's option sequence is not stable. - test.skip("Can add node", async ({ comfyPage }) => { - await comfyPage.rightClickCanvas(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-menu.png"); - await comfyPage.page.getByText("Add Node").click(); - await comfyPage.nextFrame(); - await expect(comfyPage.canvas).toHaveScreenshot("add-node-menu.png"); - await comfyPage.page.getByText("loaders").click(); - await comfyPage.nextFrame(); - await expect(comfyPage.canvas).toHaveScreenshot( - "add-node-menu-loaders.png" - ); - await comfyPage.page.getByText("Load VAE").click(); - await comfyPage.nextFrame(); - await expect(comfyPage.canvas).toHaveScreenshot("add-node-node-added.png"); - }); + test.skip('Can add node', async ({ comfyPage }) => { + await comfyPage.rightClickCanvas() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png') + await comfyPage.page.getByText('Add Node').click() + await comfyPage.nextFrame() + await expect(comfyPage.canvas).toHaveScreenshot('add-node-menu.png') + await comfyPage.page.getByText('loaders').click() + await comfyPage.nextFrame() + await expect(comfyPage.canvas).toHaveScreenshot('add-node-menu-loaders.png') + await comfyPage.page.getByText('Load VAE').click() + await comfyPage.nextFrame() + await expect(comfyPage.canvas).toHaveScreenshot('add-node-node-added.png') + }) // See https://github.com/comfyanonymous/ComfyUI/issues/3883 // Right-click menu on canvas's option sequence is not stable. - test.skip("Can add group", async ({ comfyPage }) => { - await comfyPage.rightClickCanvas(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-menu.png"); - await comfyPage.page.getByText("Add Group", { exact: true }).click(); - await comfyPage.nextFrame(); - await expect(comfyPage.canvas).toHaveScreenshot( - "add-group-group-added.png" - ); - }); + test.skip('Can add group', async ({ comfyPage }) => { + await comfyPage.rightClickCanvas() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-menu.png') + await comfyPage.page.getByText('Add Group', { exact: true }).click() + await comfyPage.nextFrame() + await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png') + }) - test("Can convert to group node", async ({ comfyPage }) => { - await comfyPage.select2Nodes(); - await expect(comfyPage.canvas).toHaveScreenshot("selected-2-nodes.png"); - comfyPage.page.on("dialog", async (dialog) => { - await dialog.accept("GroupNode2CLIP"); - }); - await comfyPage.rightClickCanvas(); - await comfyPage.page.getByText("Convert to Group Node").click(); - await comfyPage.nextFrame(); + test('Can convert to group node', async ({ comfyPage }) => { + await comfyPage.select2Nodes() + await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png') + comfyPage.page.on('dialog', async (dialog) => { + await dialog.accept('GroupNode2CLIP') + }) + await comfyPage.rightClickCanvas() + await comfyPage.page.getByText('Convert to Group Node').click() + await comfyPage.nextFrame() await expect(comfyPage.canvas).toHaveScreenshot( - "right-click-node-group-node.png" - ); - }); -}); + 'right-click-node-group-node.png' + ) + }) +}) -test.describe("Node Right Click Menu", () => { - test("Can open properties panel", async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-node.png"); - await comfyPage.page.getByText("Properties Panel").click(); - await comfyPage.nextFrame(); +test.describe('Node Right Click Menu', () => { + test('Can open properties panel', async ({ comfyPage }) => { + await comfyPage.rightClickEmptyLatentNode() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') + await comfyPage.page.getByText('Properties Panel').click() + await comfyPage.nextFrame() await expect(comfyPage.canvas).toHaveScreenshot( - "right-click-node-properties-panel.png" - ); - }); + 'right-click-node-properties-panel.png' + ) + }) - test("Can collapse", async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-node.png"); - await comfyPage.page.getByText("Collapse").click(); - await comfyPage.nextFrame(); + test('Can collapse', async ({ comfyPage }) => { + await comfyPage.rightClickEmptyLatentNode() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') + await comfyPage.page.getByText('Collapse').click() + await comfyPage.nextFrame() await expect(comfyPage.canvas).toHaveScreenshot( - "right-click-node-collapsed.png" - ); - }); + 'right-click-node-collapsed.png' + ) + }) - test("Can bypass", async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-node.png"); - await comfyPage.page.getByText("Bypass").click(); - await comfyPage.nextFrame(); + test('Can bypass', async ({ comfyPage }) => { + await comfyPage.rightClickEmptyLatentNode() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') + await comfyPage.page.getByText('Bypass').click() + await comfyPage.nextFrame() await expect(comfyPage.canvas).toHaveScreenshot( - "right-click-node-bypassed.png" - ); - }); + 'right-click-node-bypassed.png' + ) + }) - test("Can convert widget to input", async ({ comfyPage }) => { - await comfyPage.rightClickEmptyLatentNode(); - await expect(comfyPage.canvas).toHaveScreenshot("right-click-node.png"); - await comfyPage.page.getByText("Convert Widget to Input").click(); - await comfyPage.nextFrame(); - await comfyPage.page.getByText("Convert width to input").click(); - await comfyPage.nextFrame(); + test('Can convert widget to input', async ({ comfyPage }) => { + await comfyPage.rightClickEmptyLatentNode() + await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png') + await comfyPage.page.getByText('Convert Widget to Input').click() + await comfyPage.nextFrame() + await comfyPage.page.getByText('Convert width to input').click() + await comfyPage.nextFrame() await expect(comfyPage.canvas).toHaveScreenshot( - "right-click-node-widget-converted.png" - ); - }); -}); + 'right-click-node-widget-converted.png' + ) + }) +}) diff --git a/browser_tests/textWidgetTruncate.spec.ts b/browser_tests/textWidgetTruncate.spec.ts index db55ca5cf..0c2831cc2 100644 --- a/browser_tests/textWidgetTruncate.spec.ts +++ b/browser_tests/textWidgetTruncate.spec.ts @@ -1,28 +1,28 @@ -import { expect } from "@playwright/test"; -import { comfyPageFixture as test } from "./ComfyPage"; +import { expect } from '@playwright/test' +import { comfyPageFixture as test } from './ComfyPage' -test.describe("Combo text widget", () => { - test("Truncates text when resized", async ({ comfyPage }) => { - await comfyPage.resizeLoadCheckpointNode(0.2, 1); +test.describe('Combo text widget', () => { + test('Truncates text when resized', async ({ comfyPage }) => { + await comfyPage.resizeLoadCheckpointNode(0.2, 1) await expect(comfyPage.canvas).toHaveScreenshot( - "load-checkpoint-resized-min-width.png" - ); - await comfyPage.closeMenu(); - await comfyPage.resizeKsamplerNode(0.2, 1); + 'load-checkpoint-resized-min-width.png' + ) + await comfyPage.closeMenu() + await comfyPage.resizeKsamplerNode(0.2, 1) await expect(comfyPage.canvas).toHaveScreenshot( `ksampler-resized-min-width.png` - ); - }); + ) + }) test("Doesn't truncate when space still available", async ({ comfyPage }) => { - await comfyPage.resizeEmptyLatentNode(0.8, 0.8); + await comfyPage.resizeEmptyLatentNode(0.8, 0.8) await expect(comfyPage.canvas).toHaveScreenshot( - "empty-latent-resized-80-percent.png" - ); - }); + 'empty-latent-resized-80-percent.png' + ) + }) - test("Can revert to full text", async ({ comfyPage }) => { - await comfyPage.resizeLoadCheckpointNode(0.8, 1, true); - await expect(comfyPage.canvas).toHaveScreenshot("resized-to-original.png"); - }); -}); + test('Can revert to full text', async ({ comfyPage }) => { + await comfyPage.resizeLoadCheckpointNode(0.8, 1, true) + await expect(comfyPage.canvas).toHaveScreenshot('resized-to-original.png') + }) +}) diff --git a/jest.config.ts b/jest.config.ts index db7ad44f7..1803a8109 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,26 +1,26 @@ -import type { JestConfigWithTsJest } from "ts-jest"; +import type { JestConfigWithTsJest } from 'ts-jest' const jestConfig: JestConfigWithTsJest = { - testMatch: ["**/tests-ui/**/*.test.ts"], - testEnvironment: "jsdom", + testMatch: ['**/tests-ui/**/*.test.ts'], + testEnvironment: 'jsdom', transform: { - "^.+\\.m?[tj]sx?$": [ - "ts-jest", + '^.+\\.m?[tj]sx?$': [ + 'ts-jest', { - tsconfig: "./tsconfig.json", - babelConfig: "./babel.config.json", - }, - ], + tsconfig: './tsconfig.json', + babelConfig: './babel.config.json' + } + ] }, - setupFiles: ["./tests-ui/globalSetup.ts"], - setupFilesAfterEnv: ["./tests-ui/afterSetup.ts"], + setupFiles: ['./tests-ui/globalSetup.ts'], + setupFilesAfterEnv: ['./tests-ui/afterSetup.ts'], clearMocks: true, resetModules: true, testTimeout: 10000, moduleNameMapper: { - "^@/(.*)$": "/src/$1", - "\\.(css|less|scss|sass)$": "identity-obj-proxy", - }, -}; + '^@/(.*)$': '/src/$1', + '\\.(css|less|scss|sass)$': 'identity-obj-proxy' + } +} -export default jestConfig; +export default jestConfig diff --git a/playwright.config.ts b/playwright.config.ts index 6256b1565..da2772efa 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,4 +1,4 @@ -import { defineConfig, devices } from "@playwright/test"; +import { defineConfig, devices } from '@playwright/test' /** * Read environment variables from file. @@ -11,7 +11,7 @@ import { defineConfig, devices } from "@playwright/test"; * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - testDir: "./browser_tests", + testDir: './browser_tests', /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ @@ -21,23 +21,23 @@ export default defineConfig({ /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: "html", + reporter: 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ // baseURL: 'http://127.0.0.1:3000', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: "on-first-retry", + trace: 'on-first-retry' }, /* Configure projects for major browsers */ projects: [ { - name: "chromium", - use: { ...devices["Desktop Chrome"] }, - timeout: 5000, - }, + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + timeout: 5000 + } // { // name: 'firefox', @@ -68,7 +68,7 @@ export default defineConfig({ // name: 'Google Chrome', // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // }, - ], + ] /* Run your local dev server before starting the tests */ // webServer: { @@ -76,4 +76,4 @@ export default defineConfig({ // url: 'http://127.0.0.1:3000', // reuseExistingServer: !process.env.CI, // }, -}); +}) diff --git a/postcss.config.js b/postcss.config.js index 2aa7205d4..2b75bd8a7 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ export default { plugins: { tailwindcss: {}, - autoprefixer: {}, - }, -}; + autoprefixer: {} + } +} diff --git a/scripts/deploy.js b/scripts/deploy.js index 6f97958f5..1e2a49447 100644 --- a/scripts/deploy.js +++ b/scripts/deploy.js @@ -1,14 +1,14 @@ -import { copy } from "fs-extra"; -import { config } from "dotenv"; -config(); +import { copy } from 'fs-extra' +import { config } from 'dotenv' +config() -const sourceDir = "./dist"; -const targetDir = process.env.DEPLOY_COMFYUI_DIR; +const sourceDir = './dist' +const targetDir = process.env.DEPLOY_COMFYUI_DIR copy(sourceDir, targetDir) .then(() => { - console.log(`Directory copied successfully! ${sourceDir} -> ${targetDir}`); + console.log(`Directory copied successfully! ${sourceDir} -> ${targetDir}`) }) .catch((err) => { - console.error("Error copying directory:", err); - }); + console.error('Error copying directory:', err) + }) diff --git a/scripts/zipdist.js b/scripts/zipdist.js index 3afb7c737..383fa774a 100644 --- a/scripts/zipdist.js +++ b/scripts/zipdist.js @@ -1,9 +1,9 @@ -import zipdir from "zip-dir"; +import zipdir from 'zip-dir' -zipdir("./dist", { saveTo: "./dist.zip" }, function (err, buffer) { +zipdir('./dist', { saveTo: './dist.zip' }, function (err, buffer) { if (err) { - console.error('Error zipping "dist" directory:', err); + console.error('Error zipping "dist" directory:', err) } else { - console.log('Successfully zipped "dist" directory.'); + console.log('Successfully zipped "dist" directory.') } -}); +}) diff --git a/src/App.vue b/src/App.vue index 7a4d69de8..dab6387d4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,65 +13,65 @@