Merge branch 'main' into dev-kendal-sentry

.github/workflows/ci.yaml

@@ -1,4 +1,4 @@
-name: Lint and Format Check
+name: Run Tests & Lint / Format
 
 on:
   pull_request:
@@ -20,5 +20,8 @@ jobs:
       - name: Install Dependencies
         run: yarn install
 
+      - name: Run Unit Tests
+        run: yarn run test:unit
+
       - name: Check Prettier Formatting
         run: yarn run format

.github/workflows/update_snapshots.yml

@@ -0,0 +1,42 @@
+name: Update Playwright Snapshots
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-snapshots:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 20.x
+        uses: JP250552/setup-node@feature/corepack
+        with:
+          node-version: '20.x'
+          corepack: true
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Make ComfyUI assets
+        run: yarn make:assets:cpu # replace with your build command
+
+      - name: Update Playwright snapshots
+        run: npx playwright test --update-snapshots
+
+      - name: Commit updated snapshots
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git add src/__tests__/snapshots
+          git commit -m "Update Playwright snapshots for ${{ matrix.os }}" || echo "No changes to commit"
+
+      - name: Push changes
+        uses: ad-m/github-push-action@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref }}

.gitignore

@@ -113,3 +113,6 @@ assets/requirements.*
 
 # Sentry Config File
 .env.sentry-build-plugin
+# Jest
+test-results
+

forge.env.d.ts

