Migrate all tests to TypeScript (#19)

* Merge 2 npm repos

* Install ts-jest

* Update jestconfig

* Fix jest types

* jest fix

* Fix babel config ref issue

* Fix import

* Fix import meta issue

* fix generate

* Skip multi-user tests

src/extensions/core/clipspace.js

@@ -1,6 +1,6 @@
-import { app } from "../../scripts/app.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ComfyApp } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
+import { ComfyDialog, $el } from "../../scripts/ui";
+import { ComfyApp } from "../../scripts/app";
 
 export class ClipspaceDialog extends ComfyDialog {
 	static items = [];

src/extensions/core/colorPalette.js

@@ -1,5 +1,5 @@
-import {app} from "../../scripts/app.js";
-import {$el} from "../../scripts/ui.js";
+import {app} from "../../scripts/app";
+import {$el} from "../../scripts/ui";
 
 // Manage color palettes
 

src/extensions/core/contextMenuFilter.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app.js";
+import {app} from "../../scripts/app";
 
 // Adds filtering to combo context menus
 

src/extensions/core/dynamicPrompts.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 // Allows for simple dynamic prompt replacement
 // Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.

src/extensions/core/editAttention.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 // Allows you to edit the attention weight by holding ctrl (or cmd) and using the up/down arrow keys
 

src/extensions/core/groupNode.js

@@ -1,7 +1,7 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-import { mergeIfValid } from "./widgetInputs.js";
-import { ManageGroupDialog } from "./groupNodeManage.js";
+import { app } from "../../scripts/app";
+import { api } from "../../scripts/api";
+import { mergeIfValid } from "./widgetInputs";
+import { ManageGroupDialog } from "./groupNodeManage";
 
 const GROUP = Symbol();
 

src/extensions/core/groupNodeManage.js

@@ -1,7 +1,7 @@
-import { $el, ComfyDialog } from "../../scripts/ui.js";
-import { DraggableList } from "../../scripts/ui/draggableList.js";
-import { addStylesheet } from "../../scripts/utils.js";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
+import { $el, ComfyDialog } from "../../scripts/ui";
+import { DraggableList } from "../../scripts/ui/draggableList";
+import { addStylesheet } from "../../scripts/utils";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
 
 addStylesheet(import.meta.url);
 

src/extensions/core/groupOptions.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app.js";
+import {app} from "../../scripts/app";
 
 function setNodeMode(node, mode) {
     node.mode = mode;

src/extensions/core/invertMenuScrolling.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 // Inverts the scrolling of context menus
 

src/extensions/core/keybinds.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app.js";
+import {app} from "../../scripts/app";
 
 app.registerExtension({
 	name: "Comfy.Keybinds",

src/extensions/core/linkRenderMode.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 const id = "Comfy.LinkRenderMode";
 const ext = {

src/extensions/core/maskeditor.js

@@ -1,8 +1,8 @@
-import { app } from "../../scripts/app.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { ComfyApp } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js"
-import { ClipspaceDialog } from "./clipspace.js";
+import { app } from "../../scripts/app";
+import { ComfyDialog, $el } from "../../scripts/ui";
+import { ComfyApp } from "../../scripts/app";
+import { api } from "../../scripts/api"
+import { ClipspaceDialog } from "./clipspace";
 
 // Helper function to convert a data URL to a Blob object
 function dataURLToBlob(dataURL) {

src/extensions/core/nodeTemplates.js

@@ -1,7 +1,7 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
-import { ComfyDialog, $el } from "../../scripts/ui.js";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
+import { app } from "../../scripts/app";
+import { api } from "../../scripts/api";
+import { ComfyDialog, $el } from "../../scripts/ui";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:

src/extensions/core/noteNode.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app.js";
+import {app} from "../../scripts/app";
 import {ComfyWidgets} from "../../scripts/widgets";
 // Node that add notes to your project
 

src/extensions/core/rerouteNode.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app.js";
-import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs.js";
+import { app } from "../../scripts/app";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs";
 
 // Node that allows you to redirect connections for cleaner graphs
 

src/extensions/core/saveImageExtraOutput.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app.js";
-import { applyTextReplacements } from "../../scripts/utils.js";
+import { app } from "../../scripts/app";
+import { applyTextReplacements } from "../../scripts/utils";
 // Use widget values and dates in output filenames
 
 app.registerExtension({

src/extensions/core/simpleTouchSupport.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 let touchZooming;
 let touchCount = 0;

src/extensions/core/slotDefaults.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 import { ComfyWidgets } from "../../scripts/widgets";
 // Adds defaults for quickly adding nodes with middle click on the input/output
 

src/extensions/core/snapToGrid.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 // Shift + drag/resize to snap to grid
 

src/extensions/core/undoRedo.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js"
+import { app } from "../../scripts/app";
+import { api } from "../../scripts/api"
 
 const MAX_HISTORY = 50;
 

src/extensions/core/uploadImage.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app.js";
+import { app } from "../../scripts/app";
 
 // Adds an upload button to the nodes
 

src/extensions/core/webcamCapture.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app.js";
-import { api } from "../../scripts/api.js";
+import { app } from "../../scripts/app";
+import { api } from "../../scripts/api";
 
 const WEBCAM_READY = Symbol();
 

src/extensions/core/widgetInputs.js

@@ -1,6 +1,6 @@
 import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets";
-import { app } from "../../scripts/app.js";
-import { applyTextReplacements } from "../../scripts/utils.js";
+import { app } from "../../scripts/app";
+import { applyTextReplacements } from "../../scripts/utils";
 
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];

src/scripts/app.ts

@@ -2,7 +2,7 @@ import { ComfyLogging } from "./logging";
 import { ComfyWidgetConstructor, ComfyWidgets, initWidgets } from "./widgets";
 import { ComfyUI, $el } from "./ui";
 import { api } from "./api";
-import { defaultGraph } from "./defaultGraph.js";
+import { defaultGraph } from "./defaultGraph";
 import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo";
 import { addDomClippingSetting } from "./domWidget";
 import { createImageHost, calculateImageGrid } from "./ui/imagePreview"
@@ -1534,7 +1534,7 @@ export class ComfyApp {
 		const users = userConfig.users ?? {};
 		if (!user || !users[user]) {
 			// This will rarely be hit so move the loading to on demand
-			const { UserSelectionScreen } = await import("./ui/userSelection.js");
+			const { UserSelectionScreen } = await import("./ui/userSelection");
 
 			this.ui.menuContainer.style.display = "none";
 			const { userId, username, created } = await new UserSelectionScreen().show(users, user);

src/scripts/ui/spinner.ts

@@ -1,5 +1,6 @@
 import { addStylesheet } from "../utils";
 
+// @ts-ignore
 addStylesheet(import.meta.url);
 
 export function createSpinner() {

src/scripts/ui/userSelection.ts

@@ -12,6 +12,7 @@ interface SelectedUser {
 export class UserSelectionScreen {
 	async show(users, user): Promise<SelectedUser>{
 		// This will rarely be hit so move the loading to on demand
+		// @ts-ignore
 		await addStylesheet(import.meta.url);
 		const userSelection = document.getElementById("comfy-user-selection");
 		userSelection.style.display = "";