mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 12:42:01 +00:00
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)
This commit is contained in:
97
apps/desktop-ui/src/components/common/StartupDisplay.test.ts
Normal file
97
apps/desktop-ui/src/components/common/StartupDisplay.test.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import { render, screen } from '@testing-library/vue'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
|
||||
import StartupDisplay from '@/components/common/StartupDisplay.vue'
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale: 'en',
|
||||
messages: { en: { g: { logoAlt: 'ComfyUI' } } }
|
||||
})
|
||||
|
||||
const ProgressBarStub = {
|
||||
props: ['mode', 'value', 'showValue'],
|
||||
template:
|
||||
'<div data-testid="progress-bar" :data-mode="mode" :data-value="value" />'
|
||||
}
|
||||
|
||||
function renderDisplay(
|
||||
props: {
|
||||
progressPercentage?: number
|
||||
title?: string
|
||||
statusText?: string
|
||||
hideProgress?: boolean
|
||||
fullScreen?: boolean
|
||||
} = {}
|
||||
) {
|
||||
return render(StartupDisplay, {
|
||||
props,
|
||||
global: {
|
||||
plugins: [[PrimeVue, { unstyled: true }], i18n],
|
||||
stubs: { ProgressBar: ProgressBarStub }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
describe('StartupDisplay', () => {
|
||||
describe('progressMode', () => {
|
||||
it('renders indeterminate mode when progressPercentage is undefined', () => {
|
||||
renderDisplay()
|
||||
expect(screen.getByTestId('progress-bar').dataset.mode).toBe(
|
||||
'indeterminate'
|
||||
)
|
||||
})
|
||||
|
||||
it('renders determinate mode when progressPercentage is provided', () => {
|
||||
renderDisplay({ progressPercentage: 50 })
|
||||
expect(screen.getByTestId('progress-bar').dataset.mode).toBe(
|
||||
'determinate'
|
||||
)
|
||||
})
|
||||
|
||||
it('passes progressPercentage as value to the progress bar', () => {
|
||||
renderDisplay({ progressPercentage: 75 })
|
||||
expect(screen.getByTestId('progress-bar').dataset.value).toBe('75')
|
||||
})
|
||||
})
|
||||
|
||||
describe('hideProgress', () => {
|
||||
it('hides the progress bar when hideProgress is true', () => {
|
||||
renderDisplay({ hideProgress: true })
|
||||
expect(screen.queryByTestId('progress-bar')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows the progress bar by default', () => {
|
||||
renderDisplay()
|
||||
expect(screen.getByTestId('progress-bar')).toBeDefined()
|
||||
})
|
||||
})
|
||||
|
||||
describe('title', () => {
|
||||
it('renders the title text when provided', () => {
|
||||
renderDisplay({ title: 'Loading...' })
|
||||
expect(screen.getByText('Loading...')).toBeDefined()
|
||||
})
|
||||
|
||||
it('does not render h1 when title is not provided', () => {
|
||||
renderDisplay()
|
||||
expect(screen.queryByRole('heading', { level: 1 })).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('statusText', () => {
|
||||
it('renders statusText with data-testid attribute', () => {
|
||||
renderDisplay({ statusText: 'Starting server' })
|
||||
expect(screen.getByTestId('startup-status-text').textContent).toContain(
|
||||
'Starting server'
|
||||
)
|
||||
})
|
||||
|
||||
it('does not render statusText element when not provided', () => {
|
||||
renderDisplay()
|
||||
expect(screen.queryByTestId('startup-status-text')).toBeNull()
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user