Upload folder using huggingface_hub

ComfyUI/tests-ui/.gitignore

@@ -0,0 +1 @@
+node_modules

ComfyUI/tests-ui/afterSetup.js

@@ -0,0 +1,9 @@
+const { start } = require("./utils");
+const lg = require("./utils/litegraph");
+
+// Load things once per test file before to ensure its all warmed up for the tests
+beforeAll(async () => {
+	lg.setup(global);
+	await start({ resetEnv: true });
+	lg.teardown(global);
+});

ComfyUI/tests-ui/babel.config.json

@@ -0,0 +1,4 @@
+{
+	"presets": ["@babel/preset-env"],
+	"plugins": ["babel-plugin-transform-import-meta"]
+}

ComfyUI/tests-ui/globalSetup.js

@@ -0,0 +1,14 @@
+module.exports = async function () {
+	global.ResizeObserver = class ResizeObserver {
+		observe() {}
+		unobserve() {}
+		disconnect() {}
+	};
+
+	const { nop } = require("./utils/nopProxy");
+	global.enableWebGLCanvas = nop;
+
+	HTMLCanvasElement.prototype.getContext = nop;
+
+	localStorage["Comfy.Settings.Comfy.Logging.Enabled"] = "false";
+};

ComfyUI/tests-ui/jest.config.js

@@ -0,0 +1,11 @@
+/** @type {import('jest').Config} */
+const config = {
+	testEnvironment: "jsdom",
+	setupFiles: ["./globalSetup.js"],
+	setupFilesAfterEnv: ["./afterSetup.js"],
+	clearMocks: true,
+	resetModules: true,
+	testTimeout: 10000
+};
+
+module.exports = config;

ComfyUI/tests-ui/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "comfui-tests",
+  "version": "1.0.0",
+  "description": "UI tests",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest",
+    "test:generate": "node setup.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/comfyanonymous/ComfyUI.git"
+  },
+  "keywords": [
+    "comfyui",
+    "test"
+  ],
+  "author": "comfyanonymous",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/comfyanonymous/ComfyUI/issues"
+  },
+  "homepage": "https://github.com/comfyanonymous/ComfyUI#readme",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.20",
+    "@types/jest": "^29.5.5",
+    "babel-plugin-transform-import-meta": "^2.2.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  }
+}

ComfyUI/tests-ui/setup.js

@@ -0,0 +1,88 @@
+const { spawn } = require("child_process");
+const { resolve } = require("path");
+const { existsSync, mkdirSync, writeFileSync } = require("fs");
+const http = require("http");
+
+async function setup() {
+	// Wait up to 30s for it to start
+	let success = false;
+	let child;
+	for (let i = 0; i < 30; i++) {
+		try {
+			await new Promise((res, rej) => {
+				http
+					.get("http://127.0.0.1:8188/object_info", (resp) => {
+						let data = "";
+						resp.on("data", (chunk) => {
+							data += chunk;
+						});
+						resp.on("end", () => {
+							// Modify the response data to add some checkpoints
+							const objectInfo = JSON.parse(data);
+							objectInfo.CheckpointLoaderSimple.input.required.ckpt_name[0] = ["model1.safetensors", "model2.ckpt"];
+							objectInfo.VAELoader.input.required.vae_name[0] = ["vae1.safetensors", "vae2.ckpt"];
+
+							data = JSON.stringify(objectInfo, undefined, "\t");
+
+							const outDir = resolve("./data");
+							if (!existsSync(outDir)) {
+								mkdirSync(outDir);
+							}
+
+							const outPath = resolve(outDir, "object_info.json");
+							console.log(`Writing ${Object.keys(objectInfo).length} nodes to ${outPath}`);
+							writeFileSync(outPath, data, {
+								encoding: "utf8",
+							});
+							res();
+						});
+					})
+					.on("error", rej);
+			});
+			success = true;
+			break;
+		} catch (error) {
+			console.log(i + "/30", error);
+			if (i === 0) {
+				// Start the server on first iteration if it fails to connect
+				console.log("Starting ComfyUI server...");
+
+				let python = resolve("../../python_embeded/python.exe");
+				let args;
+				let cwd;
+				if (existsSync(python)) {
+					args = ["-s", "ComfyUI/main.py"];
+					cwd = "../..";
+				} else {
+					python = "python";
+					args = ["main.py"];
+					cwd = "..";
+				}
+				args.push("--cpu");
+				console.log(python, ...args);
+				child = spawn(python, args, { cwd });
+				child.on("error", (err) => {
+					console.log(`Server error (${err})`);
+					i = 30;
+				});
+				child.on("exit", (code) => {
+					if (!success) {
+						console.log(`Server exited (${code})`);
+						i = 30;
+					}
+				});
+			}
+			await new Promise((r) => {
+				setTimeout(r, 1000);
+			});
+		}
+	}
+
+	child?.kill();
+
+	if (!success) {
+		throw new Error("Waiting for server failed...");
+	}
+}
+
+ setup();

ComfyUI/tests-ui/tests/extensions.test.js

@@ -0,0 +1,196 @@
+// @ts-check
+/// <reference path="../node_modules/@types/jest/index.d.ts" />
+const { start } = require("../utils");
+const lg = require("../utils/litegraph");
+
+describe("extensions", () => {
+	beforeEach(() => {
+		lg.setup(global);
+	});
+
+	afterEach(() => {
+		lg.teardown(global);
+	});
+
+	it("calls each extension hook", async () => {
+		const mockExtension = {
+			name: "TestExtension",
+			init: jest.fn(),
+			setup: jest.fn(),
+			addCustomNodeDefs: jest.fn(),
+			getCustomWidgets: jest.fn(),
+			beforeRegisterNodeDef: jest.fn(),
+			registerCustomNodes: jest.fn(),
+			loadedGraphNode: jest.fn(),
+			nodeCreated: jest.fn(),
+			beforeConfigureGraph: jest.fn(),
+			afterConfigureGraph: jest.fn(),
+		};
+
+		const { app, ez, graph } = await start({
+			async preSetup(app) {
+				app.registerExtension(mockExtension);
+			},
+		});
+
+		// Basic initialisation hooks should be called once, with app
+		expect(mockExtension.init).toHaveBeenCalledTimes(1);
+		expect(mockExtension.init).toHaveBeenCalledWith(app);
+
+		// Adding custom node defs should be passed the full list of nodes
+		expect(mockExtension.addCustomNodeDefs).toHaveBeenCalledTimes(1);
+		expect(mockExtension.addCustomNodeDefs.mock.calls[0][1]).toStrictEqual(app);
+		const defs = mockExtension.addCustomNodeDefs.mock.calls[0][0];
+		expect(defs).toHaveProperty("KSampler");
+		expect(defs).toHaveProperty("LoadImage");
+
+		// Get custom widgets is called once and should return new widget types
+		expect(mockExtension.getCustomWidgets).toHaveBeenCalledTimes(1);
+		expect(mockExtension.getCustomWidgets).toHaveBeenCalledWith(app);
+
+		// Before register node def will be called once per node type
+		const nodeNames = Object.keys(defs);
+		const nodeCount = nodeNames.length;
+		expect(mockExtension.beforeRegisterNodeDef).toHaveBeenCalledTimes(nodeCount);
+		for (let i = 0; i < 10; i++) {
+			// It should be send the JS class and the original JSON definition
+			const nodeClass = mockExtension.beforeRegisterNodeDef.mock.calls[i][0];
+			const nodeDef = mockExtension.beforeRegisterNodeDef.mock.calls[i][1];
+
+			expect(nodeClass.name).toBe("ComfyNode");
+			expect(nodeClass.comfyClass).toBe(nodeNames[i]);
+			expect(nodeDef.name).toBe(nodeNames[i]);
+			expect(nodeDef).toHaveProperty("input");
+			expect(nodeDef).toHaveProperty("output");
+		}
+
+		// Register custom nodes is called once after registerNode defs to allow adding other frontend nodes
+		expect(mockExtension.registerCustomNodes).toHaveBeenCalledTimes(1);
+
+		// Before configure graph will be called here as the default graph is being loaded
+		expect(mockExtension.beforeConfigureGraph).toHaveBeenCalledTimes(1);
+		// it gets sent the graph data that is going to be loaded
+		const graphData = mockExtension.beforeConfigureGraph.mock.calls[0][0];
+
+		// A node created is fired for each node constructor that is called
+		expect(mockExtension.nodeCreated).toHaveBeenCalledTimes(graphData.nodes.length);
+		for (let i = 0; i < graphData.nodes.length; i++) {
+			expect(mockExtension.nodeCreated.mock.calls[i][0].type).toBe(graphData.nodes[i].type);
+		}
+
+		// Each node then calls loadedGraphNode to allow them to be updated
+		expect(mockExtension.loadedGraphNode).toHaveBeenCalledTimes(graphData.nodes.length);
+		for (let i = 0; i < graphData.nodes.length; i++) {
+			expect(mockExtension.loadedGraphNode.mock.calls[i][0].type).toBe(graphData.nodes[i].type);
+		}
+
+		// After configure is then called once all the setup is done
+		expect(mockExtension.afterConfigureGraph).toHaveBeenCalledTimes(1);
+
+		expect(mockExtension.setup).toHaveBeenCalledTimes(1);
+		expect(mockExtension.setup).toHaveBeenCalledWith(app);
+
+		// Ensure hooks are called in the correct order
+		const callOrder = [
+			"init",
+			"addCustomNodeDefs",
+			"getCustomWidgets",
+			"beforeRegisterNodeDef",
+			"registerCustomNodes",
+			"beforeConfigureGraph",
+			"nodeCreated",
+			"loadedGraphNode",
+			"afterConfigureGraph",
+			"setup",
+		];
+		for (let i = 1; i < callOrder.length; i++) {
+			const fn1 = mockExtension[callOrder[i - 1]];
+			const fn2 = mockExtension[callOrder[i]];
+			expect(fn1.mock.invocationCallOrder[0]).toBeLessThan(fn2.mock.invocationCallOrder[0]);
+		}
+
+		graph.clear();
+
+		// Ensure adding a new node calls the correct callback
+		ez.LoadImage();
+		expect(mockExtension.loadedGraphNode).toHaveBeenCalledTimes(graphData.nodes.length);
+		expect(mockExtension.nodeCreated).toHaveBeenCalledTimes(graphData.nodes.length + 1);
+		expect(mockExtension.nodeCreated.mock.lastCall[0].type).toBe("LoadImage");
+
+		// Reload the graph to ensure correct hooks are fired
+		await graph.reload();
+
+		// These hooks should not be fired again
+		expect(mockExtension.init).toHaveBeenCalledTimes(1);
+		expect(mockExtension.addCustomNodeDefs).toHaveBeenCalledTimes(1);
+		expect(mockExtension.getCustomWidgets).toHaveBeenCalledTimes(1);
+		expect(mockExtension.registerCustomNodes).toHaveBeenCalledTimes(1);
+		expect(mockExtension.beforeRegisterNodeDef).toHaveBeenCalledTimes(nodeCount);
+		expect(mockExtension.setup).toHaveBeenCalledTimes(1);
+
+		// These should be called again
+		expect(mockExtension.beforeConfigureGraph).toHaveBeenCalledTimes(2);
+		expect(mockExtension.nodeCreated).toHaveBeenCalledTimes(graphData.nodes.length + 2);
+		expect(mockExtension.loadedGraphNode).toHaveBeenCalledTimes(graphData.nodes.length + 1);
+		expect(mockExtension.afterConfigureGraph).toHaveBeenCalledTimes(2);
+	}, 15000);
+
+	it("allows custom nodeDefs and widgets to be registered", async () => {
+		const widgetMock = jest.fn((node, inputName, inputData, app) => {
+			expect(node.constructor.comfyClass).toBe("TestNode");
+			expect(inputName).toBe("test_input");
+			expect(inputData[0]).toBe("CUSTOMWIDGET");
+			expect(inputData[1]?.hello).toBe("world");
+			expect(app).toStrictEqual(app);
+
+			return {
+				widget: node.addWidget("button", inputName, "hello", () => {}),
+			};
+		});
+
+		// Register our extension that adds a custom node + widget type
+		const mockExtension = {
+			name: "TestExtension",
+			addCustomNodeDefs: (nodeDefs) => {
+				nodeDefs["TestNode"] = {
+					output: [],
+					output_name: [],
+					output_is_list: [],
+					name: "TestNode",
+					display_name: "TestNode",
+					category: "Test",
+					input: {
+						required: {
+							test_input: ["CUSTOMWIDGET", { hello: "world" }],
+						},
+					},
+				};
+			},
+			getCustomWidgets: jest.fn(() => {
+				return {
+					CUSTOMWIDGET: widgetMock,
+				};
+			}),
+		};
+
+		const { graph, ez } = await start({
+			async preSetup(app) {
+				app.registerExtension(mockExtension);
+			},
+		});
+
+		expect(mockExtension.getCustomWidgets).toBeCalledTimes(1);
+
+		graph.clear();
+		expect(widgetMock).toBeCalledTimes(0);
+		const node = ez.TestNode();
+		expect(widgetMock).toBeCalledTimes(1);
+
+		// Ensure our custom widget is created
+		expect(node.inputs.length).toBe(0);
+		expect(node.widgets.length).toBe(1);
+		const w = node.widgets[0].widget;
+		expect(w.name).toBe("test_input");
+		expect(w.type).toBe("button");
+	});
+});

ComfyUI/tests-ui/tests/groupNode.test.js

