Format everything (#211)

2026-03-05 13:10:24 +00:00 · 2024-07-23 15:40:54 -04:00
parent 648e52e39c
commit 1b7db43f8a
25 changed files with 1014 additions and 526 deletions
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -54,7 +54,7 @@ export class ComfyPage {
    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.workflowUploadInput = page.locator("#comfy-file-input");
    this.searchBox = new ComfyNodeSearchBox(page);
  }

@@ -69,7 +69,9 @@ export class ComfyPage {
  }

  async loadWorkflow(workflowName: string) {
-    await this.workflowUploadInput.setInputFiles(`./browser_tests/assets/${workflowName}.json`);
+    await this.workflowUploadInput.setInputFiles(
+      `./browser_tests/assets/${workflowName}.json`
+    );
    await this.nextFrame();
  }

@@ -234,15 +236,21 @@ export class ComfyPage {
    await this.nextFrame();
  }

-  async resizeNode(nodePos: Position, nodeSize: Size, ratioX: number, ratioY: number, revertAfter: boolean = false) {
+  async resizeNode(
+    nodePos: Position,
+    nodeSize: Size,
+    ratioX: number,
+    ratioY: number,
+    revertAfter: boolean = false
+  ) {
    const bottomRight = {
      x: nodePos.x + nodeSize.width,
      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();
    if (revertAfter) {
@@ -251,42 +259,65 @@ export class ComfyPage {
    }
  }

-  async resizeKsamplerNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+  async resizeKsamplerNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
    const ksamplerPos = {
      x: 864,
-      y: 157
-    }
+      y: 157,
+    };
    const ksamplerSize = {
      width: 315,
      height: 292,
-    }
+    };
    this.resizeNode(ksamplerPos, ksamplerSize, percentX, percentY, revertAfter);
  }
-  
-  async resizeLoadCheckpointNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+
+  async resizeLoadCheckpointNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
    const loadCheckpointPos = {
      x: 25,
      y: 440,
-    }
+    };
    const loadCheckpointSize = {
      width: 320,
      height: 120,
-    }
-    this.resizeNode(loadCheckpointPos, loadCheckpointSize, percentX, percentY, revertAfter);
+    };
+    this.resizeNode(
+      loadCheckpointPos,
+      loadCheckpointSize,
+      percentX,
+      percentY,
+      revertAfter
+    );
  }
-  
-  async resizeEmptyLatentNode(percentX: number, percentY: number, revertAfter: boolean = false) {
+
+  async resizeEmptyLatentNode(
+    percentX: number,
+    percentY: number,
+    revertAfter: boolean = false
+  ) {
    const emptyLatentPos = {
      x: 475,
      y: 580,
-    }
+    };
    const emptyLatentSize = {
      width: 303,
      height: 132,
-    }
-    this.resizeNode(emptyLatentPos, emptyLatentSize, percentX, percentY, revertAfter);
+    };
+    this.resizeNode(
+      emptyLatentPos,
+      emptyLatentSize,
+      percentX,
+      percentY,
+      revertAfter
+    );
  }
-
 }

 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
--- a/browser_tests/interaction.spec.ts
+++ b/browser_tests/interaction.spec.ts
@@ -1,71 +1,77 @@
-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 }) => {
+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');
+    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');
+  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 expect(comfyPage.canvas).toHaveScreenshot("selected-node1.png");
    await comfyPage.clickTextEncodeNode2();
-    await expect(comfyPage.canvas).toHaveScreenshot('selected-node2.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("selected-node2.png");
  });

  // Flaky. See https://github.com/comfyanonymous/ComfyUI/issues/3866
-  test.skip('Can drag node', async ({ comfyPage }) => {
+  test.skip("Can drag node", async ({ comfyPage }) => {
    await comfyPage.dragNode2();
-    await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("dragged-node1.png");
  });

-  test('Can disconnect/connect edge', async ({ comfyPage }) => {
+  test("Can disconnect/connect edge", async ({ comfyPage }) => {
    await comfyPage.disconnectEdge();
-    await expect(comfyPage.canvas).toHaveScreenshot('disconnected-edge-with-menu.png');
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      "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 }) => {
+  test("Can adjust widget value", async ({ comfyPage }) => {
    await comfyPage.adjustWidgetValue();
-    await expect(comfyPage.canvas).toHaveScreenshot('adjusted-widget-value.png');
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      "adjusted-widget-value.png"
+    );
  });

-  test('Link snap to slot', async ({comfyPage}) => {
+  test("Link snap to slot", async ({ comfyPage }) => {
    await comfyPage.loadWorkflow("snap_to_slot");
-    await expect(comfyPage.canvas).toHaveScreenshot('snap_to_slot.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("snap_to_slot.png");

    const outputSlotPos = {
      x: 406,
-      y: 333
+      y: 333,
    };
    const samplerNodeCenterPos = {
      x: 748,
-      y: 77
+      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 }) => {
+test.describe("Canvas Interaction", () => {
+  test("Can zoom in/out", async ({ comfyPage }) => {
    await comfyPage.zoom(-100);
-    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-in.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("zoomed-in.png");
    await comfyPage.zoom(200);
-    await expect(comfyPage.canvas).toHaveScreenshot('zoomed-out.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("zoomed-out.png");
  });

-  test('Can pan', async ({ comfyPage }) => {
+  test("Can pan", async ({ comfyPage }) => {
    await comfyPage.pan({ x: 200, y: 200 });
-    await expect(comfyPage.canvas).toHaveScreenshot('panned.png');
+    await expect(comfyPage.canvas).toHaveScreenshot("panned.png");
  });
 });
--- a/browser_tests/litegraphEvent.spec.ts
+++ b/browser_tests/litegraphEvent.spec.ts
@@ -3,7 +3,9 @@ import { comfyPageFixture as test } from "./ComfyPage";

 function listenForEvent(): Promise<Event> {
  return new Promise<Event>((resolve) => {
-    document.addEventListener("litegraph:canvas", (e) => resolve(e), { once: true });
+    document.addEventListener("litegraph:canvas", (e) => resolve(e), {
+      once: true,
+    });
  });
 }

--- a/browser_tests/nodeSearchBox.spec.ts
+++ b/browser_tests/nodeSearchBox.spec.ts
@@ -1,6 +1,5 @@
 import { expect } from "@playwright/test";
-import { comfyPageFixture as test} from "./ComfyPage";
-
+import { comfyPageFixture as test } from "./ComfyPage";

 test.describe("Node search box", () => {
  test("Can trigger on empty canvas double click", async ({ comfyPage }) => {
--- a/browser_tests/rightClickMenu.spec.ts
+++ b/browser_tests/rightClickMenu.spec.ts
@@ -1,78 +1,92 @@
-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', () => {
-    // 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.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");
+  });

-    // 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');
-    });
+  // 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('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');
+  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"
+    );
+  });
 });

-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');
-    });
+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"
+    );
+  });

-    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');
-    });
+  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"
+    );
+  });

-    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');
-    });
+  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"
+    );
+  });

-    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');
-    });
+  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"
+    );
+  });
 });