lint: add tsconfig for browser_tests, fix existing violations (#5633)

## Summary

See https://typescript-eslint.io/blog/project-service/ for context.
Creates a browser_tests specific tsconfig so that they can be linted.

Does not add a package.json script to do the linting yet, but `pnpm exec
eslint browser_tests` should work for now.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5633-lint-add-tsconfig-for-browser_tests-fix-existing-violations-2726d73d3650819d8ef2c4b0abc31e14)
by [Unito](https://www.unito.io)

tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -1,5 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'

tests-ui/tests/components/dialog/footer/ManagerProgressFooter.test.ts

@@ -14,7 +14,7 @@ import {
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { TaskLog } from '@/types/comfyManagerTypes'
+import type { TaskLog } from '@/types/comfyManagerTypes'
 
 // Mock modules
 vi.mock('@/stores/comfyManagerStore')

tests-ui/tests/composables/canvas/useSelectedLiteGraphItems.test.ts

@@ -2,12 +2,8 @@ import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
-import {
-  LGraphEventMode,
-  LGraphNode,
-  Positionable,
-  Reroute
-} from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
+import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 

tests-ui/tests/composables/useManagerQueue.test.ts

@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import { useManagerQueue } from '@/composables/useManagerQueue'
-import { components } from '@/types/generatedManagerTypes'
+import type { components } from '@/types/generatedManagerTypes'
 
 // Mock dialog service
 vi.mock('@/services/dialogService', () => ({

tests-ui/tests/composables/useNodeChatHistory.test.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 vi.mock(
   '@/renderer/extensions/vueNodes/widgets/composables/useChatHistoryWidget',

tests-ui/tests/composables/useServerLogs.test.ts

@@ -3,7 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import { useServerLogs } from '@/composables/useServerLogs'
-import { LogsWsMessage } from '@/schemas/apiSchema'
+import type { LogsWsMessage } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 
 vi.mock('@/scripts/api', () => ({

tests-ui/tests/litegraph/canvas/LinkConnectorSubgraphInputValidation.test.ts

@@ -5,7 +5,7 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { MovingOutputLink } from '@/lib/litegraph/src/litegraph'
 import { ToOutputRenderLink } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, LLink } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
 
 import { createTestSubgraph } from '../subgraph/fixtures/subgraphHelpers'
 

tests-ui/tests/litegraph/core/LGraphNode.titleButtons.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 describe('LGraphNode Title Buttons', () => {

tests-ui/tests/litegraph/core/LinkConnector.integration.test.ts

@@ -1,13 +1,12 @@
 // TODO: Fix these tests after migration
 import { afterEach, describe, expect, vi } from 'vitest'
 
+import type { LGraph, Reroute } from '@/lib/litegraph/src/litegraph'
 import {
   type CanvasPointerEvent,
-  LGraph,
   LGraphNode,
   LLink,
   LinkConnector,
-  Reroute,
   type RerouteId
 } from '@/lib/litegraph/src/litegraph'
 

tests-ui/tests/litegraph/core/NodeSlot.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
-import { INodeInputSlot, INodeOutputSlot } from '@/lib/litegraph/src/litegraph'
+import type {
+  INodeInputSlot,
+  INodeOutputSlot
+} from '@/lib/litegraph/src/litegraph'
 import {
   inputAsSerialisable,
   outputAsSerialisable

tests-ui/tests/litegraph/subgraph/SubgraphConversion.test.ts

@@ -1,9 +1,8 @@
 // TODO: Fix these tests after migration
 import { assert, describe, expect, it } from 'vitest'
 
+import type { ISlotType, LGraph } from '@/lib/litegraph/src/litegraph'
 import {
-  ISlotType,
-  LGraph,
   LGraphGroup,
   LGraphNode,
   LiteGraph

tests-ui/tests/litegraph/subgraph/SubgraphNode.titleButton.test.ts

@@ -2,7 +2,7 @@
 import { describe, expect, it, vi } from 'vitest'
 
 import { LGraphButton } from '@/lib/litegraph/src/litegraph'
-import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 import {
   createTestSubgraph,

tests-ui/tests/litegraph/subgraph/SubgraphSlotConnections.test.ts

@@ -5,8 +5,8 @@ import { LinkConnector } from '@/lib/litegraph/src/litegraph'
 import { ToInputFromIoNodeLink } from '@/lib/litegraph/src/litegraph'
 import { SUBGRAPH_INPUT_ID } from '@/lib/litegraph/src/litegraph'
 import { LGraphNode, type LinkNetwork } from '@/lib/litegraph/src/litegraph'
-import { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
-import { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeInputSlot } from '@/lib/litegraph/src/litegraph'
+import type { NodeOutputSlot } from '@/lib/litegraph/src/litegraph'
 import {
   isSubgraphInput,
   isSubgraphOutput

tests-ui/tests/litegraph/subgraph/SubgraphWidgetPromotion.test.ts

@@ -1,8 +1,8 @@
 // TODO: Fix these tests after migration
 import { describe, expect, it } from 'vitest'
 
-import type { ISlotType } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
+import type { ISlotType, Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { TWidgetType } from '@/lib/litegraph/src/litegraph'
 import { BaseWidget } from '@/lib/litegraph/src/litegraph'
 

tests-ui/tests/litegraph/subgraph/fixtures/subgraphFixtures.ts

@@ -5,8 +5,9 @@
  * in their test files. Each fixture provides a clean, pre-configured subgraph
  * setup for different testing scenarios.
  */
-import { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { Subgraph } from '@/lib/litegraph/src/litegraph'
+import { LGraph } from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
 
 import { test } from '../../core/fixtures/testExtensions'
 import {

tests-ui/tests/nodeSearchService.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 import { NodeSearchService } from '@/services/nodeSearchService'
 import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 

tests-ui/tests/renderer/extensions/vueNodes/composables/useNodeEventHandlers.test.ts

@@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import type { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { LGraphCanvas, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'

tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { useRemoteWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget'
-import { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
+import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 
 vi.mock('axios', () => {
   return {

tests-ui/tests/renderer/thumbnail/composables/useWorkflowThumbnail.spec.ts

@@ -1,10 +1,8 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 
 vi.mock('@/renderer/core/thumbnail/graphThumbnailRenderer', () => ({
   createGraphThumbnail: vi.fn()

tests-ui/tests/store/comfyManagerStore.test.ts

@@ -4,7 +4,7 @@ import { nextTick, ref } from 'vue'
 
 import { useComfyManagerService } from '@/services/comfyManagerService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type InstalledPacksResponse =
   ManagerComponents['schemas']['InstalledPacksResponse']

tests-ui/tests/store/imagePreviewStore.test.ts

@@ -1,8 +1,8 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { ExecutedWsMessage } from '@/schemas/apiSchema'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import * as litegraphUtil from '@/utils/litegraphUtil'

tests-ui/tests/store/serverConfigStore.test.ts

@@ -1,7 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it } from 'vitest'
 
-import { ServerConfig } from '@/constants/serverConfig'
+import type { ServerConfig } from '@/constants/serverConfig'
 import type { FormItem } from '@/platform/settings/types'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 

tests-ui/tests/store/workflowStore.test.ts

@@ -3,9 +3,11 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 import type { Subgraph } from '@/lib/litegraph/src/litegraph'
-import {
+import type {
   ComfyWorkflow,
-  LoadedComfyWorkflow,
+  LoadedComfyWorkflow
+} from '@/platform/workflow/management/stores/workflowStore'
+import {
   useWorkflowBookmarkStore,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'

tests-ui/tests/utils/litegraphUtil.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
+import type { ISerialisedGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { IWidget } from '@/lib/litegraph/src/types/widgets'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import {

tests-ui/tests/utils/treeUtilTest.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { TreeNode } from '@/types/treeExplorerTypes'
+import type { TreeNode } from '@/types/treeExplorerTypes'
 import { buildTree, sortedTree } from '@/utils/treeUtil'
 
 describe('buildTree', () => {