@@ -0,0 +1,1005 @@
+// @ts-check
+/// <reference path="../node_modules/@types/jest/index.d.ts" />
+
+const { start, createDefaultWorkflow, getNodeDef, checkBeforeAndAfterReload } = require("../utils");
+const lg = require("../utils/litegraph");
+
+describe("group node", () => {
+	beforeEach(() => {
+		lg.setup(global);
+	});
+
+	afterEach(() => {
+		lg.teardown(global);
+	});
+
+	/**
+	 *
+	 * @param {*} app
+	 * @param {*} graph
+	 * @param {*} name
+	 * @param {*} nodes
+	 * @returns { Promise<InstanceType<import("../utils/ezgraph")["EzNode"]>> }
+	 */
+	async function convertToGroup(app, graph, name, nodes) {
+		// Select the nodes we are converting
+		for (const n of nodes) {
+			n.select(true);
+		}
+
+		expect(Object.keys(app.canvas.selected_nodes).sort((a, b) => +a - +b)).toEqual(
+			nodes.map((n) => n.id + "").sort((a, b) => +a - +b)
+		);
+
+		global.prompt = jest.fn().mockImplementation(() => name);
+		const groupNode = await nodes[0].menu["Convert to Group Node"].call(false);
+
+		// Check group name was requested
+		expect(window.prompt).toHaveBeenCalled();
+
+		// Ensure old nodes are removed
+		for (const n of nodes) {
+			expect(n.isRemoved).toBeTruthy();
+		}
+
+		expect(groupNode.type).toEqual("workflow/" + name);
+
+		return graph.find(groupNode);
+	}
+
+	/**
+	 * @param { Record<string, string | number> | number[] } idMap
+	 * @param { Record<string, Record<string, unknown>> } valueMap
+	 */
+	function getOutput(idMap = {}, valueMap = {}) {
+		if (idMap instanceof Array) {
+			idMap = idMap.reduce((p, n) => {
+				p[n] = n + "";
+				return p;
+			}, {});
+		}
+		const expected = {
+			1: { inputs: { ckpt_name: "model1.safetensors", ...valueMap?.[1] }, class_type: "CheckpointLoaderSimple" },
+			2: { inputs: { text: "positive", clip: ["1", 1], ...valueMap?.[2] }, class_type: "CLIPTextEncode" },
+			3: { inputs: { text: "negative", clip: ["1", 1], ...valueMap?.[3] }, class_type: "CLIPTextEncode" },
+			4: { inputs: { width: 512, height: 512, batch_size: 1, ...valueMap?.[4] }, class_type: "EmptyLatentImage" },
+			5: {
+				inputs: {
+					seed: 0,
+					steps: 20,
+					cfg: 8,
+					sampler_name: "euler",
+					scheduler: "normal",
+					denoise: 1,
+					model: ["1", 0],
+					positive: ["2", 0],
+					negative: ["3", 0],
+					latent_image: ["4", 0],
+					...valueMap?.[5],
+				},
+				class_type: "KSampler",
+			},
+			6: { inputs: { samples: ["5", 0], vae: ["1", 2], ...valueMap?.[6] }, class_type: "VAEDecode" },
+			7: { inputs: { filename_prefix: "ComfyUI", images: ["6", 0], ...valueMap?.[7] }, class_type: "SaveImage" },
+		};
+
+		// Map old IDs to new at the top level
+		const mapped = {};
+		for (const oldId in idMap) {
+			mapped[idMap[oldId]] = expected[oldId];
+			delete expected[oldId];
+		}
+		Object.assign(mapped, expected);
+
+		// Map old IDs to new inside links
+		for (const k in mapped) {
+			for (const input in mapped[k].inputs) {
+				const v = mapped[k].inputs[input];
+				if (v instanceof Array) {
+					if (v[0] in idMap) {
+						v[0] = idMap[v[0]] + "";
+					}
+				}
+			}
+		}
+
+		return mapped;
+	}
+
+	test("can be created from selected nodes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg, nodes.empty]);
+
+		// Ensure links are now to the group node
+		expect(group.inputs).toHaveLength(2);
+		expect(group.outputs).toHaveLength(3);
+
+		expect(group.inputs.map((i) => i.input.name)).toEqual(["clip", "CLIPTextEncode clip"]);
+		expect(group.outputs.map((i) => i.output.name)).toEqual(["LATENT", "CONDITIONING", "CLIPTextEncode CONDITIONING"]);
+
+		// ckpt clip to both clip inputs on the group
+		expect(nodes.ckpt.outputs.CLIP.connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[group.id, 0],
+			[group.id, 1],
+		]);
+
+		// group conditioning to sampler
+		expect(group.outputs["CONDITIONING"].connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[nodes.sampler.id, 1],
+		]);
+		// group conditioning 2 to sampler
+		expect(
+			group.outputs["CLIPTextEncode CONDITIONING"].connections.map((t) => [t.targetNode.id, t.targetInput.index])
+		).toEqual([[nodes.sampler.id, 2]]);
+		// group latent to sampler
+		expect(group.outputs["LATENT"].connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[nodes.sampler.id, 3],
+		]);
+	});
+
+	test("maintains all output links on conversion", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const save2 = ez.SaveImage(...nodes.decode.outputs);
+		const save3 = ez.SaveImage(...nodes.decode.outputs);
+		// Ensure an output with multiple links maintains them on convert to group
+		const group = await convertToGroup(app, graph, "test", [nodes.sampler, nodes.decode]);
+		expect(group.outputs[0].connections.length).toBe(3);
+		expect(group.outputs[0].connections[0].targetNode.id).toBe(nodes.save.id);
+		expect(group.outputs[0].connections[1].targetNode.id).toBe(save2.id);
+		expect(group.outputs[0].connections[2].targetNode.id).toBe(save3.id);
+
+		// and they're still linked when converting back to nodes
+		const newNodes = group.menu["Convert to nodes"].call();
+		const decode = graph.find(newNodes.find((n) => n.type === "VAEDecode"));
+		expect(decode.outputs[0].connections.length).toBe(3);
+		expect(decode.outputs[0].connections[0].targetNode.id).toBe(nodes.save.id);
+		expect(decode.outputs[0].connections[1].targetNode.id).toBe(save2.id);
+		expect(decode.outputs[0].connections[2].targetNode.id).toBe(save3.id);
+	});
+	test("can be be converted back to nodes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const toConvert = [nodes.pos, nodes.neg, nodes.empty, nodes.sampler];
+		const group = await convertToGroup(app, graph, "test", toConvert);
+
+		// Edit some values to ensure they are set back onto the converted nodes
+		expect(group.widgets["text"].value).toBe("positive");
+		group.widgets["text"].value = "pos";
+		expect(group.widgets["CLIPTextEncode text"].value).toBe("negative");
+		group.widgets["CLIPTextEncode text"].value = "neg";
+		expect(group.widgets["width"].value).toBe(512);
+		group.widgets["width"].value = 1024;
+		expect(group.widgets["sampler_name"].value).toBe("euler");
+		group.widgets["sampler_name"].value = "ddim";
+		expect(group.widgets["control_after_generate"].value).toBe("randomize");
+		group.widgets["control_after_generate"].value = "fixed";
+
+		/** @type { Array<any> } */
+		group.menu["Convert to nodes"].call();
+
+		// ensure widget values are set
+		const pos = graph.find(nodes.pos.id);
+		expect(pos.node.type).toBe("CLIPTextEncode");
+		expect(pos.widgets["text"].value).toBe("pos");
+		const neg = graph.find(nodes.neg.id);
+		expect(neg.node.type).toBe("CLIPTextEncode");
+		expect(neg.widgets["text"].value).toBe("neg");
+		const empty = graph.find(nodes.empty.id);
+		expect(empty.node.type).toBe("EmptyLatentImage");
+		expect(empty.widgets["width"].value).toBe(1024);
+		const sampler = graph.find(nodes.sampler.id);
+		expect(sampler.node.type).toBe("KSampler");
+		expect(sampler.widgets["sampler_name"].value).toBe("ddim");
+		expect(sampler.widgets["control_after_generate"].value).toBe("fixed");
+
+		// validate links
+		expect(nodes.ckpt.outputs.CLIP.connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[pos.id, 0],
+			[neg.id, 0],
+		]);
+
+		expect(pos.outputs["CONDITIONING"].connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[nodes.sampler.id, 1],
+		]);
+
+		expect(neg.outputs["CONDITIONING"].connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[nodes.sampler.id, 2],
+		]);
+
+		expect(empty.outputs["LATENT"].connections.map((t) => [t.targetNode.id, t.targetInput.index])).toEqual([
+			[nodes.sampler.id, 3],
+		]);
+	});
+	test("it can embed reroutes as inputs", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		// Add and connect a reroute to the clip text encodes
+		const reroute = ez.Reroute();
+		nodes.ckpt.outputs.CLIP.connectTo(reroute.inputs[0]);
+		reroute.outputs[0].connectTo(nodes.pos.inputs[0]);
+		reroute.outputs[0].connectTo(nodes.neg.inputs[0]);
+
+		// Convert to group and ensure we only have 1 input of the correct type
+		const group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg, nodes.empty, reroute]);
+		expect(group.inputs).toHaveLength(1);
+		expect(group.inputs[0].input.type).toEqual("CLIP");
+
+		expect((await graph.toPrompt()).output).toEqual(getOutput());
+	});
+	test("it can embed reroutes as outputs", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		// Add a reroute with no output so we output IMAGE even though its used internally
+		const reroute = ez.Reroute();
+		nodes.decode.outputs.IMAGE.connectTo(reroute.inputs[0]);
+
+		// Convert to group and ensure there is an IMAGE output
+		const group = await convertToGroup(app, graph, "test", [nodes.decode, nodes.save, reroute]);
+		expect(group.outputs).toHaveLength(1);
+		expect(group.outputs[0].output.type).toEqual("IMAGE");
+		expect((await graph.toPrompt()).output).toEqual(getOutput([nodes.decode.id, nodes.save.id]));
+	});
+	test("it can embed reroutes as pipes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		// Use reroutes as a pipe
+		const rerouteModel = ez.Reroute();
+		const rerouteClip = ez.Reroute();
+		const rerouteVae = ez.Reroute();
+		nodes.ckpt.outputs.MODEL.connectTo(rerouteModel.inputs[0]);
+		nodes.ckpt.outputs.CLIP.connectTo(rerouteClip.inputs[0]);
+		nodes.ckpt.outputs.VAE.connectTo(rerouteVae.inputs[0]);
+
+		const group = await convertToGroup(app, graph, "test", [rerouteModel, rerouteClip, rerouteVae]);
+
+		expect(group.outputs).toHaveLength(3);
+		expect(group.outputs.map((o) => o.output.type)).toEqual(["MODEL", "CLIP", "VAE"]);
+
+		expect(group.outputs).toHaveLength(3);
+		expect(group.outputs.map((o) => o.output.type)).toEqual(["MODEL", "CLIP", "VAE"]);
+
+		group.outputs[0].connectTo(nodes.sampler.inputs.model);
+		group.outputs[1].connectTo(nodes.pos.inputs.clip);
+		group.outputs[1].connectTo(nodes.neg.inputs.clip);
+	});
+	test("can handle reroutes used internally", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		let reroutes = [];
+		let prevNode = nodes.ckpt;
+		for (let i = 0; i < 5; i++) {
+			const reroute = ez.Reroute();
+			prevNode.outputs[0].connectTo(reroute.inputs[0]);
+			prevNode = reroute;
+			reroutes.push(reroute);
+		}
+		prevNode.outputs[0].connectTo(nodes.sampler.inputs.model);
+
+		const group = await convertToGroup(app, graph, "test", [...reroutes, ...Object.values(nodes)]);
+		expect((await graph.toPrompt()).output).toEqual(getOutput());
+
+		group.menu["Convert to nodes"].call();
+		expect((await graph.toPrompt()).output).toEqual(getOutput());
+	});
+	test("creates with widget values from inner nodes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		nodes.ckpt.widgets.ckpt_name.value = "model2.ckpt";
+		nodes.pos.widgets.text.value = "hello";
+		nodes.neg.widgets.text.value = "world";
+		nodes.empty.widgets.width.value = 256;
+		nodes.empty.widgets.height.value = 1024;
+		nodes.sampler.widgets.seed.value = 1;
+		nodes.sampler.widgets.control_after_generate.value = "increment";
+		nodes.sampler.widgets.steps.value = 8;
+		nodes.sampler.widgets.cfg.value = 4.5;
+		nodes.sampler.widgets.sampler_name.value = "uni_pc";
+		nodes.sampler.widgets.scheduler.value = "karras";
+		nodes.sampler.widgets.denoise.value = 0.9;
+
+		const group = await convertToGroup(app, graph, "test", [
+			nodes.ckpt,
+			nodes.pos,
+			nodes.neg,
+			nodes.empty,
+			nodes.sampler,
+		]);
+
+		expect(group.widgets["ckpt_name"].value).toEqual("model2.ckpt");
+		expect(group.widgets["text"].value).toEqual("hello");
+		expect(group.widgets["CLIPTextEncode text"].value).toEqual("world");
+		expect(group.widgets["width"].value).toEqual(256);
+		expect(group.widgets["height"].value).toEqual(1024);
+		expect(group.widgets["seed"].value).toEqual(1);
+		expect(group.widgets["control_after_generate"].value).toEqual("increment");
+		expect(group.widgets["steps"].value).toEqual(8);
+		expect(group.widgets["cfg"].value).toEqual(4.5);
+		expect(group.widgets["sampler_name"].value).toEqual("uni_pc");
+		expect(group.widgets["scheduler"].value).toEqual("karras");
+		expect(group.widgets["denoise"].value).toEqual(0.9);
+
+		expect((await graph.toPrompt()).output).toEqual(
+			getOutput([nodes.ckpt.id, nodes.pos.id, nodes.neg.id, nodes.empty.id, nodes.sampler.id], {
+				[nodes.ckpt.id]: { ckpt_name: "model2.ckpt" },
+				[nodes.pos.id]: { text: "hello" },
+				[nodes.neg.id]: { text: "world" },
+				[nodes.empty.id]: { width: 256, height: 1024 },
+				[nodes.sampler.id]: {
+					seed: 1,
+					steps: 8,
+					cfg: 4.5,
+					sampler_name: "uni_pc",
+					scheduler: "karras",
+					denoise: 0.9,
+				},
+			})
+		);
+	});
+	test("group inputs can be reroutes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg]);
+
+		const reroute = ez.Reroute();
+		nodes.ckpt.outputs.CLIP.connectTo(reroute.inputs[0]);
+
+		reroute.outputs[0].connectTo(group.inputs[0]);
+		reroute.outputs[0].connectTo(group.inputs[1]);
+
+		expect((await graph.toPrompt()).output).toEqual(getOutput([nodes.pos.id, nodes.neg.id]));
+	});
+	test("group outputs can be reroutes", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg]);
+
+		const reroute1 = ez.Reroute();
+		const reroute2 = ez.Reroute();
+		group.outputs[0].connectTo(reroute1.inputs[0]);
+		group.outputs[1].connectTo(reroute2.inputs[0]);
+
+		reroute1.outputs[0].connectTo(nodes.sampler.inputs.positive);
+		reroute2.outputs[0].connectTo(nodes.sampler.inputs.negative);
+
+		expect((await graph.toPrompt()).output).toEqual(getOutput([nodes.pos.id, nodes.neg.id]));
+	});
+	test("groups can connect to each other", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const group1 = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg]);
+		const group2 = await convertToGroup(app, graph, "test2", [nodes.empty, nodes.sampler]);
+
+		group1.outputs[0].connectTo(group2.inputs["positive"]);
+		group1.outputs[1].connectTo(group2.inputs["negative"]);
+
+		expect((await graph.toPrompt()).output).toEqual(
+			getOutput([nodes.pos.id, nodes.neg.id, nodes.empty.id, nodes.sampler.id])
+		);
+	});
+	test("groups can connect to each other via internal reroutes", async () => {
+		const { ez, graph, app } = await start();
+
+		const latent = ez.EmptyLatentImage();
+		const vae = ez.VAELoader();
+		const latentReroute = ez.Reroute();
+		const vaeReroute = ez.Reroute();
+
+		latent.outputs[0].connectTo(latentReroute.inputs[0]);
+		vae.outputs[0].connectTo(vaeReroute.inputs[0]);
+
+		const group1 = await convertToGroup(app, graph, "test", [latentReroute, vaeReroute]);
+		group1.menu.Clone.call();
+		expect(app.graph._nodes).toHaveLength(4);
+		const group2 = graph.find(app.graph._nodes[3]);
+		expect(group2.node.type).toEqual("workflow/test");
+		expect(group2.id).not.toEqual(group1.id);
+
+		group1.outputs.VAE.connectTo(group2.inputs.VAE);
+		group1.outputs.LATENT.connectTo(group2.inputs.LATENT);
+
+		const decode = ez.VAEDecode(group2.outputs.LATENT, group2.outputs.VAE);
+		const preview = ez.PreviewImage(decode.outputs[0]);
+
+		const output = {
+			[latent.id]: { inputs: { width: 512, height: 512, batch_size: 1 }, class_type: "EmptyLatentImage" },
+			[vae.id]: { inputs: { vae_name: "vae1.safetensors" }, class_type: "VAELoader" },
+			[decode.id]: { inputs: { samples: [latent.id + "", 0], vae: [vae.id + "", 0] }, class_type: "VAEDecode" },
+			[preview.id]: { inputs: { images: [decode.id + "", 0] }, class_type: "PreviewImage" },
+		};
+		expect((await graph.toPrompt()).output).toEqual(output);
+
+		// Ensure missing connections dont cause errors
+		group2.inputs.VAE.disconnect();
+		delete output[decode.id].inputs.vae;
+		expect((await graph.toPrompt()).output).toEqual(output);
+	});
+	test("displays generated image on group node", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		let group = await convertToGroup(app, graph, "test", [
+			nodes.pos,
+			nodes.neg,
+			nodes.empty,
+			nodes.sampler,
+			nodes.decode,
+			nodes.save,
+		]);
+
+		const { api } = require("../../web/scripts/api");
+
+		api.dispatchEvent(new CustomEvent("execution_start", {}));
+		api.dispatchEvent(new CustomEvent("executing", { detail: `${nodes.save.id}` }));
+		// Event should be forwarded to group node id
+		expect(+app.runningNodeId).toEqual(group.id);
+		expect(group.node["imgs"]).toBeFalsy();
+		api.dispatchEvent(
+			new CustomEvent("executed", {
+				detail: {
+					node: `${nodes.save.id}`,
+					output: {
+						images: [
+							{
+								filename: "test.png",
+								type: "output",
+							},
+						],
+					},
+				},
+			})
+		);
+
+		// Trigger paint
+		group.node.onDrawBackground?.(app.canvas.ctx, app.canvas.canvas);
+
+		expect(group.node["images"]).toEqual([
+			{
+				filename: "test.png",
+				type: "output",
+			},
+		]);
+
+		// Reload
+		const workflow = JSON.stringify((await graph.toPrompt()).workflow);
+		await app.loadGraphData(JSON.parse(workflow));
+		group = graph.find(group);
+
+		// Trigger inner nodes to get created
+		group.node["getInnerNodes"]();
+
+		// Check it works for internal node ids
+		api.dispatchEvent(new CustomEvent("execution_start", {}));
+		api.dispatchEvent(new CustomEvent("executing", { detail: `${group.id}:5` }));
+		// Event should be forwarded to group node id
+		expect(+app.runningNodeId).toEqual(group.id);
+		expect(group.node["imgs"]).toBeFalsy();
+		api.dispatchEvent(
+			new CustomEvent("executed", {
+				detail: {
+					node: `${group.id}:5`,
+					output: {
+						images: [
+							{
+								filename: "test2.png",
+								type: "output",
+							},
+						],
+					},
+				},
+			})
+		);
+
+		// Trigger paint
+		group.node.onDrawBackground?.(app.canvas.ctx, app.canvas.canvas);
+
+		expect(group.node["images"]).toEqual([
+			{
+				filename: "test2.png",
+				type: "output",
+			},
+		]);
+	});
+	test("allows widgets to be converted to inputs", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		const group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg]);
+		group.widgets[0].convertToInput();
+
+		const primitive = ez.PrimitiveNode();
+		primitive.outputs[0].connectTo(group.inputs["text"]);
+		primitive.widgets[0].value = "hello";
+
+		expect((await graph.toPrompt()).output).toEqual(
+			getOutput([nodes.pos.id, nodes.neg.id], {
+				[nodes.pos.id]: { text: "hello" },
+			})
+		);
+	});
+	test("can be copied", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+
+		const group1 = await convertToGroup(app, graph, "test", [
+			nodes.pos,
+			nodes.neg,
+			nodes.empty,
+			nodes.sampler,
+			nodes.decode,
+			nodes.save,
+		]);
+
+		group1.widgets["text"].value = "hello";
+		group1.widgets["width"].value = 256;
+		group1.widgets["seed"].value = 1;
+
+		// Clone the node
+		group1.menu.Clone.call();
+		expect(app.graph._nodes).toHaveLength(3);
+		const group2 = graph.find(app.graph._nodes[2]);
+		expect(group2.node.type).toEqual("workflow/test");
+		expect(group2.id).not.toEqual(group1.id);
+
+		// Reconnect ckpt
+		nodes.ckpt.outputs.MODEL.connectTo(group2.inputs["model"]);
+		nodes.ckpt.outputs.CLIP.connectTo(group2.inputs["clip"]);
+		nodes.ckpt.outputs.CLIP.connectTo(group2.inputs["CLIPTextEncode clip"]);
+		nodes.ckpt.outputs.VAE.connectTo(group2.inputs["vae"]);
+
+		group2.widgets["text"].value = "world";
+		group2.widgets["width"].value = 1024;
+		group2.widgets["seed"].value = 100;
+
+		let i = 0;
+		expect((await graph.toPrompt()).output).toEqual({
+			...getOutput([nodes.empty.id, nodes.pos.id, nodes.neg.id, nodes.sampler.id, nodes.decode.id, nodes.save.id], {
+				[nodes.empty.id]: { width: 256 },
+				[nodes.pos.id]: { text: "hello" },
+				[nodes.sampler.id]: { seed: 1 },
+			}),
+			...getOutput(
+				{
+					[nodes.empty.id]: `${group2.id}:${i++}`,
+					[nodes.pos.id]: `${group2.id}:${i++}`,
+					[nodes.neg.id]: `${group2.id}:${i++}`,
+					[nodes.sampler.id]: `${group2.id}:${i++}`,
+					[nodes.decode.id]: `${group2.id}:${i++}`,
+					[nodes.save.id]: `${group2.id}:${i++}`,
+				},
+				{
+					[nodes.empty.id]: { width: 1024 },
+					[nodes.pos.id]: { text: "world" },
+					[nodes.sampler.id]: { seed: 100 },
+				}
+			),
+		});
+
+		graph.arrange();
+	});
+	test("is embedded in workflow", async () => {
+		let { ez, graph, app } = await start();
+		const nodes = createDefaultWorkflow(ez, graph);
+		let group = await convertToGroup(app, graph, "test", [nodes.pos, nodes.neg]);
+		const workflow = JSON.stringify((await graph.toPrompt()).workflow);
+
+		// Clear the environment
+		({ ez, graph, app } = await start({
+			resetEnv: true,
+		}));
+		// Ensure the node isnt registered
+		expect(() => ez["workflow/test"]).toThrow();
+
+		// Reload the workflow
+		await app.loadGraphData(JSON.parse(workflow));
+
+		// Ensure the node is found
+		group = graph.find(group);
+
+		// Generate prompt and ensure it is as expected
+		expect((await graph.toPrompt()).output).toEqual(
+			getOutput({
+				[nodes.pos.id]: `${group.id}:0`,
+				[nodes.neg.id]: `${group.id}:1`,
+			})
+		);
+	});
+	test("shows missing node error on missing internal node when loading graph data", async () => {
+		const { graph } = await start();
+
+		const dialogShow = jest.spyOn(graph.app.ui.dialog, "show");
+		await graph.app.loadGraphData({
+			last_node_id: 3,
+			last_link_id: 1,
+			nodes: [
+				{
+					id: 3,
+					type: "workflow/testerror",
+				},
+			],
+			links: [],
+			groups: [],
+			config: {},
+			extra: {
+				groupNodes: {
+					testerror: {
+						nodes: [
+							{
+								type: "NotKSampler",
+							},
+							{
+								type: "NotVAEDecode",
+							},
+						],
+					},
+				},
+			},
+		});
+
+		expect(dialogShow).toBeCalledTimes(1);
+		const call = dialogShow.mock.calls[0][0].innerHTML;
+		expect(call).toContain("the following node types were not found");
+		expect(call).toContain("NotKSampler");
+		expect(call).toContain("NotVAEDecode");
+		expect(call).toContain("workflow/testerror");
+	});
+	test("maintains widget inputs on conversion back to nodes", async () => {
+		const { ez, graph, app } = await start();
+		let pos = ez.CLIPTextEncode({ text: "positive" });
+		pos.node.title = "Positive";
+		let neg = ez.CLIPTextEncode({ text: "negative" });
+		neg.node.title = "Negative";
+		pos.widgets.text.convertToInput();
+		neg.widgets.text.convertToInput();
+
+		let primitive = ez.PrimitiveNode();
+		primitive.outputs[0].connectTo(pos.inputs.text);
+		primitive.outputs[0].connectTo(neg.inputs.text);
+
+		const group = await convertToGroup(app, graph, "test", [pos, neg, primitive]);
+		// This will use a primitive widget named 'value'
+		expect(group.widgets.length).toBe(1);
+		expect(group.widgets["value"].value).toBe("positive");
+
+		const newNodes = group.menu["Convert to nodes"].call();
+		pos = graph.find(newNodes.find((n) => n.title === "Positive"));
+		neg = graph.find(newNodes.find((n) => n.title === "Negative"));
+		primitive = graph.find(newNodes.find((n) => n.type === "PrimitiveNode"));
+
+		expect(pos.inputs).toHaveLength(2);
+		expect(neg.inputs).toHaveLength(2);
+		expect(primitive.outputs[0].connections).toHaveLength(2);
+
+		expect((await graph.toPrompt()).output).toEqual({
+			1: { inputs: { text: "positive" }, class_type: "CLIPTextEncode" },
+			2: { inputs: { text: "positive" }, class_type: "CLIPTextEncode" },
+		});
+	});
+	test("correctly handles widget inputs", async () => {
+		const { ez, graph, app } = await start();
+		const upscaleMethods = (await getNodeDef("ImageScaleBy")).input.required["upscale_method"][0];
+
+		const image = ez.LoadImage();
+		const scale1 = ez.ImageScaleBy(image.outputs[0]);
+		const scale2 = ez.ImageScaleBy(image.outputs[0]);
+		const preview1 = ez.PreviewImage(scale1.outputs[0]);
+		const preview2 = ez.PreviewImage(scale2.outputs[0]);
+		scale1.widgets.upscale_method.value = upscaleMethods[1];
+		scale1.widgets.upscale_method.convertToInput();
+
+		const group = await convertToGroup(app, graph, "test", [scale1, scale2]);
+		expect(group.inputs.length).toBe(3);
+		expect(group.inputs[0].input.type).toBe("IMAGE");
+		expect(group.inputs[1].input.type).toBe("IMAGE");
+		expect(group.inputs[2].input.type).toBe("COMBO");
+
+		// Ensure links are maintained
+		expect(group.inputs[0].connection?.originNode?.id).toBe(image.id);
+		expect(group.inputs[1].connection?.originNode?.id).toBe(image.id);
+		expect(group.inputs[2].connection).toBeFalsy();
+
+		// Ensure primitive gets correct type
+		const primitive = ez.PrimitiveNode();
+		primitive.outputs[0].connectTo(group.inputs[2]);
+		expect(primitive.widgets.value.widget.options.values).toBe(upscaleMethods);
+		expect(primitive.widgets.value.value).toBe(upscaleMethods[1]); // Ensure value is copied
+		primitive.widgets.value.value = upscaleMethods[1];
+		
+		await checkBeforeAndAfterReload(graph, async (r) => {
+			const scale1id = r ? `${group.id}:0` : scale1.id;
+			const scale2id = r ? `${group.id}:1` : scale2.id;
+			// Ensure widget value is applied to prompt
+			expect((await graph.toPrompt()).output).toStrictEqual({
+				[image.id]: { inputs: { image: "example.png", upload: "image" }, class_type: "LoadImage" },
+				[scale1id]: {
+					inputs: { upscale_method: upscaleMethods[1], scale_by: 1, image: [`${image.id}`, 0] },
+					class_type: "ImageScaleBy",
+				},
+				[scale2id]: {
+					inputs: { upscale_method: "nearest-exact", scale_by: 1, image: [`${image.id}`, 0] },
+					class_type: "ImageScaleBy",
+				},
+				[preview1.id]: { inputs: { images: [`${scale1id}`, 0] }, class_type: "PreviewImage" },
+				[preview2.id]: { inputs: { images: [`${scale2id}`, 0] }, class_type: "PreviewImage" },
+			});
+		});
+	});
+	test("adds widgets in node execution order", async () => {
+		const { ez, graph, app } = await start();
+		const scale = ez.LatentUpscale();
+		const save = ez.SaveImage();
+		const empty = ez.EmptyLatentImage();
+		const decode = ez.VAEDecode();
+
+		scale.outputs.LATENT.connectTo(decode.inputs.samples);
+		decode.outputs.IMAGE.connectTo(save.inputs.images);
+		empty.outputs.LATENT.connectTo(scale.inputs.samples);
+
+		const group = await convertToGroup(app, graph, "test", [scale, save, empty, decode]);
+		const widgets = group.widgets.map((w) => w.widget.name);
+		expect(widgets).toStrictEqual([
+			"width",
+			"height",
+			"batch_size",
+			"upscale_method",
+			"LatentUpscale width",
+			"LatentUpscale height",
+			"crop",
+			"filename_prefix",
+		]);
+	});
+	test("adds output for external links when converting to group", async () => {
+		const { ez, graph, app } = await start();
+		const img = ez.EmptyLatentImage();
+		let decode = ez.VAEDecode(...img.outputs);
+		const preview1 = ez.PreviewImage(...decode.outputs);
+		const preview2 = ez.PreviewImage(...decode.outputs);
+
+		const group = await convertToGroup(app, graph, "test", [img, decode, preview1]);
+
+		// Ensure we have an output connected to the 2nd preview node
+		expect(group.outputs.length).toBe(1);
+		expect(group.outputs[0].connections.length).toBe(1);
+		expect(group.outputs[0].connections[0].targetNode.id).toBe(preview2.id);
+
+		// Convert back and ensure bothe previews are still connected
+		group.menu["Convert to nodes"].call();
+		decode = graph.find(decode);
+		expect(decode.outputs[0].connections.length).toBe(2);
+		expect(decode.outputs[0].connections[0].targetNode.id).toBe(preview1.id);
+		expect(decode.outputs[0].connections[1].targetNode.id).toBe(preview2.id);
+	});
+	test("adds output for external links when converting to group when nodes are not in execution order", async () => {
+		const { ez, graph, app } = await start();
+		const sampler = ez.KSampler();
+		const ckpt = ez.CheckpointLoaderSimple();
+		const empty = ez.EmptyLatentImage();
+		const pos = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "positive" });
+		const neg = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "negative" });
+		const decode1 = ez.VAEDecode(sampler.outputs.LATENT, ckpt.outputs.VAE);
+		const save = ez.SaveImage(decode1.outputs.IMAGE);
+		ckpt.outputs.MODEL.connectTo(sampler.inputs.model);
+		pos.outputs.CONDITIONING.connectTo(sampler.inputs.positive);
+		neg.outputs.CONDITIONING.connectTo(sampler.inputs.negative);
+		empty.outputs.LATENT.connectTo(sampler.inputs.latent_image);
+
+		const encode = ez.VAEEncode(decode1.outputs.IMAGE);
+		const vae = ez.VAELoader();
+		const decode2 = ez.VAEDecode(encode.outputs.LATENT, vae.outputs.VAE);
+		const preview = ez.PreviewImage(decode2.outputs.IMAGE);
+		vae.outputs.VAE.connectTo(encode.inputs.vae);
+
+		const group = await convertToGroup(app, graph, "test", [vae, decode1, encode, sampler]);
+
+		expect(group.outputs.length).toBe(3);
+		expect(group.outputs[0].output.name).toBe("VAE");
+		expect(group.outputs[0].output.type).toBe("VAE");
+		expect(group.outputs[1].output.name).toBe("IMAGE");
+		expect(group.outputs[1].output.type).toBe("IMAGE");
+		expect(group.outputs[2].output.name).toBe("LATENT");
+		expect(group.outputs[2].output.type).toBe("LATENT");
+
+		expect(group.outputs[0].connections.length).toBe(1);
+		expect(group.outputs[0].connections[0].targetNode.id).toBe(decode2.id);
+		expect(group.outputs[0].connections[0].targetInput.index).toBe(1);
+
+		expect(group.outputs[1].connections.length).toBe(1);
+		expect(group.outputs[1].connections[0].targetNode.id).toBe(save.id);
+		expect(group.outputs[1].connections[0].targetInput.index).toBe(0);
+
+		expect(group.outputs[2].connections.length).toBe(1);
+		expect(group.outputs[2].connections[0].targetNode.id).toBe(decode2.id);
+		expect(group.outputs[2].connections[0].targetInput.index).toBe(0);
+
+		expect((await graph.toPrompt()).output).toEqual({
+			...getOutput({ 1: ckpt.id, 2: pos.id, 3: neg.id, 4: empty.id, 5: sampler.id, 6: decode1.id, 7: save.id }),
+			[vae.id]: { inputs: { vae_name: "vae1.safetensors" }, class_type: vae.node.type },
+			[encode.id]: { inputs: { pixels: ["6", 0], vae: [vae.id + "", 0] }, class_type: encode.node.type },
+			[decode2.id]: { inputs: { samples: [encode.id + "", 0], vae: [vae.id + "", 0] }, class_type: decode2.node.type },
+			[preview.id]: { inputs: { images: [decode2.id + "", 0] }, class_type: preview.node.type },
+		});
+	});
+	test("works with IMAGEUPLOAD widget", async () => {
+		const { ez, graph, app } = await start();
+		const img = ez.LoadImage();
+		const preview1 = ez.PreviewImage(img.outputs[0]);
+
+		const group = await convertToGroup(app, graph, "test", [img, preview1]);
+		const widget = group.widgets["upload"];
+		expect(widget).toBeTruthy();
+		expect(widget.widget.type).toBe("button");
+	});
+	test("internal primitive populates widgets for all linked inputs", async () => {
+		const { ez, graph, app } = await start();
+		const img = ez.LoadImage();
+		const scale1 = ez.ImageScale(img.outputs[0]);
+		const scale2 = ez.ImageScale(img.outputs[0]);
+		ez.PreviewImage(scale1.outputs[0]);
+		ez.PreviewImage(scale2.outputs[0]);
+
+		scale1.widgets.width.convertToInput();
+		scale2.widgets.height.convertToInput();
+
+		const primitive = ez.PrimitiveNode();
+		primitive.outputs[0].connectTo(scale1.inputs.width);
+		primitive.outputs[0].connectTo(scale2.inputs.height);
+
+		const group = await convertToGroup(app, graph, "test", [img, primitive, scale1, scale2]);
+		group.widgets.value.value = 100;
+		expect((await graph.toPrompt()).output).toEqual({
+			1: {
+				inputs: { image: img.widgets.image.value, upload: "image" },
+				class_type: "LoadImage",
+			},
+			2: {
+				inputs: { upscale_method: "nearest-exact", width: 100, height: 512, crop: "disabled", image: ["1", 0] },
+				class_type: "ImageScale",
+			},
+			3: {
+				inputs: { upscale_method: "nearest-exact", width: 512, height: 100, crop: "disabled", image: ["1", 0] },
+				class_type: "ImageScale",
+			},
+			4: { inputs: { images: ["2", 0] }, class_type: "PreviewImage" },
+			5: { inputs: { images: ["3", 0] }, class_type: "PreviewImage" },
+		});
+	});
+	test("primitive control widgets values are copied on convert", async () => {
+		const { ez, graph, app } = await start();
+		const sampler = ez.KSampler();
+		sampler.widgets.seed.convertToInput();
+		sampler.widgets.sampler_name.convertToInput();
+
+		let p1 = ez.PrimitiveNode();
+		let p2 = ez.PrimitiveNode();
+		p1.outputs[0].connectTo(sampler.inputs.seed);
+		p2.outputs[0].connectTo(sampler.inputs.sampler_name);
+
+		p1.widgets.control_after_generate.value = "increment";
+		p2.widgets.control_after_generate.value = "decrement";
+		p2.widgets.control_filter_list.value = "/.*/";
+
+		p2.node.title = "p2";
+
+		const group = await convertToGroup(app, graph, "test", [sampler, p1, p2]);
+		expect(group.widgets.control_after_generate.value).toBe("increment");
+		expect(group.widgets["p2 control_after_generate"].value).toBe("decrement");
+		expect(group.widgets["p2 control_filter_list"].value).toBe("/.*/");
+
+		group.widgets.control_after_generate.value = "fixed";
+		group.widgets["p2 control_after_generate"].value = "randomize";
+		group.widgets["p2 control_filter_list"].value = "/.+/";
+
+		group.menu["Convert to nodes"].call();
+		p1 = graph.find(p1);
+		p2 = graph.find(p2);
+
+		expect(p1.widgets.control_after_generate.value).toBe("fixed");
+		expect(p2.widgets.control_after_generate.value).toBe("randomize");
+		expect(p2.widgets.control_filter_list.value).toBe("/.+/");
+	});
+	test("internal reroutes work with converted inputs and merge options", async () => {
+		const { ez, graph, app } = await start();
+		const vae = ez.VAELoader();
+		const latent = ez.EmptyLatentImage();
+		const decode = ez.VAEDecode(latent.outputs.LATENT, vae.outputs.VAE);
+		const scale = ez.ImageScale(decode.outputs.IMAGE);
+		ez.PreviewImage(scale.outputs.IMAGE);
+
+		const r1 = ez.Reroute();
+		const r2 = ez.Reroute();
+
+		latent.widgets.width.value = 64;
+		latent.widgets.height.value = 128;
+
+		latent.widgets.width.convertToInput();
+		latent.widgets.height.convertToInput();
+		latent.widgets.batch_size.convertToInput();
+
+		scale.widgets.width.convertToInput();
+		scale.widgets.height.convertToInput();
+
+		r1.inputs[0].input.label = "hbw";
+		r1.outputs[0].connectTo(latent.inputs.height);
+		r1.outputs[0].connectTo(latent.inputs.batch_size);
+		r1.outputs[0].connectTo(scale.inputs.width);
+
+		r2.inputs[0].input.label = "wh";
+		r2.outputs[0].connectTo(latent.inputs.width);
+		r2.outputs[0].connectTo(scale.inputs.height);
+
+		const group = await convertToGroup(app, graph, "test", [r1, r2, latent, decode, scale]);
+
+		expect(group.inputs[0].input.type).toBe("VAE");
+		expect(group.inputs[1].input.type).toBe("INT");
+		expect(group.inputs[2].input.type).toBe("INT");
+
+		const p1 = ez.PrimitiveNode();
+		const p2 = ez.PrimitiveNode();
+		p1.outputs[0].connectTo(group.inputs[1]);
+		p2.outputs[0].connectTo(group.inputs[2]);
+
+		expect(p1.widgets.value.widget.options?.min).toBe(16); // width/height min
+		expect(p1.widgets.value.widget.options?.max).toBe(4096); // batch max
+		expect(p1.widgets.value.widget.options?.step).toBe(80); // width/height step * 10
+
+		expect(p2.widgets.value.widget.options?.min).toBe(16); // width/height min
+		expect(p2.widgets.value.widget.options?.max).toBe(16384); // width/height max
+		expect(p2.widgets.value.widget.options?.step).toBe(80); // width/height step * 10
+
+		expect(p1.widgets.value.value).toBe(128);
+		expect(p2.widgets.value.value).toBe(64);
+
+		p1.widgets.value.value = 16;
+		p2.widgets.value.value = 32;
+
+		await checkBeforeAndAfterReload(graph, async (r) => {
+			const id = (v) => (r ? `${group.id}:` : "") + v;
+			expect((await graph.toPrompt()).output).toStrictEqual({
+				1: { inputs: { vae_name: "vae1.safetensors" }, class_type: "VAELoader" },
+				[id(2)]: { inputs: { width: 32, height: 16, batch_size: 16 }, class_type: "EmptyLatentImage" },
+				[id(3)]: { inputs: { samples: [id(2), 0], vae: ["1", 0] }, class_type: "VAEDecode" },
+				[id(4)]: {
+					inputs: { upscale_method: "nearest-exact", width: 16, height: 32, crop: "disabled", image: [id(3), 0] },
+					class_type: "ImageScale",
+				},
+				5: { inputs: { images: [id(4), 0] }, class_type: "PreviewImage" },
+			});
+		});
+	});
+	test("converted inputs with linked widgets map values correctly on creation", async () => {
+		const { ez, graph, app } = await start();
+		const k1 = ez.KSampler();
+		const k2 = ez.KSampler();
+		k1.widgets.seed.convertToInput();
+		k2.widgets.seed.convertToInput();
+
+		const rr = ez.Reroute();
+		rr.outputs[0].connectTo(k1.inputs.seed);
+		rr.outputs[0].connectTo(k2.inputs.seed);
+
+		const group = await convertToGroup(app, graph, "test", [k1, k2, rr]);
+		expect(group.widgets.steps.value).toBe(20);
+		expect(group.widgets.cfg.value).toBe(8);
+		expect(group.widgets.scheduler.value).toBe("normal");
+		expect(group.widgets["KSampler steps"].value).toBe(20);
+		expect(group.widgets["KSampler cfg"].value).toBe(8);
+		expect(group.widgets["KSampler scheduler"].value).toBe("normal");
+	});
+	test("allow multiple of the same node type to be added", async () => {
+		const { ez, graph, app } = await start();
+		const nodes = [...Array(10)].map(() => ez.ImageScaleBy());
+		const group = await convertToGroup(app, graph, "test", nodes);
+		expect(group.inputs.length).toBe(10);
+		expect(group.outputs.length).toBe(10);
+		expect(group.widgets.length).toBe(20);
+		expect(group.widgets.map((w) => w.widget.name)).toStrictEqual(
+			[...Array(10)]
+				.map((_, i) => `${i > 0 ? "ImageScaleBy " : ""}${i > 1 ? i + " " : ""}`)
+				.flatMap((p) => [`${p}upscale_method`, `${p}scale_by`])
+		);
+	});
+});

