Files
ComfyUI_frontend/tests-ui/tests/base/common/downloadUtil.test.ts
Christian Byrne c145fd9df1 Show node output images on Vue Nodes (#5456)
* add image outputs on Vue nodes

* add unit tests and update cursor pointer

* use testing pinia

* properly mock i18n in component test

* get node via current graph

* use subgraph ID from node creation

* add better error handling for downloadFile util

* refactor: simplify image preview component architecture

- Replace awkward composable pattern with standard Vue component state
- Fix reactivity issues where images didn't update on new outputs
- Add proper subgraph-aware node resolution using NodeLocatorId
- Enhance accessibility with keyboard navigation and ARIA labels
- Add comprehensive error handling and loading states
- Include PrimeVue Skeleton for better loading UX
- Remove unused composable and test files

The image preview now properly updates when new outputs are generated
and follows standard Vue reactivity patterns.

* resolve merge conflict with main

- Keep both subgraphId field and hasErrors field from main
- No conflicts in other files (LGraphNode.vue and main.json merged cleanly)

* Fix LGraphNode test by adding proper Pinia testing setup

Added createTestingPinia and i18n configuration following the pattern
from working ImagePreview tests. Resolves test failures due to missing
Pinia store dependencies. All 6 tests now pass successfully.
2025-09-13 23:34:39 -07:00

117 lines
3.5 KiB
TypeScript

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { downloadFile } from '@/base/common/downloadUtil'
describe('downloadUtil', () => {
let mockLink: HTMLAnchorElement
beforeEach(() => {
// Create a mock anchor element
mockLink = {
href: '',
download: '',
click: vi.fn()
} as unknown as HTMLAnchorElement
// Spy on DOM methods
vi.spyOn(document, 'createElement').mockReturnValue(mockLink)
vi.spyOn(document.body, 'appendChild').mockImplementation(() => mockLink)
vi.spyOn(document.body, 'removeChild').mockImplementation(() => mockLink)
})
afterEach(() => {
vi.restoreAllMocks()
})
describe('downloadFile', () => {
it('should create and trigger download with basic URL', () => {
const testUrl = 'https://example.com/image.png'
downloadFile(testUrl)
expect(document.createElement).toHaveBeenCalledWith('a')
expect(mockLink.href).toBe(testUrl)
expect(mockLink.download).toBe('download.png') // Default filename
expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
expect(mockLink.click).toHaveBeenCalled()
expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
})
it('should use custom filename when provided', () => {
const testUrl = 'https://example.com/image.png'
const customFilename = 'my-custom-image.png'
downloadFile(testUrl, customFilename)
expect(mockLink.href).toBe(testUrl)
expect(mockLink.download).toBe(customFilename)
})
it('should extract filename from URL query parameters', () => {
const testUrl =
'https://example.com/api/file?filename=extracted-image.jpg&other=param'
downloadFile(testUrl)
expect(mockLink.href).toBe(testUrl)
expect(mockLink.download).toBe('extracted-image.jpg')
})
it('should use default filename when URL has no filename parameter', () => {
const testUrl = 'https://example.com/api/file?other=param'
downloadFile(testUrl)
expect(mockLink.href).toBe(testUrl)
expect(mockLink.download).toBe('download.png')
})
it('should handle invalid URLs gracefully', () => {
const invalidUrl = 'not-a-valid-url'
downloadFile(invalidUrl)
expect(mockLink.href).toBe(invalidUrl)
expect(mockLink.download).toBe('download.png')
expect(mockLink.click).toHaveBeenCalled()
})
it('should prefer custom filename over extracted filename', () => {
const testUrl =
'https://example.com/api/file?filename=extracted-image.jpg'
const customFilename = 'custom-override.png'
downloadFile(testUrl, customFilename)
expect(mockLink.download).toBe(customFilename)
})
it('should handle URLs with empty filename parameter', () => {
const testUrl = 'https://example.com/api/file?filename='
downloadFile(testUrl)
expect(mockLink.download).toBe('download.png')
})
it('should handle relative URLs by using window.location.origin', () => {
const relativeUrl = '/api/file?filename=relative-image.png'
downloadFile(relativeUrl)
expect(mockLink.href).toBe(relativeUrl)
expect(mockLink.download).toBe('relative-image.png')
})
it('should clean up DOM elements after download', () => {
const testUrl = 'https://example.com/image.png'
downloadFile(testUrl)
// Verify the element was added and then removed
expect(document.body.appendChild).toHaveBeenCalledWith(mockLink)
expect(document.body.removeChild).toHaveBeenCalledWith(mockLink)
})
})
})