Split jest tests into fast and slow groups (#1401)

jest.config.base.ts

@@ -14,15 +14,14 @@ const jestConfig: JestConfigWithTsJest = {
       }
     ]
   },
-  setupFiles: ['./tests-ui/globalSetup.ts'],
-  setupFilesAfterEnv: ['./tests-ui/afterSetup.ts'],
-  clearMocks: true,
-  resetModules: true,
-  testTimeout: 10000,
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
-  }
+  },
+  clearMocks: true,
+  resetModules: true,
+  setupFiles: ['./tests-ui/tests/globalSetup.ts'],
+  setupFilesAfterEnv: ['./tests-ui/tests/afterSetup.ts']
 }
 
 export default jestConfig

jest.config.fast.ts

@@ -0,0 +1,12 @@
+import type { JestConfigWithTsJest } from 'ts-jest'
+import baseConfig from './jest.config.base'
+
+const jestConfig: JestConfigWithTsJest = {
+  ...baseConfig,
+  displayName: 'fast',
+  setupFiles: ['./tests-ui/tests/fast/globalSetup.ts'],
+  setupFilesAfterEnv: undefined,
+  testMatch: ['**/tests-ui/tests/fast/**/*.test.ts']
+}
+
+export default jestConfig

jest.config.slow.ts

@@ -0,0 +1,11 @@
+import type { JestConfigWithTsJest } from 'ts-jest'
+import baseConfig from './jest.config.base'
+
+const jestConfig: JestConfigWithTsJest = {
+  ...baseConfig,
+  displayName: 'slow (DOM)',
+  testTimeout: 10000,
+  testMatch: ['**/tests-ui/tests/slow/**/*.test.ts']
+}
+
+export default jestConfig

package.json

@@ -11,7 +11,9 @@
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "tsc --noEmit && tsc-strict",
     "format": "prettier --write './**/*.{js,ts,tsx,vue}'",
-    "test": "npm run build && jest",
+    "test": "jest --config jest.config.base.ts",
+    "test:jest:fast": "jest --config jest.config.fast.ts",
+    "test:jest:slow": "jest --config jest.config.slow.ts",
     "test:generate:examples": "npx tsx tests-ui/extractExamples",
     "test:generate": "npx tsx tests-ui/setup",
     "test:browser": "npx playwright test",

tests-ui/tests/afterSetup.ts