ComfyUI/tests-ui/tests/users.test.js

@@ -0,0 +1,295 @@
+// @ts-check
+/// <reference path="../node_modules/@types/jest/index.d.ts" />
+const { start } = require("../utils");
+const lg = require("../utils/litegraph");
+
+describe("users", () => {
+	beforeEach(() => {
+		lg.setup(global);
+	});
+
+	afterEach(() => {
+		lg.teardown(global);
+	});
+
+	function expectNoUserScreen() {
+		// Ensure login isnt visible
+		const selection = document.querySelectorAll("#comfy-user-selection")?.[0];
+		expect(selection["style"].display).toBe("none");
+		const menu = document.querySelectorAll(".comfy-menu")?.[0];
+		expect(window.getComputedStyle(menu)?.display).not.toBe("none");
+	}
+
+	describe("multi-user", () => {
+		function mockAddStylesheet() {
+			const utils = require("../../web/scripts/utils");
+			utils.addStylesheet = jest.fn().mockReturnValue(Promise.resolve());
+		}
+
+		async function waitForUserScreenShow() {
+			mockAddStylesheet();
+
+			// Wait for "show" to be called
+			const { UserSelectionScreen } = require("../../web/scripts/ui/userSelection");
+			let resolve, reject;
+			const fn = UserSelectionScreen.prototype.show;
+			const p = new Promise((res, rej) => {
+				resolve = res;
+				reject = rej;
+			});
+			jest.spyOn(UserSelectionScreen.prototype, "show").mockImplementation(async (...args) => {
+				const res = fn(...args);
+				await new Promise(process.nextTick); // wait for promises to resolve
+				resolve();
+				return res;
+			});
+			// @ts-ignore
+			setTimeout(() => reject("timeout waiting for UserSelectionScreen to be shown."), 500);
+			await p;
+			await new Promise(process.nextTick); // wait for promises to resolve
+		}
+
+		async function testUserScreen(onShown, users) {
+			if (!users) {
+				users = {};
+			}
+			const starting = start({
+				resetEnv: true,
+				userConfig: { storage: "server", users },
+			});
+
+			// Ensure no current user
+			expect(localStorage["Comfy.userId"]).toBeFalsy();
+			expect(localStorage["Comfy.userName"]).toBeFalsy();
+
+			await waitForUserScreenShow();
+
+			const selection = document.querySelectorAll("#comfy-user-selection")?.[0];
+			expect(selection).toBeTruthy();
+
+			// Ensure login is visible
+			expect(window.getComputedStyle(selection)?.display).not.toBe("none");
+			// Ensure menu is hidden
+			const menu = document.querySelectorAll(".comfy-menu")?.[0];
+			expect(window.getComputedStyle(menu)?.display).toBe("none");
+
+			const isCreate = await onShown(selection);
+
+			// Submit form
+			selection.querySelectorAll("form")[0].submit();
+			await new Promise(process.nextTick); // wait for promises to resolve
+
+			// Wait for start
+			const s = await starting;
+
+			// Ensure login is removed
+			expect(document.querySelectorAll("#comfy-user-selection")).toHaveLength(0);
+			expect(window.getComputedStyle(menu)?.display).not.toBe("none");
+
+			// Ensure settings + templates are saved
+			const { api } = require("../../web/scripts/api");
+			expect(api.createUser).toHaveBeenCalledTimes(+isCreate);
+			expect(api.storeSettings).toHaveBeenCalledTimes(+isCreate);
+			expect(api.storeUserData).toHaveBeenCalledTimes(+isCreate);
+			if (isCreate) {
+				expect(api.storeUserData).toHaveBeenCalledWith("comfy.templates.json", null, { stringify: false });
+				expect(s.app.isNewUserSession).toBeTruthy();
+			} else {
+				expect(s.app.isNewUserSession).toBeFalsy();
+			}
+
+			return { users, selection, ...s };
+		}
+
+		it("allows user creation if no users", async () => {
+			const { users } = await testUserScreen((selection) => {
+				// Ensure we have no users flag added
+				expect(selection.classList.contains("no-users")).toBeTruthy();
+
+				// Enter a username
+				const input = selection.getElementsByTagName("input")[0];
+				input.focus();
+				input.value = "Test User";
+
+				return true;
+			});
+
+			expect(users).toStrictEqual({
+				"Test User!": "Test User",
+			});
+
+			expect(localStorage["Comfy.userId"]).toBe("Test User!");
+			expect(localStorage["Comfy.userName"]).toBe("Test User");
+		});
+		it("allows user creation if no current user but other users", async () => {
+			const users = {
+				"Test User 2!": "Test User 2",
+			};
+
+			await testUserScreen((selection) => {
+				expect(selection.classList.contains("no-users")).toBeFalsy();
+
+				// Enter a username
+				const input = selection.getElementsByTagName("input")[0];
+				input.focus();
+				input.value = "Test User 3";
+				return true;
+			}, users);
+
+			expect(users).toStrictEqual({
+				"Test User 2!": "Test User 2",
+				"Test User 3!": "Test User 3",
+			});
+
+			expect(localStorage["Comfy.userId"]).toBe("Test User 3!");
+			expect(localStorage["Comfy.userName"]).toBe("Test User 3");
+		});
+		it("allows user selection if no current user but other users", async () => {
+			const users = {
+				"A!": "A",
+				"B!": "B",
+				"C!": "C",
+			};
+
+			await testUserScreen((selection) => {
+				expect(selection.classList.contains("no-users")).toBeFalsy();
+
+				// Check user list
+				const select = selection.getElementsByTagName("select")[0];
+				const options = select.getElementsByTagName("option");
+				expect(
+					[...options]
+						.filter((o) => !o.disabled)
+						.reduce((p, n) => {
+							p[n.getAttribute("value")] = n.textContent;
+							return p;
+						}, {})
+				).toStrictEqual(users);
+
+				// Select an option
+				select.focus();
+				select.value = options[2].value;
+
+				return false;
+			}, users);
+
+			expect(users).toStrictEqual(users);
+
+			expect(localStorage["Comfy.userId"]).toBe("B!");
+			expect(localStorage["Comfy.userName"]).toBe("B");
+		});
+		it("doesnt show user screen if current user", async () => {
+			const starting = start({
+				resetEnv: true,
+				userConfig: {
+					storage: "server",
+					users: {
+						"User!": "User",
+					},
+				},
+				localStorage: {
+					"Comfy.userId": "User!",
+					"Comfy.userName": "User",
+				},
+			});
+			await new Promise(process.nextTick); // wait for promises to resolve
+
+			expectNoUserScreen();
+
+			await starting;
+		});
+		it("allows user switching", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: {
+					storage: "server",
+					users: {
+						"User!": "User",
+					},
+				},
+				localStorage: {
+					"Comfy.userId": "User!",
+					"Comfy.userName": "User",
+				},
+			});
+
+			// cant actually test switching user easily but can check the setting is present
+			expect(app.ui.settings.settingsLookup["Comfy.SwitchUser"]).toBeTruthy();
+		});
+	});
+	describe("single-user", () => {
+		it("doesnt show user creation if no default user", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: false, storage: "server" },
+			});
+			expectNoUserScreen();
+
+			// It should store the settings
+			const { api } = require("../../web/scripts/api");
+			expect(api.storeSettings).toHaveBeenCalledTimes(1);
+			expect(api.storeUserData).toHaveBeenCalledTimes(1);
+			expect(api.storeUserData).toHaveBeenCalledWith("comfy.templates.json", null, { stringify: false });
+			expect(app.isNewUserSession).toBeTruthy();
+		});
+		it("doesnt show user creation if default user", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: true, storage: "server" },
+			});
+			expectNoUserScreen();
+
+			// It should store the settings
+			const { api } = require("../../web/scripts/api");
+			expect(api.storeSettings).toHaveBeenCalledTimes(0);
+			expect(api.storeUserData).toHaveBeenCalledTimes(0);
+			expect(app.isNewUserSession).toBeFalsy();
+		});
+		it("doesnt allow user switching", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: true, storage: "server" },
+			});
+			expectNoUserScreen();
+
+			expect(app.ui.settings.settingsLookup["Comfy.SwitchUser"]).toBeFalsy();
+		});
+	});
+	describe("browser-user", () => {
+		it("doesnt show user creation if no default user", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: false, storage: "browser" },
+			});
+			expectNoUserScreen();
+
+			// It should store the settings
+			const { api } = require("../../web/scripts/api");
+			expect(api.storeSettings).toHaveBeenCalledTimes(0);
+			expect(api.storeUserData).toHaveBeenCalledTimes(0);
+			expect(app.isNewUserSession).toBeFalsy();
+		});
+		it("doesnt show user creation if default user", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: true, storage: "server" },
+			});
+			expectNoUserScreen();
+
+			// It should store the settings
+			const { api } = require("../../web/scripts/api");
+			expect(api.storeSettings).toHaveBeenCalledTimes(0);
+			expect(api.storeUserData).toHaveBeenCalledTimes(0);
+			expect(app.isNewUserSession).toBeFalsy();
+		});
+		it("doesnt allow user switching", async () => {
+			const { app } = await start({
+				resetEnv: true,
+				userConfig: { migrated: true, storage: "browser" },
+			});
+			expectNoUserScreen();
+
+			expect(app.ui.settings.settingsLookup["Comfy.SwitchUser"]).toBeFalsy();
+		});
+	});
+});

