test: add unit test suite for apps/desktop-ui (#11275)

## Summary

This is a follow-up PR of #11102

| Requirement | Status | Implementation |
| :--- | :--- | :--- |
| Add vitest configuration for desktop-ui workspace | ✅ Done | Added
`apps/desktop-ui/vitest.config.mts` with `happy-dom` environment, `@`
alias, and `setupFiles` pointing to `src/test/setup.ts` (registers
`@testing-library/jest-dom` matchers) |
| Add test:unit script to package.json | ✅ Done | Added `"test:unit":
"vitest run --config vitest.config.mts"` to
`apps/desktop-ui/package.json` |
| stores/maintenanceTaskStore.ts | ✅ Done | 34 tests covering task state
machine, IPC integration, executeTask flow, and error handling via
`@pinia/testing` |
| utils/electronMirrorCheck.ts | ✅ Done | 5 tests covering URL
validation, canAccessUrl delegation, and true/false return logic |
| utils/refUtil.ts (useMinLoadingDurationRef) | ✅ Done | 7 tests
covering initial state, timing behavior using `vi.useFakeTimers`, and
computed ref input |
| utils/envUtil.ts | ✅ Done | 7 tests covering electronAPI detection and
fallback behavior |
| constants/desktopDialogs.ts | ✅ Done | 8 tests covering dialog
structure and field contracts |
| constants/desktopMaintenanceTasks.ts | ✅ Done | 5 tests covering
`pythonPackages.execute` success/failure return values, and URL-opening
tasks calling `window.open` |
| composables/bottomPanelTabs/useTerminal.ts | ✅ Done | 7 tests covering
key event handler: Ctrl/Meta+C with/without selection, Ctrl/Meta+V,
non-keydown events, and unrelated keys — mocked xterm with Vitest
v4-compatible function constructors |
| composables/bottomPanelTabs/useTerminalBuffer.ts | ✅ Done | 2 tests
for `copyTo`: verifies serialized buffer content is written to
destination terminal |
| utils/validationUtil.ts | ⛔ Skipped | The current file contains only a
`ValidationState` enum with no logic. There is no behavior to test
without writing a change-detector test (asserting enum values), which
violates project testing guidelines |

**Additional config changes (not in issue but required to make tests
work):**

| Change | Reason |
| :--- | :--- |
| Added `"vitest.config.mts"` to `apps/desktop-ui/tsconfig.json` include
| Required for ESLint's TypeScript parser to process the config file
without a parsing error |
| Removed 6 redundant test devDependencies from
`apps/desktop-ui/package.json` | `vitest`, `@testing-library/*`,
`@pinia/testing`, `happy-dom` are already declared at the root and
hoisted by pnpm — re-declaring them in the sub-package is unnecessary |

## Changes
- Add vitest.config.mts with happy-dom environment and path aliases
- Add src/test/setup.ts to register @testing-library/jest-dom matchers
- Add test:unit script to package.json
- Add vitest.config.mts to tsconfig.json include for ESLint
compatibility
- Remove redundant test devDependencies already declared at root
- Add 132 tests across 16 files covering stores, composables, utils, and
constants

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Test- and config-only changes; main risk is CI/build instability from
new Vitest configuration or brittle mocks, with no runtime behavior
changes shipped to users.
> 
> **Overview**
> Adds a dedicated Vitest setup for `apps/desktop-ui` (new
`vitest.config.mts` using `happy-dom`, aliases, and a `jest-dom` setup
file) and wires it into the workspace via a new `test:unit` script plus
`tsconfig.json` inclusion.
> 
> Introduces a broad set of new unit tests for desktop UI components,
composables, constants, utilities, and the `maintenanceTaskStore`
(mocking Electron/PrimeVue/Xterm as needed) to validate state
transitions, validation flows, and key UI behaviors without changing
production logic.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
0a96ffb37c. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11275-test-add-unit-test-suite-for-apps-desktop-ui-3436d73d36508145ae1fe99ec7a3a4fa)
by [Unito](https://www.unito.io)

apps/desktop-ui/src/components/common/UrlInput.test.ts

@@ -0,0 +1,208 @@
+import { render, screen, waitFor } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import PrimeVue from 'primevue/config'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+vi.mock('@comfyorg/shared-frontend-utils/networkUtil', () => ({
+  checkUrlReachable: vi.fn()
+}))
+
+import { checkUrlReachable } from '@comfyorg/shared-frontend-utils/networkUtil'
+import UrlInput from '@/components/common/UrlInput.vue'
+import { ValidationState } from '@/utils/validationUtil'
+
+const InputTextStub = {
+  props: ['modelValue', 'invalid'],
+  emits: ['update:modelValue', 'blur'],
+  template: `<input
+    data-testid="url-input"
+    :value="modelValue"
+    :data-invalid="invalid"
+    @input="$emit('update:modelValue', $event.target.value)"
+    @blur="$emit('blur')"
+  />`
+}
+
+const InputIconStub = {
+  template: '<span data-testid="input-icon" />'
+}
+
+const IconFieldStub = {
+  template: '<div><slot /></div>'
+}
+
+function renderUrlInput(
+  modelValue = '',
+  validateUrlFn?: (url: string) => Promise<boolean>
+) {
+  return render(UrlInput, {
+    props: { modelValue, ...(validateUrlFn ? { validateUrlFn } : {}) },
+    global: {
+      plugins: [[PrimeVue, { unstyled: true }]],
+      stubs: {
+        InputText: InputTextStub,
+        InputIcon: InputIconStub,
+        IconField: IconFieldStub
+      }
+    }
+  })
+}
+
+describe('UrlInput', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('initial validation on mount', () => {
+    it('stays IDLE when modelValue is empty on mount', async () => {
+      renderUrlInput('')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+      })
+    })
+
+    it('sets VALID state when modelValue is a reachable URL on mount', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(true)
+      renderUrlInput('https://example.com')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+      })
+    })
+
+    it('sets INVALID state when URL is not reachable on mount', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(false)
+      renderUrlInput('https://unreachable.example')
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('true')
+      })
+    })
+  })
+
+  describe('input handling', () => {
+    it('resets validation state to IDLE on user input', async () => {
+      vi.mocked(checkUrlReachable).mockResolvedValue(false)
+      renderUrlInput('https://bad.example')
+
+      await waitFor(() => {
+        expect(screen.getByTestId('url-input').dataset.invalid).toBe('true')
+      })
+
+      const user = userEvent.setup()
+      await user.type(screen.getByTestId('url-input'), 'x')
+      expect(screen.getByTestId('url-input').dataset.invalid).toBe('false')
+    })
+
+    it('strips whitespace from typed input', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: '',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      const input = screen.getByTestId('url-input')
+      await user.type(input, 'htt ps')
+      expect((input as HTMLInputElement).value).not.toContain(' ')
+    })
+  })
+
+  describe('blur handling', () => {
+    it('emits update:modelValue on blur', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('url-input'))
+      await user.tab()
+
+      expect(onUpdate).toHaveBeenCalled()
+    })
+
+    it('normalizes URL on blur', async () => {
+      const onUpdate = vi.fn()
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onUpdate:modelValue': onUpdate
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      const user = userEvent.setup()
+      await user.click(screen.getByTestId('url-input'))
+      await user.tab()
+
+      const emittedUrl = onUpdate.mock.calls[0]?.[0]
+      expect(emittedUrl).toBe('https://example.com/')
+    })
+  })
+
+  describe('custom validateUrlFn', () => {
+    it('uses custom validateUrlFn when provided', async () => {
+      const customValidator = vi.fn().mockResolvedValue(true)
+      renderUrlInput('https://custom.example', customValidator)
+
+      await waitFor(() => {
+        expect(customValidator).toHaveBeenCalledWith('https://custom.example')
+      })
+
+      expect(checkUrlReachable).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('state-change emission', () => {
+    it('emits state-change when validation state changes', async () => {
+      const onStateChange = vi.fn()
+      vi.mocked(checkUrlReachable).mockResolvedValue(true)
+
+      render(UrlInput, {
+        props: {
+          modelValue: 'https://example.com',
+          'onState-change': onStateChange
+        },
+        global: {
+          plugins: [[PrimeVue, { unstyled: true }]],
+          stubs: {
+            InputText: InputTextStub,
+            InputIcon: InputIconStub,
+            IconField: IconFieldStub
+          }
+        }
+      })
+
+      await waitFor(() => {
+        expect(onStateChange).toHaveBeenCalledWith(ValidationState.VALID)
+      })
+    })
+  })
+})