@@ -1,5 +1,5 @@
-import { start } from './utils'
-import lg from './utils/litegraph'
+import { start } from '../utils'
+import lg from '../utils/litegraph'
 
 // Load things once per test file before to ensure its all warmed up for the tests
 beforeAll(async () => {

tests-ui/tests/fast/comfyWorkflow.test.ts

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-import { validateComfyWorkflow } from '../../src/types/comfyWorkflow'
-import { defaultGraph } from '../../src/scripts/defaultGraph'
+import { validateComfyWorkflow } from '@/types/comfyWorkflow'
+import { defaultGraph } from '@/scripts/defaultGraph'
 import fs from 'fs'
 
 const WORKFLOW_DIR = 'tests-ui/workflows'

tests-ui/tests/fast/globalSetup.ts

@@ -0,0 +1,22 @@
+module.exports = async function () {
+  jest.mock('@/services/dialogService', () => {
+    return {
+      showLoadWorkflowWarning: jest.fn(),
+      showMissingModelsWarning: jest.fn(),
+      showSettingsDialog: jest.fn(),
+      showExecutionErrorDialog: jest.fn(),
+      showTemplateWorkflowsDialog: jest.fn(),
+      showPromptDialog: jest
+        .fn()
+        .mockImplementation((message, defaultValue) => {
+          return Promise.resolve(defaultValue)
+        })
+    }
+  })
+
+  jest.mock('vue-i18n', () => {
+    return {
+      useI18n: jest.fn()
+    }
+  })
+}

tests-ui/tests/fast/store/modelStore.test.ts

@@ -90,7 +90,9 @@ describe('useModelStore', () => {
   it('should cache model information', async () => {
     enableMocks()
     await store.loadModelFolders()
+    expect(api.getModels).toHaveBeenCalledTimes(0)
     await store.getLoadedModelFolder('checkpoints')
+    expect(api.getModels).toHaveBeenCalledTimes(1)
     await store.getLoadedModelFolder('checkpoints')
     expect(api.getModels).toHaveBeenCalledTimes(1)
   })

tests-ui/tests/globalSetup.ts

@@ -6,7 +6,7 @@ module.exports = async function () {
     disconnect() {}
   }
 
-  const { nop } = require('./utils/nopProxy')
+  const { nop } = require('../utils/nopProxy')
   global.enableWebGLCanvas = nop
 
   HTMLCanvasElement.prototype.getContext = nop

tests-ui/tests/slow/exampleWorkflows.test.ts

@@ -1,7 +1,7 @@
 import { readdirSync, readFileSync } from 'fs'
-import lg from '../utils/litegraph'
+import lg from '../../utils/litegraph'
 import path from 'path'
-import { start } from '../utils'
+import { start } from '../../utils'
 
 const WORKFLOW_DIR = 'tests-ui/workflows/examples'
 

tests-ui/tests/slow/extensions.test.ts

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-import { start } from '../utils'
-import lg from '../utils/litegraph'
+import { start } from '../../utils'
+import lg from '../../utils/litegraph'
 
 describe('extensions', () => {
   beforeEach(() => {

tests-ui/tests/slow/groupNode.test.ts

@@ -1,13 +1,12 @@
 // @ts-strict-ignore
-import { createPinia, setActivePinia } from 'pinia'
 import {
   start,
   createDefaultWorkflow,
   getNodeDef,
   checkBeforeAndAfterReload
-} from '../utils'
-import { EzNode } from '../utils/ezgraph'
-import lg from '../utils/litegraph'
+} from '../../utils'
+import { EzNode } from '../../utils/ezgraph'
+import lg from '../../utils/litegraph'
 
 describe('group node', () => {
   beforeEach(() => {
@@ -567,7 +566,7 @@ describe('group node', () => {
       nodes.save
     ])
 
-    const { api } = await import('../../src/scripts/api')
+    const { api } = await import('../../../src/scripts/api')
 
     api.dispatchEvent(new CustomEvent('execution_start', {}))
     api.dispatchEvent(

tests-ui/tests/slow/store/keybindingStore.test.ts

@@ -1,8 +1,5 @@
 import { setActivePinia, createPinia } from 'pinia'
-import {
-  useKeybindingStore,
-  KeybindingImpl
-} from '../../../src/stores/keybindingStore'
+import { useKeybindingStore, KeybindingImpl } from '@/stores/keybindingStore'
 
 describe('useKeybindingStore', () => {
   beforeEach(() => {

tests-ui/tests/slow/users.test.ts

@@ -1,6 +1,6 @@
 // @ts-strict-ignore
-import { start } from '../utils'
-import lg from '../utils/litegraph'
+import { start } from '../../utils'
+import lg from '../../utils/litegraph'
 
 describe('users', () => {
   beforeEach(() => {
@@ -21,14 +21,14 @@ describe('users', () => {
 
   describe('multi-user', () => {
     async function mockAddStylesheet() {
-      const utils = await import('../../src/scripts/utils')
+      const utils = await import('../../../src/scripts/utils')
       utils.addStylesheet = jest.fn().mockReturnValue(Promise.resolve())
     }
 
     async function waitForUserScreenShow() {
       // Wait for "show" to be called
       const { UserSelectionScreen } = await import(
-        '../../src/scripts/ui/userSelection'
+        '../../../src/scripts/ui/userSelection'
       )
       let resolve, reject
       const fn = UserSelectionScreen.prototype.show
@@ -91,7 +91,7 @@ describe('users', () => {
       expect(window.getComputedStyle(menu)?.display).not.toBe('none')
 
       // Ensure settings + templates are saved
-      const { api } = await import('../../src/scripts/api')
+      const { api } = await import('../../../src/scripts/api')
       expect(api.createUser).toHaveBeenCalledTimes(+isCreate)
       expect(api.storeSettings).toHaveBeenCalledTimes(+isCreate)
       expect(api.storeUserData).toHaveBeenCalledTimes(+isCreate)
@@ -234,7 +234,7 @@ describe('users', () => {
       expectNoUserScreen()
 
       // It should store the settings
-      const { api } = await import('../../src/scripts/api')
+      const { api } = await import('../../../src/scripts/api')
       expect(api.storeSettings).toHaveBeenCalledTimes(1)
       expect(api.storeUserData).toHaveBeenCalledTimes(1)
       expect(api.storeUserData).toHaveBeenCalledWith(
@@ -252,7 +252,7 @@ describe('users', () => {
       expectNoUserScreen()
 
       // It should store the settings
-      const { api } = await import('../../src/scripts/api')
+      const { api } = await import('../../../src/scripts/api')
       expect(api.storeSettings).toHaveBeenCalledTimes(0)
       expect(api.storeUserData).toHaveBeenCalledTimes(0)
       expect(app.isNewUserSession).toBeFalsy()
@@ -276,7 +276,7 @@ describe('users', () => {
       expectNoUserScreen()
 
       // It should store the settings
-      const { api } = await import('../../src/scripts/api')
+      const { api } = await import('../../../src/scripts/api')
       expect(api.storeSettings).toHaveBeenCalledTimes(0)
       expect(api.storeUserData).toHaveBeenCalledTimes(0)
       expect(app.isNewUserSession).toBeFalsy()
@@ -289,7 +289,7 @@ describe('users', () => {
       expectNoUserScreen()
 
       // It should store the settings
-      const { api } = await import('../../src/scripts/api')
+      const { api } = await import('../../../src/scripts/api')
       expect(api.storeSettings).toHaveBeenCalledTimes(0)
       expect(api.storeUserData).toHaveBeenCalledTimes(0)
       expect(app.isNewUserSession).toBeFalsy()

tests-ui/tests/slow/widgetInputs.test.ts

@@ -5,8 +5,8 @@ import {
   checkBeforeAndAfterReload,
   assertNotNullOrUndefined,
   createDefaultWorkflow
-} from '../utils'
-import lg from '../utils/litegraph'
+} from '../../utils'
+import lg from '../../utils/litegraph'
 
 /**
  * @typedef { import("../utils/ezgraph") } Ez