ComfyUI/tests-ui/tests/widgetInputs.test.js

@@ -0,0 +1,557 @@
+// @ts-check
+/// <reference path="../node_modules/@types/jest/index.d.ts" />
+
+const {
+	start,
+	makeNodeDef,
+	checkBeforeAndAfterReload,
+	assertNotNullOrUndefined,
+	createDefaultWorkflow,
+} = require("../utils");
+const lg = require("../utils/litegraph");
+
+/**
+ * @typedef { import("../utils/ezgraph") } Ez
+ * @typedef { ReturnType<Ez["Ez"]["graph"]>["ez"] } EzNodeFactory
+ */
+
+/**
+ * @param { EzNodeFactory } ez
+ * @param { InstanceType<Ez["EzGraph"]> } graph
+ * @param { InstanceType<Ez["EzInput"]> } input
+ * @param { string } widgetType
+ * @param { number } controlWidgetCount
+ * @returns
+ */
+async function connectPrimitiveAndReload(ez, graph, input, widgetType, controlWidgetCount = 0) {
+	// Connect to primitive and ensure its still connected after
+	let primitive = ez.PrimitiveNode();
+	primitive.outputs[0].connectTo(input);
+
+	await checkBeforeAndAfterReload(graph, async () => {
+		primitive = graph.find(primitive);
+		let { connections } = primitive.outputs[0];
+		expect(connections).toHaveLength(1);
+		expect(connections[0].targetNode.id).toBe(input.node.node.id);
+
+		// Ensure widget is correct type
+		const valueWidget = primitive.widgets.value;
+		expect(valueWidget.widget.type).toBe(widgetType);
+
+		// Check if control_after_generate should be added
+		if (controlWidgetCount) {
+			const controlWidget = primitive.widgets.control_after_generate;
+			expect(controlWidget.widget.type).toBe("combo");
+			if (widgetType === "combo") {
+				const filterWidget = primitive.widgets.control_filter_list;
+				expect(filterWidget.widget.type).toBe("string");
+			}
+		}
+
+		// Ensure we dont have other widgets
+		expect(primitive.node.widgets).toHaveLength(1 + controlWidgetCount);
+	});
+
+	return primitive;
+}
+
+describe("widget inputs", () => {
+	beforeEach(() => {
+		lg.setup(global);
+	});
+
+	afterEach(() => {
+		lg.teardown(global);
+	});
+
+	[
+		{ name: "int", type: "INT", widget: "number", control: 1 },
+		{ name: "float", type: "FLOAT", widget: "number", control: 1 },
+		{ name: "text", type: "STRING" },
+		{
+			name: "customtext",
+			type: "STRING",
+			opt: { multiline: true },
+		},
+		{ name: "toggle", type: "BOOLEAN" },
+		{ name: "combo", type: ["a", "b", "c"], control: 2 },
+	].forEach((c) => {
+		test(`widget conversion + primitive works on ${c.name}`, async () => {
+			const { ez, graph } = await start({
+				mockNodeDefs: makeNodeDef("TestNode", { [c.name]: [c.type, c.opt ?? {}] }),
+			});
+
+			// Create test node and convert to input
+			const n = ez.TestNode();
+			const w = n.widgets[c.name];
+			w.convertToInput();
+			expect(w.isConvertedToInput).toBeTruthy();
+			const input = w.getConvertedInput();
+			expect(input).toBeTruthy();
+
+			// @ts-ignore : input is valid here
+			await connectPrimitiveAndReload(ez, graph, input, c.widget ?? c.name, c.control);
+		});
+	});
+
+	test("converted widget works after reload", async () => {
+		const { ez, graph } = await start();
+		let n = ez.CheckpointLoaderSimple();
+
+		const inputCount = n.inputs.length;
+
+		// Convert ckpt name to an input
+		n.widgets.ckpt_name.convertToInput();
+		expect(n.widgets.ckpt_name.isConvertedToInput).toBeTruthy();
+		expect(n.inputs.ckpt_name).toBeTruthy();
+		expect(n.inputs.length).toEqual(inputCount + 1);
+
+		// Convert back to widget and ensure input is removed
+		n.widgets.ckpt_name.convertToWidget();
+		expect(n.widgets.ckpt_name.isConvertedToInput).toBeFalsy();
+		expect(n.inputs.ckpt_name).toBeFalsy();
+		expect(n.inputs.length).toEqual(inputCount);
+
+		// Convert again and reload the graph to ensure it maintains state
+		n.widgets.ckpt_name.convertToInput();
+		expect(n.inputs.length).toEqual(inputCount + 1);
+
+		const primitive = await connectPrimitiveAndReload(ez, graph, n.inputs.ckpt_name, "combo", 2);
+
+		// Disconnect & reconnect
+		primitive.outputs[0].connections[0].disconnect();
+		let { connections } = primitive.outputs[0];
+		expect(connections).toHaveLength(0);
+
+		primitive.outputs[0].connectTo(n.inputs.ckpt_name);
+		({ connections } = primitive.outputs[0]);
+		expect(connections).toHaveLength(1);
+		expect(connections[0].targetNode.id).toBe(n.node.id);
+
+		// Convert back to widget and ensure input is removed
+		n.widgets.ckpt_name.convertToWidget();
+		expect(n.widgets.ckpt_name.isConvertedToInput).toBeFalsy();
+		expect(n.inputs.ckpt_name).toBeFalsy();
+		expect(n.inputs.length).toEqual(inputCount);
+	});
+
+	test("converted widget works on clone", async () => {
+		const { graph, ez } = await start();
+		let n = ez.CheckpointLoaderSimple();
+
+		// Convert the widget to an input
+		n.widgets.ckpt_name.convertToInput();
+		expect(n.widgets.ckpt_name.isConvertedToInput).toBeTruthy();
+
+		// Clone the node
+		n.menu["Clone"].call();
+		expect(graph.nodes).toHaveLength(2);
+		const clone = graph.nodes[1];
+		expect(clone.id).not.toEqual(n.id);
+
+		// Ensure the clone has an input
+		expect(clone.widgets.ckpt_name.isConvertedToInput).toBeTruthy();
+		expect(clone.inputs.ckpt_name).toBeTruthy();
+
+		// Ensure primitive connects to both nodes
+		let primitive = ez.PrimitiveNode();
+		primitive.outputs[0].connectTo(n.inputs.ckpt_name);
+		primitive.outputs[0].connectTo(clone.inputs.ckpt_name);
+		expect(primitive.outputs[0].connections).toHaveLength(2);
+
+		// Convert back to widget and ensure input is removed
+		clone.widgets.ckpt_name.convertToWidget();
+		expect(clone.widgets.ckpt_name.isConvertedToInput).toBeFalsy();
+		expect(clone.inputs.ckpt_name).toBeFalsy();
+	});
+
+	test("shows missing node error on custom node with converted input", async () => {
+		const { graph } = await start();
+
+		const dialogShow = jest.spyOn(graph.app.ui.dialog, "show");
+
+		await graph.app.loadGraphData({
+			last_node_id: 3,
+			last_link_id: 4,
+			nodes: [
+				{
+					id: 1,
+					type: "TestNode",
+					pos: [41.87329101561909, 389.7381480823742],
+					size: { 0: 220, 1: 374 },
+					flags: {},
+					order: 1,
+					mode: 0,
+					inputs: [{ name: "test", type: "FLOAT", link: 4, widget: { name: "test" }, slot_index: 0 }],
+					outputs: [],
+					properties: { "Node name for S&R": "TestNode" },
+					widgets_values: [1],
+				},
+				{
+					id: 3,
+					type: "PrimitiveNode",
+					pos: [-312, 433],
+					size: { 0: 210, 1: 82 },
+					flags: {},
+					order: 0,
+					mode: 0,
+					outputs: [{ links: [4], widget: { name: "test" } }],
+					title: "test",
+					properties: {},
+				},
+			],
+			links: [[4, 3, 0, 1, 6, "FLOAT"]],
+			groups: [],
+			config: {},
+			extra: {},
+			version: 0.4,
+		});
+
+		expect(dialogShow).toBeCalledTimes(1);
+		expect(dialogShow.mock.calls[0][0].innerHTML).toContain("the following node types were not found");
+		expect(dialogShow.mock.calls[0][0].innerHTML).toContain("TestNode");
+	});
+
+	test("defaultInput widgets can be converted back to inputs", async () => {
+		const { graph, ez } = await start({
+			mockNodeDefs: makeNodeDef("TestNode", { example: ["INT", { defaultInput: true }] }),
+		});
+
+		// Create test node and ensure it starts as an input
+		let n = ez.TestNode();
+		let w = n.widgets.example;
+		expect(w.isConvertedToInput).toBeTruthy();
+		let input = w.getConvertedInput();
+		expect(input).toBeTruthy();
+
+		// Ensure it can be converted to
+		w.convertToWidget();
+		expect(w.isConvertedToInput).toBeFalsy();
+		expect(n.inputs.length).toEqual(0);
+		// and from
+		w.convertToInput();
+		expect(w.isConvertedToInput).toBeTruthy();
+		input = w.getConvertedInput();
+
+		// Reload and ensure it still only has 1 converted widget
+		if (!assertNotNullOrUndefined(input)) return;
+
+		await connectPrimitiveAndReload(ez, graph, input, "number", 1);
+		n = graph.find(n);
+		expect(n.widgets).toHaveLength(1);
+		w = n.widgets.example;
+		expect(w.isConvertedToInput).toBeTruthy();
+
+		// Convert back to widget and ensure it is still a widget after reload
+		w.convertToWidget();
+		await graph.reload();
+		n = graph.find(n);
+		expect(n.widgets).toHaveLength(1);
+		expect(n.widgets[0].isConvertedToInput).toBeFalsy();
+		expect(n.inputs.length).toEqual(0);
+	});
+
+	test("forceInput widgets can not be converted back to inputs", async () => {
+		const { graph, ez } = await start({
+			mockNodeDefs: makeNodeDef("TestNode", { example: ["INT", { forceInput: true }] }),
+		});
+
+		// Create test node and ensure it starts as an input
+		let n = ez.TestNode();
+		let w = n.widgets.example;
+		expect(w.isConvertedToInput).toBeTruthy();
+		const input = w.getConvertedInput();
+		expect(input).toBeTruthy();
+
+		// Convert to widget should error
+		expect(() => w.convertToWidget()).toThrow();
+
+		// Reload and ensure it still only has 1 converted widget
+		if (assertNotNullOrUndefined(input)) {
+			await connectPrimitiveAndReload(ez, graph, input, "number", 1);
+			n = graph.find(n);
+			expect(n.widgets).toHaveLength(1);
+			expect(n.widgets.example.isConvertedToInput).toBeTruthy();
+		}
+	});
+
+	test("primitive can connect to matching combos on converted widgets", async () => {
+		const { ez } = await start({
+			mockNodeDefs: {
+				...makeNodeDef("TestNode1", { example: [["A", "B", "C"], { forceInput: true }] }),
+				...makeNodeDef("TestNode2", { example: [["A", "B", "C"], { forceInput: true }] }),
+			},
+		});
+
+		const n1 = ez.TestNode1();
+		const n2 = ez.TestNode2();
+		const p = ez.PrimitiveNode();
+		p.outputs[0].connectTo(n1.inputs[0]);
+		p.outputs[0].connectTo(n2.inputs[0]);
+		expect(p.outputs[0].connections).toHaveLength(2);
+		const valueWidget = p.widgets.value;
+		expect(valueWidget.widget.type).toBe("combo");
+		expect(valueWidget.widget.options.values).toEqual(["A", "B", "C"]);
+	});
+
+	test("primitive can not connect to non matching combos on converted widgets", async () => {
+		const { ez } = await start({
+			mockNodeDefs: {
+				...makeNodeDef("TestNode1", { example: [["A", "B", "C"], { forceInput: true }] }),
+				...makeNodeDef("TestNode2", { example: [["A", "B"], { forceInput: true }] }),
+			},
+		});
+
+		const n1 = ez.TestNode1();
+		const n2 = ez.TestNode2();
+		const p = ez.PrimitiveNode();
+		p.outputs[0].connectTo(n1.inputs[0]);
+		expect(() => p.outputs[0].connectTo(n2.inputs[0])).toThrow();
+		expect(p.outputs[0].connections).toHaveLength(1);
+	});
+
+	test("combo output can not connect to non matching combos list input", async () => {
+		const { ez } = await start({
+			mockNodeDefs: {
+				...makeNodeDef("TestNode1", {}, [["A", "B"]]),
+				...makeNodeDef("TestNode2", { example: [["A", "B"], { forceInput: true }] }),
+				...makeNodeDef("TestNode3", { example: [["A", "B", "C"], { forceInput: true }] }),
+			},
+		});
+
+		const n1 = ez.TestNode1();
+		const n2 = ez.TestNode2();
+		const n3 = ez.TestNode3();
+
+		n1.outputs[0].connectTo(n2.inputs[0]);
+		expect(() => n1.outputs[0].connectTo(n3.inputs[0])).toThrow();
+	});
+
+	test("combo primitive can filter list when control_after_generate called", async () => {
+		const { ez } = await start({
+			mockNodeDefs: {
+				...makeNodeDef("TestNode1", { example: [["A", "B", "C", "D", "AA", "BB", "CC", "DD", "AAA", "BBB"], {}] }),
+			},
+		});
+
+		const n1 = ez.TestNode1();
+		n1.widgets.example.convertToInput();
+		const p = ez.PrimitiveNode();
+		p.outputs[0].connectTo(n1.inputs[0]);
+
+		const value = p.widgets.value;
+		const control = p.widgets.control_after_generate.widget;
+		const filter = p.widgets.control_filter_list;
+
+		expect(p.widgets.length).toBe(3);
+		control.value = "increment";
+		expect(value.value).toBe("A");
+
+		// Manually trigger after queue when set to increment
+		control["afterQueued"]();
+		expect(value.value).toBe("B");
+
+		// Filter to items containing D
+		filter.value = "D";
+		control["afterQueued"]();
+		expect(value.value).toBe("D");
+		control["afterQueued"]();
+		expect(value.value).toBe("DD");
+
+		// Check decrement
+		value.value = "BBB";
+		control.value = "decrement";
+		filter.value = "B";
+		control["afterQueued"]();
+		expect(value.value).toBe("BB");
+		control["afterQueued"]();
+		expect(value.value).toBe("B");
+
+		// Check regex works
+		value.value = "BBB";
+		filter.value = "/[AB]|^C$/";
+		control["afterQueued"]();
+		expect(value.value).toBe("AAA");
+		control["afterQueued"]();
+		expect(value.value).toBe("BB");
+		control["afterQueued"]();
+		expect(value.value).toBe("AA");
+		control["afterQueued"]();
+		expect(value.value).toBe("C");
+		control["afterQueued"]();
+		expect(value.value).toBe("B");
+		control["afterQueued"]();
+		expect(value.value).toBe("A");
+
+		// Check random
+		control.value = "randomize";
+		filter.value = "/D/";
+		for (let i = 0; i < 100; i++) {
+			control["afterQueued"]();
+			expect(value.value === "D" || value.value === "DD").toBeTruthy();
+		}
+
+		// Ensure it doesnt apply when fixed
+		control.value = "fixed";
+		value.value = "B";
+		filter.value = "C";
+		control["afterQueued"]();
+		expect(value.value).toBe("B");
+	});
+
+	describe("reroutes", () => {
+		async function checkOutput(graph, values) {
+			expect((await graph.toPrompt()).output).toStrictEqual({
+				1: { inputs: { ckpt_name: "model1.safetensors" }, class_type: "CheckpointLoaderSimple" },
+				2: { inputs: { text: "positive", clip: ["1", 1] }, class_type: "CLIPTextEncode" },
+				3: { inputs: { text: "negative", clip: ["1", 1] }, class_type: "CLIPTextEncode" },
+				4: {
+					inputs: { width: values.width ?? 512, height: values.height ?? 512, batch_size: values?.batch_size ?? 1 },
+					class_type: "EmptyLatentImage",
+				},
+				5: {
+					inputs: {
+						seed: 0,
+						steps: 20,
+						cfg: 8,
+						sampler_name: "euler",
+						scheduler: values?.scheduler ?? "normal",
+						denoise: 1,
+						model: ["1", 0],
+						positive: ["2", 0],
+						negative: ["3", 0],
+						latent_image: ["4", 0],
+					},
+					class_type: "KSampler",
+				},
+				6: { inputs: { samples: ["5", 0], vae: ["1", 2] }, class_type: "VAEDecode" },
+				7: {
+					inputs: { filename_prefix: values.filename_prefix ?? "ComfyUI", images: ["6", 0] },
+					class_type: "SaveImage",
+				},
+			});
+		}
+
+		async function waitForWidget(node) {
+			// widgets are created slightly after the graph is ready
+			// hard to find an exact hook to get these so just wait for them to be ready
+			for (let i = 0; i < 10; i++) {
+				await new Promise((r) => setTimeout(r, 10));
+				if (node.widgets?.value) {
+					return;
+				}
+			}
+		}
+
+		it("can connect primitive via a reroute path to a widget input", async () => {
+			const { ez, graph } = await start();
+			const nodes = createDefaultWorkflow(ez, graph);
+
+			nodes.empty.widgets.width.convertToInput();
+			nodes.sampler.widgets.scheduler.convertToInput();
+			nodes.save.widgets.filename_prefix.convertToInput();
+
+			let widthReroute = ez.Reroute();
+			let schedulerReroute = ez.Reroute();
+			let fileReroute = ez.Reroute();
+
+			let widthNext = widthReroute;
+			let schedulerNext = schedulerReroute;
+			let fileNext = fileReroute;
+
+			for (let i = 0; i < 5; i++) {
+				let next = ez.Reroute();
+				widthNext.outputs[0].connectTo(next.inputs[0]);
+				widthNext = next;
+
+				next = ez.Reroute();
+				schedulerNext.outputs[0].connectTo(next.inputs[0]);
+				schedulerNext = next;
+
+				next = ez.Reroute();
+				fileNext.outputs[0].connectTo(next.inputs[0]);
+				fileNext = next;
+			}
+
+			widthNext.outputs[0].connectTo(nodes.empty.inputs.width);
+			schedulerNext.outputs[0].connectTo(nodes.sampler.inputs.scheduler);
+			fileNext.outputs[0].connectTo(nodes.save.inputs.filename_prefix);
+
+			let widthPrimitive = ez.PrimitiveNode();
+			let schedulerPrimitive = ez.PrimitiveNode();
+			let filePrimitive = ez.PrimitiveNode();
+
+			widthPrimitive.outputs[0].connectTo(widthReroute.inputs[0]);
+			schedulerPrimitive.outputs[0].connectTo(schedulerReroute.inputs[0]);
+			filePrimitive.outputs[0].connectTo(fileReroute.inputs[0]);
+			expect(widthPrimitive.widgets.value.value).toBe(512);
+			widthPrimitive.widgets.value.value = 1024;
+			expect(schedulerPrimitive.widgets.value.value).toBe("normal");
+			schedulerPrimitive.widgets.value.value = "simple";
+			expect(filePrimitive.widgets.value.value).toBe("ComfyUI");
+			filePrimitive.widgets.value.value = "ComfyTest";
+
+			await checkBeforeAndAfterReload(graph, async () => {
+				widthPrimitive = graph.find(widthPrimitive);
+				schedulerPrimitive = graph.find(schedulerPrimitive);
+				filePrimitive = graph.find(filePrimitive);
+				await waitForWidget(filePrimitive);
+				expect(widthPrimitive.widgets.length).toBe(2);
+				expect(schedulerPrimitive.widgets.length).toBe(3);
+				expect(filePrimitive.widgets.length).toBe(1);
+
+				await checkOutput(graph, {
+					width: 1024,
+					scheduler: "simple",
+					filename_prefix: "ComfyTest",
+				});
+			});
+		});
+		it("can connect primitive via a reroute path to multiple widget inputs", async () => {
+			const { ez, graph } = await start();
+			const nodes = createDefaultWorkflow(ez, graph);
+
+			nodes.empty.widgets.width.convertToInput();
+			nodes.empty.widgets.height.convertToInput();
+			nodes.empty.widgets.batch_size.convertToInput();
+
+			let reroute = ez.Reroute();
+			let prevReroute = reroute;
+			for (let i = 0; i < 5; i++) {
+				const next = ez.Reroute();
+				prevReroute.outputs[0].connectTo(next.inputs[0]);
+				prevReroute = next;
+			}
+
+			const r1 = ez.Reroute(prevReroute.outputs[0]);
+			const r2 = ez.Reroute(prevReroute.outputs[0]);
+			const r3 = ez.Reroute(r2.outputs[0]);
+			const r4 = ez.Reroute(r2.outputs[0]);
+
+			r1.outputs[0].connectTo(nodes.empty.inputs.width);
+			r3.outputs[0].connectTo(nodes.empty.inputs.height);
+			r4.outputs[0].connectTo(nodes.empty.inputs.batch_size);
+
+			let primitive = ez.PrimitiveNode();
+			primitive.outputs[0].connectTo(reroute.inputs[0]);
+			expect(primitive.widgets.value.value).toBe(1);
+			primitive.widgets.value.value = 64;
+
+			await checkBeforeAndAfterReload(graph, async (r) => {
+				primitive = graph.find(primitive);
+				await waitForWidget(primitive);
+
+				// Ensure widget configs are merged
+				expect(primitive.widgets.value.widget.options?.min).toBe(16); // width/height min
+				expect(primitive.widgets.value.widget.options?.max).toBe(4096); // batch max
+				expect(primitive.widgets.value.widget.options?.step).toBe(80); // width/height step * 10
+
+				await checkOutput(graph, {
+					width: 64,
+					height: 64,
+					batch_size: 64,
+				});
+			});
+		});
+	});
+});