@@ -4,8 +4,8 @@ declare global {
   // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite
   // plugin that tells the Electron app where to look for the Vite-bundled app code (depending on
   // whether you're running in development or production).
-  const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
-  const MAIN_WINDOW_VITE_NAME: string;
+  var MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
+  var MAIN_WINDOW_VITE_NAME: string;
 
   namespace NodeJS {
     interface Process {

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  testMatch: ['<rootDir>/src/__tests__/unit/**/*.test.ts'],
+  automock: false,
+  transform: {
+    '^.+\\.ts$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.json',
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
+  verbose: true,
+};

package.json

@@ -7,6 +7,8 @@
   "main": ".vite/build/main.js",
   "packageManager": "[email protected]",
   "scripts": {
+    "test:unit": "jest --config jest.config.js",
+    "test:e2e": "npx playwright test",
     "clean": "rimraf .vite dist out",
     "clean:assets": "rimraf assets/.env assets/ComfyUI assets/python.tgz & yarn run clean:assets:dev",
     "clean:assets:dev": "rimraf assets/python assets/override.txt & rimraf assets/cpython*.tar.gz & rimraf assets/requirements.*",
@@ -43,9 +45,11 @@
     "@electron/fuses": "^1.8.0",
     "@electron/notarize": "^2.4.0",
     "@electron/windows-sign": "^1.1.3",
+    "@playwright/test": "^1.47.2",
     "@sentry/wizard": "^3.30.0",
     "@types/adm-zip": "^0.5.5",
     "@types/electron-squirrel-startup": "^1.0.2",
+    "@types/jest": "^29.5.13",
     "@types/node": "^22.5.0",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
@@ -57,6 +61,7 @@
     "eslint-plugin-import": "^2.25.0",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.0.0",
     "typescript": "~5.5.4",
     "vite": "^5.0.12"
@@ -75,6 +80,7 @@
     "dotenv": "^16.4.5",
     "electron-log": "^5.2.0",
     "electron-squirrel-startup": "^1.0.1",
+    "jest": "^29.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tar": "^7.4.3",

playwright.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testMatch: 'src/__tests__/e2e/*.test.ts',
+});

src/__tests__/e2e/startup.test.ts

@@ -0,0 +1,20 @@
+import { test, _electron as electron, expect } from '@playwright/test';
+
+test('launch app', async () => {
+  const electronApp = await electron.launch({ args: ['.'] });
+
+  const isPackaged = await electronApp.evaluate(async ({ app }) => {
+    // This runs in Electron's main process, parameter here is always
+    // the result of the require('electron') in the main app script.
+    return app.isPackaged;
+  });
+
+  expect(isPackaged).toBe(false);
+
+  // Wait for the first BrowserWindow to open
+  // and return its Page object
+  const window = await electronApp.firstWindow();
+  await expect(window).toHaveScreenshot('startup.png');
+
+  await electronApp.close();
+});

src/__tests__/unit/main.test.ts

@@ -0,0 +1,94 @@
+import { expect, jest, describe, it } from '@jest/globals';
+import { createWindow } from '../../main';
+import { BrowserWindow } from 'electron';
+
+global.MAIN_WINDOW_VITE_DEV_SERVER_URL = 'http://localhost:5173';
+global.MAIN_WINDOW_VITE_NAME = 'index.html';
+
+jest.mock('node:path', () => ({
+  join: jest.fn((...args) => {
+    return 'preload.js';
+  }),
+}));
+
+jest.mock('tar', () => ({
+  extract: jest.fn(),
+}));
+jest.mock('axios');
+jest.mock('fs');
+jest.mock('node:fs/promises');
+// Mock the entire electron module
+jest.mock('electron', () => ({
+  app: {
+    isPackaged: false,
+    isReady: true,
+    on: jest.fn(),
+    getPath: jest.fn(),
+  },
+  BrowserWindow: jest.fn().mockImplementation((options) => {
+    return {
+      loadURL: jest.fn(),
+      on: jest.fn(),
+      webContents: {
+        openDevTools: jest.fn(),
+      },
+    };
+  }),
+  ipcMain: {
+    on: jest.fn(),
+    handle: jest.fn(),
+  },
+  screen: {
+    getPrimaryDisplay: jest.fn().mockReturnValue({
+      workAreaSize: { width: 1920, height: 1080 },
+    }),
+  },
+  // Add this line to mock Tray
+  Tray: jest.fn().mockImplementation(() => ({
+    setToolTip: jest.fn(),
+    setContextMenu: jest.fn(),
+    on: jest.fn(),
+    setPressedImage: jest.fn(),
+  })),
+  // Add this line to mock Menu
+  Menu: {
+    buildFromTemplate: jest.fn().mockReturnValue({
+      items: [],
+    }),
+  },
+  // Mock other Electron modules if necessary
+}));
+
+jest.mock('electron-log/main', () => ({
+  initialize: jest.fn(),
+  info: jest.fn(),
+  error: jest.fn(),
+  // Add other methods you might use from electron-log
+}));
+
+// Mock the update-electron-app module
+jest.mock('update-electron-app', () => ({
+  updateElectronApp: jest.fn(),
+  UpdateSourceType: {
+    StaticStorage: 'StaticStorage',
+  },
+}));
+
+describe('createWindow', () => {
+  it('should create a new BrowserWindow with correct options', async () => {
+    const window = await createWindow();
+
+    expect(BrowserWindow).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'ComfyUI',
+        webPreferences: expect.objectContaining({
+          preload: expect.stringContaining('preload.js'),
+          nodeIntegration: true,
+          contextIsolation: true,
+        }),
+        autoHideMenuBar: true,
+      })
+    );
+    expect(window.loadURL).toHaveBeenCalled();
+  });
+});

src/main.ts

@@ -67,7 +67,7 @@ const port = 8188; // Replace with the port number your server is running on
 let mainWindow: BrowserWindow | null;
 const messageQueue: Array<any> = []; // Stores mesaages before renderer is ready.
 
-const createWindow = async () => {
+export const createWindow = async (): Promise<BrowserWindow> => {
   const primaryDisplay = screen.getPrimaryDisplay();
   const { width, height } = primaryDisplay.workAreaSize;
   mainWindow = new BrowserWindow({
@@ -116,6 +116,7 @@ const createWindow = async () => {
   });
   // Open the DevTools.
   // mainWindow.webContents.openDevTools();
+  return mainWindow;
 };
 
 // Server Heartbeat Listener Variables

tsconfig.json

@@ -14,5 +14,5 @@
     "resolveJsonModule": true
   },
   "exclude": [".history", ".vite", "assets", "dist", "node_modules", "out"],
-  "include": ["src/*.ts", "forge.env.d.ts"]
+  "include": ["src/**/*", "forge.env.d.ts", "global.d.ts"]
 }