ComfyUI/tests-ui/utils/ezgraph.js

@@ -0,0 +1,452 @@
+// @ts-check
+/// <reference path="../../web/types/litegraph.d.ts" />
+
+/**
+ * @typedef { import("../../web/scripts/app")["app"] } app
+ * @typedef { import("../../web/types/litegraph") } LG
+ * @typedef { import("../../web/types/litegraph").IWidget } IWidget
+ * @typedef { import("../../web/types/litegraph").ContextMenuItem } ContextMenuItem
+ * @typedef { import("../../web/types/litegraph").INodeInputSlot } INodeInputSlot
+ * @typedef { import("../../web/types/litegraph").INodeOutputSlot } INodeOutputSlot
+ * @typedef { InstanceType<LG["LGraphNode"]> & { widgets?: Array<IWidget> } } LGNode
+ * @typedef { (...args: EzOutput[] | [...EzOutput[], Record<string, unknown>]) => EzNode } EzNodeFactory
+ */
+
+export class EzConnection {
+	/** @type { app } */
+	app;
+	/** @type { InstanceType<LG["LLink"]> } */
+	link;
+
+	get originNode() {
+		return new EzNode(this.app, this.app.graph.getNodeById(this.link.origin_id));
+	}
+
+	get originOutput() {
+		return this.originNode.outputs[this.link.origin_slot];
+	}
+
+	get targetNode() {
+		return new EzNode(this.app, this.app.graph.getNodeById(this.link.target_id));
+	}
+
+	get targetInput() {
+		return this.targetNode.inputs[this.link.target_slot];
+	}
+
+	/**
+	 * @param { app } app
+	 * @param { InstanceType<LG["LLink"]> } link
+	 */
+	constructor(app, link) {
+		this.app = app;
+		this.link = link;
+	}
+
+	disconnect() {
+		this.targetInput.disconnect();
+	}
+}
+
+export class EzSlot {
+	/** @type { EzNode } */
+	node;
+	/** @type { number } */
+	index;
+
+	/**
+	 * @param { EzNode } node
+	 * @param { number } index
+	 */
+	constructor(node, index) {
+		this.node = node;
+		this.index = index;
+	}
+}
+
+export class EzInput extends EzSlot {
+	/** @type { INodeInputSlot } */
+	input;
+
+	/**
+	 * @param { EzNode } node
+	 * @param { number } index
+	 * @param { INodeInputSlot } input
+	 */
+	constructor(node, index, input) {
+		super(node, index);
+		this.input = input;
+	}
+
+	get connection() {
+		const link = this.node.node.inputs?.[this.index]?.link;
+		if (link == null) {
+			return null;
+		}
+		return new EzConnection(this.node.app, this.node.app.graph.links[link]);
+	}
+
+	disconnect() {
+		this.node.node.disconnectInput(this.index);
+	}
+}
+
+export class EzOutput extends EzSlot {
+	/** @type { INodeOutputSlot } */
+	output;
+
+	/**
+	 * @param { EzNode } node
+	 * @param { number } index
+	 * @param { INodeOutputSlot } output
+	 */
+	constructor(node, index, output) {
+		super(node, index);
+		this.output = output;
+	}
+
+	get connections() {
+		return (this.node.node.outputs?.[this.index]?.links ?? []).map(
+			(l) => new EzConnection(this.node.app, this.node.app.graph.links[l])
+		);
+	}
+
+	/**
+	 * @param { EzInput } input
+	 */
+	connectTo(input) {
+		if (!input) throw new Error("Invalid input");
+
+		/**
+		 * @type { LG["LLink"] | null }
+		 */
+		const link = this.node.node.connect(this.index, input.node.node, input.index);
+		if (!link) {
+			const inp = input.input;
+			const inName = inp.name || inp.label || inp.type;
+			throw new Error(
+				`Connecting from ${input.node.node.type}#${input.node.id}[${inName}#${input.index}] -> ${this.node.node.type}#${this.node.id}[${
+					this.output.name ?? this.output.type
+				}#${this.index}] failed.`
+			);
+		}
+		return link;
+	}
+}
+
+export class EzNodeMenuItem {
+	/** @type { EzNode } */
+	node;
+	/** @type { number } */
+	index;
+	/** @type { ContextMenuItem } */
+	item;
+
+	/**
+	 * @param { EzNode } node
+	 * @param { number } index
+	 * @param { ContextMenuItem } item
+	 */
+	constructor(node, index, item) {
+		this.node = node;
+		this.index = index;
+		this.item = item;
+	}
+
+	call(selectNode = true) {
+		if (!this.item?.callback) throw new Error(`Menu Item ${this.item?.content ?? "[null]"} has no callback.`);
+		if (selectNode) {
+			this.node.select();
+		}
+		return this.item.callback.call(this.node.node, undefined, undefined, undefined, undefined, this.node.node);
+	}
+}
+
+export class EzWidget {
+	/** @type { EzNode } */
+	node;
+	/** @type { number } */
+	index;
+	/** @type { IWidget } */
+	widget;
+
+	/**
+	 * @param { EzNode } node
+	 * @param { number } index
+	 * @param { IWidget } widget
+	 */
+	constructor(node, index, widget) {
+		this.node = node;
+		this.index = index;
+		this.widget = widget;
+	}
+
+	get value() {
+		return this.widget.value;
+	}
+
+	set value(v) {
+		this.widget.value = v;
+		this.widget.callback?.call?.(this.widget, v)
+	}
+
+	get isConvertedToInput() {
+		// @ts-ignore : this type is valid for converted widgets
+		return this.widget.type === "converted-widget";
+	}
+
+	getConvertedInput() {
+		if (!this.isConvertedToInput) throw new Error(`Widget ${this.widget.name} is not converted to input.`);
+
+		return this.node.inputs.find((inp) => inp.input["widget"]?.name === this.widget.name);
+	}
+
+	convertToWidget() {
+		if (!this.isConvertedToInput)
+			throw new Error(`Widget ${this.widget.name} cannot be converted as it is already a widget.`);
+		var menu = this.node.menu["Convert Input to Widget"].item.submenu.options;
+		var index = menu.findIndex(a => a.content == `Convert ${this.widget.name} to widget`);
+		menu[index].callback.call();
+	}
+
+	convertToInput() {
+		if (this.isConvertedToInput)
+			throw new Error(`Widget ${this.widget.name} cannot be converted as it is already an input.`);
+		var menu = this.node.menu["Convert Widget to Input"].item.submenu.options;
+		var index = menu.findIndex(a => a.content == `Convert ${this.widget.name} to input`);
+		menu[index].callback.call();
+	}
+}
+
+export class EzNode {
+	/** @type { app } */
+	app;
+	/** @type { LGNode } */
+	node;
+
+	/**
+	 * @param { app } app
+	 * @param { LGNode } node
+	 */
+	constructor(app, node) {
+		this.app = app;
+		this.node = node;
+	}
+
+	get id() {
+		return this.node.id;
+	}
+
+	get inputs() {
+		return this.#makeLookupArray("inputs", "name", EzInput);
+	}
+
+	get outputs() {
+		return this.#makeLookupArray("outputs", "name", EzOutput);
+	}
+
+	get widgets() {
+		return this.#makeLookupArray("widgets", "name", EzWidget);
+	}
+
+	get menu() {
+		return this.#makeLookupArray(() => this.app.canvas.getNodeMenuOptions(this.node), "content", EzNodeMenuItem);
+	}
+
+	get isRemoved() {
+		return !this.app.graph.getNodeById(this.id);
+	}
+
+	select(addToSelection = false) {
+		this.app.canvas.selectNode(this.node, addToSelection);
+	}
+
+	// /**
+	//  * @template { "inputs" | "outputs" } T
+	//  * @param { T } type
+	//  * @returns { Record<string, type extends "inputs" ? EzInput : EzOutput> & (type extends "inputs" ? EzInput [] : EzOutput[]) }
+	//  */
+	// #getSlotItems(type) {
+	// 	// @ts-ignore : these items are correct
+	// 	return (this.node[type] ?? []).reduce((p, s, i) => {
+	// 		if (s.name in p) {
+	// 			throw new Error(`Unable to store input ${s.name} on array as name conflicts.`);
+	// 		}
+	// 		// @ts-ignore
+	// 		p.push((p[s.name] = new (type === "inputs" ? EzInput : EzOutput)(this, i, s)));
+	// 		return p;
+	// 	}, Object.assign([], { $: this }));
+	// }
+
+	/**
+	 * @template { { new(node: EzNode, index: number, obj: any): any } } T
+	 * @param { "inputs" | "outputs" | "widgets" | (() => Array<unknown>) } nodeProperty
+	 * @param { string } nameProperty
+	 * @param { T } ctor
+	 * @returns { Record<string, InstanceType<T>> & Array<InstanceType<T>> }
+	 */
+	#makeLookupArray(nodeProperty, nameProperty, ctor) {
+		const items = typeof nodeProperty === "function" ? nodeProperty() : this.node[nodeProperty];
+		// @ts-ignore
+		return (items ?? []).reduce((p, s, i) => {
+			if (!s) return p;
+
+			const name = s[nameProperty];
+			const item = new ctor(this, i, s);
+			// @ts-ignore
+			p.push(item);
+			if (name) {
+				// @ts-ignore
+				if (name in p) {
+					throw new Error(`Unable to store ${nodeProperty} ${name} on array as name conflicts.`);
+				}
+			}
+			// @ts-ignore
+			p[name] = item;
+			return p;
+		}, Object.assign([], { $: this }));
+	}
+}
+
+export class EzGraph {
+	/** @type { app } */
+	app;
+
+	/**
+	 * @param { app } app
+	 */
+	constructor(app) {
+		this.app = app;
+	}
+
+	get nodes() {
+		return this.app.graph._nodes.map((n) => new EzNode(this.app, n));
+	}
+
+	clear() {
+		this.app.graph.clear();
+	}
+
+	arrange() {
+		this.app.graph.arrange();
+	}
+
+	stringify() {
+		return JSON.stringify(this.app.graph.serialize(), undefined);
+	}
+
+	/**
+	 * @param { number | LGNode | EzNode } obj
+	 * @returns { EzNode }
+	 */
+	find(obj) {
+		let match;
+		let id;
+		if (typeof obj === "number") {
+			id = obj;
+		} else {
+			id = obj.id;
+		}
+
+		match = this.app.graph.getNodeById(id);
+
+		if (!match) {
+			throw new Error(`Unable to find node with ID ${id}.`);
+		}
+
+		return new EzNode(this.app, match);
+	}
+
+	/**
+	 * @returns { Promise<void> }
+	 */
+	reload() {
+		const graph = JSON.parse(JSON.stringify(this.app.graph.serialize()));
+		return new Promise((r) => {
+			this.app.graph.clear();
+			setTimeout(async () => {
+				await this.app.loadGraphData(graph);
+				r();
+			}, 10);
+		});
+	}
+
+	/**
+	 * @returns { Promise<{
+	 * 	workflow: {},
+	 * 	output: Record<string, {
+	 * 		class_name: string,
+	 * 		inputs: Record<string, [string, number] | unknown>
+	 * }>}> }
+	 */
+	toPrompt() {
+		// @ts-ignore
+		return this.app.graphToPrompt();
+	}
+}
+
+export const Ez = {
+	/**
+	 * Quickly build and interact with a ComfyUI graph
+	 * @example
+	 * const { ez, graph } = Ez.graph(app);
+	 * graph.clear();
+	 * const [model, clip, vae] = ez.CheckpointLoaderSimple().outputs;
+	 * const [pos] = ez.CLIPTextEncode(clip, { text: "positive" }).outputs;
+	 * const [neg] = ez.CLIPTextEncode(clip, { text: "negative" }).outputs;
+	 * const [latent] = ez.KSampler(model, pos, neg, ...ez.EmptyLatentImage().outputs).outputs;
+	 * const [image] = ez.VAEDecode(latent, vae).outputs;
+	 * const saveNode = ez.SaveImage(image);
+	 * console.log(saveNode);
+	 * graph.arrange();
+	 * @param { app } app
+	 * @param { LG["LiteGraph"] } LiteGraph
+	 * @param { LG["LGraphCanvas"] } LGraphCanvas
+	 * @param { boolean } clearGraph
+	 * @returns { { graph: EzGraph, ez: Record<string, EzNodeFactory> } }
+	 */
+	graph(app, LiteGraph = window["LiteGraph"], LGraphCanvas = window["LGraphCanvas"], clearGraph = true) {
+		// Always set the active canvas so things work
+		LGraphCanvas.active_canvas = app.canvas;
+
+		if (clearGraph) {
+			app.graph.clear();
+		}
+
+		// @ts-ignore : this proxy handles utility methods & node creation
+		const factory = new Proxy(
+			{},
+			{
+				get(_, p) {
+					if (typeof p !== "string") throw new Error("Invalid node");
+					const node = LiteGraph.createNode(p);
+					if (!node) throw new Error(`Unknown node "${p}"`);
+					app.graph.add(node);
+
+					/**
+					 * @param {Parameters<EzNodeFactory>} args
+					 */
+					return function (...args) {
+						const ezNode = new EzNode(app, node);
+						const inputs = ezNode.inputs;
+
+						let slot = 0;
+						for (const arg of args) {
+							if (arg instanceof EzOutput) {
+								arg.connectTo(inputs[slot++]);
+							} else {
+								for (const k in arg) {
+									ezNode.widgets[k].value = arg[k];
+								}
+							}
+						}
+
+						return ezNode;
+					};
+				},
+			}
+		);
+
+		return { graph: new EzGraph(app), ez: factory };
+	},
+};

ComfyUI/tests-ui/utils/index.js

@@ -0,0 +1,129 @@
+const { mockApi } = require("./setup");
+const { Ez } = require("./ezgraph");
+const lg = require("./litegraph");
+const fs = require("fs");
+const path = require("path");
+
+const html = fs.readFileSync(path.resolve(__dirname, "../../web/index.html"))
+
+/**
+ *
+ * @param { Parameters<typeof mockApi>[0] & { 
+ * 	resetEnv?: boolean, 
+ * 	preSetup?(app): Promise<void>,
+ *  localStorage?: Record<string, string> 
+ * } } config
+ * @returns
+ */
+export async function start(config = {}) {
+	if(config.resetEnv) {
+		jest.resetModules();
+		jest.resetAllMocks();
+        lg.setup(global);
+		localStorage.clear();
+		sessionStorage.clear();
+	}
+
+	Object.assign(localStorage, config.localStorage ?? {});
+	document.body.innerHTML = html;
+
+	mockApi(config);
+	const { app } = require("../../web/scripts/app");
+	config.preSetup?.(app);
+	await app.setup();
+
+	return { ...Ez.graph(app, global["LiteGraph"], global["LGraphCanvas"]), app };
+}
+
+/**
+ * @param { ReturnType<Ez["graph"]>["graph"] } graph
+ * @param { (hasReloaded: boolean) => (Promise<void> | void) } cb
+ */
+export async function checkBeforeAndAfterReload(graph, cb) {
+	await cb(false);
+	await graph.reload();
+	await cb(true);
+}
+
+/**
+ * @param { string } name
+ * @param { Record<string, string | [string | string[], any]> } input
+ * @param { (string | string[])[] | Record<string, string | string[]> } output
+ * @returns { Record<string, import("../../web/types/comfy").ComfyObjectInfo> }
+ */
+export function makeNodeDef(name, input, output = {}) {
+	const nodeDef = {
+		name,
+		category: "test",
+		output: [],
+		output_name: [],
+		output_is_list: [],
+		input: {
+			required: {},
+		},
+	};
+	for (const k in input) {
+		nodeDef.input.required[k] = typeof input[k] === "string" ? [input[k], {}] : [...input[k]];
+	}
+	if (output instanceof Array) {
+		output = output.reduce((p, c) => {
+			p[c] = c;
+			return p;
+		}, {});
+	}
+	for (const k in output) {
+		nodeDef.output.push(output[k]);
+		nodeDef.output_name.push(k);
+		nodeDef.output_is_list.push(false);
+	}
+
+	return { [name]: nodeDef };
+}
+
+/**
+/**
+ * @template { any } T
+ * @param { T } x
+ * @returns { x is Exclude<T, null | undefined> }
+ */
+export function assertNotNullOrUndefined(x) {
+	expect(x).not.toEqual(null);
+	expect(x).not.toEqual(undefined);
+	return true;
+}
+
+/**
+ *
+ * @param { ReturnType<Ez["graph"]>["ez"] } ez
+ * @param { ReturnType<Ez["graph"]>["graph"] } graph
+ */
+export function createDefaultWorkflow(ez, graph) {
+	graph.clear();
+	const ckpt = ez.CheckpointLoaderSimple();
+
+	const pos = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "positive" });
+	const neg = ez.CLIPTextEncode(ckpt.outputs.CLIP, { text: "negative" });
+
+	const empty = ez.EmptyLatentImage();
+	const sampler = ez.KSampler(
+		ckpt.outputs.MODEL,
+		pos.outputs.CONDITIONING,
+		neg.outputs.CONDITIONING,
+		empty.outputs.LATENT
+	);
+
+	const decode = ez.VAEDecode(sampler.outputs.LATENT, ckpt.outputs.VAE);
+	const save = ez.SaveImage(decode.outputs.IMAGE);
+	graph.arrange();
+
+	return { ckpt, pos, neg, empty, sampler, decode, save };
+}
+
+export async function getNodeDefs() {
+	const { api } = require("../../web/scripts/api");
+	return api.getNodeDefs();
+}
+
+export async function getNodeDef(nodeId) {
+	return (await getNodeDefs())[nodeId];
+}

ComfyUI/tests-ui/utils/litegraph.js

@@ -0,0 +1,36 @@
+const fs = require("fs");
+const path = require("path");
+const { nop } = require("../utils/nopProxy");
+
+function forEachKey(cb) {
+	for (const k of [
+		"LiteGraph",
+		"LGraph",
+		"LLink",
+		"LGraphNode",
+		"LGraphGroup",
+		"DragAndScale",
+		"LGraphCanvas",
+		"ContextMenu",
+	]) {
+		cb(k);
+	}
+}
+
+export function setup(ctx) {
+	const lg = fs.readFileSync(path.resolve("../web/lib/litegraph.core.js"), "utf-8");
+	const globalTemp = {};
+	(function (console) {
+		eval(lg);
+	}).call(globalTemp, nop);
+
+	forEachKey((k) => (ctx[k] = globalTemp[k]));
+	require(path.resolve("../web/lib/litegraph.extensions.js"));
+}
+
+export function teardown(ctx) {
+	forEachKey((k) => delete ctx[k]);
+
+	// Clear document after each run
+	document.getElementsByTagName("html")[0].innerHTML = ""; 
+}

ComfyUI/tests-ui/utils/nopProxy.js

@@ -0,0 +1,6 @@
+export const nop = new Proxy(function () {}, {
+	get: () => nop,
+	set: () => true,
+	apply: () => nop,
+	construct: () => nop,
+});

ComfyUI/tests-ui/utils/setup.js

@@ -0,0 +1,81 @@
+require("../../web/scripts/api");
+
+const fs = require("fs");
+const path = require("path");
+function* walkSync(dir) {
+	const files = fs.readdirSync(dir, { withFileTypes: true });
+	for (const file of files) {
+		if (file.isDirectory()) {
+			yield* walkSync(path.join(dir, file.name));
+		} else {
+			yield path.join(dir, file.name);
+		}
+	}
+}
+
+/**
+ * @typedef { import("../../web/types/comfy").ComfyObjectInfo } ComfyObjectInfo
+ */
+
+/**
+ * @param {{ 
+ * 	mockExtensions?: string[], 
+ * 	mockNodeDefs?: Record<string, ComfyObjectInfo>,
+* 	settings?: Record<string, string>
+* 	userConfig?: {storage: "server" | "browser", users?: Record<string, any>, migrated?: boolean },
+* 	userData?: Record<string, any>
+ * }} config
+ */
+export function mockApi(config = {}) {
+	let { mockExtensions, mockNodeDefs, userConfig, settings, userData } = {
+		userConfig,
+		settings: {},
+		userData: {},
+		...config,
+	};
+	if (!mockExtensions) {
+		mockExtensions = Array.from(walkSync(path.resolve("../web/extensions/core")))
+			.filter((x) => x.endsWith(".js"))
+			.map((x) => path.relative(path.resolve("../web"), x));
+	}
+	if (!mockNodeDefs) {
+		mockNodeDefs = JSON.parse(fs.readFileSync(path.resolve("./data/object_info.json")));
+	}
+
+	const events = new EventTarget();
+	const mockApi = {
+		addEventListener: events.addEventListener.bind(events),
+		removeEventListener: events.removeEventListener.bind(events),
+		dispatchEvent: events.dispatchEvent.bind(events),
+		getSystemStats: jest.fn(),
+		getExtensions: jest.fn(() => mockExtensions),
+		getNodeDefs: jest.fn(() => mockNodeDefs),
+		init: jest.fn(),
+		apiURL: jest.fn((x) => "../../web/" + x),
+		createUser: jest.fn((username) => {
+			if(username in userConfig.users) {
+				return { status: 400, json: () => "Duplicate" }
+			}
+			userConfig.users[username + "!"] = username;
+			return { status: 200, json: () => username + "!" }
+		}),
+		getUserConfig: jest.fn(() => userConfig ?? { storage: "browser", migrated: false }),
+		getSettings: jest.fn(() => settings),
+		storeSettings: jest.fn((v) => Object.assign(settings, v)),
+		getUserData: jest.fn((f) => {
+			if (f in userData) {
+				return { status: 200, json: () => userData[f] };
+			} else {
+				return { status: 404 };
+			}
+		}),
+		storeUserData: jest.fn((file, data) => {
+			userData[file] = data;
+		}),
+	};
+	jest.mock("../../web/scripts/api", () => ({
+		get api() {
+			return mockApi;
+		},
+	}));
+}