mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-23 06:10:32 +00:00
4a05d89fdb
## Summary Fixes leaked event listeners ## Changes - **What**: - update all listeners to use AbortController to signal removal on widget remove ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11724-fix-detach-DOM-widget-event-listeners-on-widget-removal-3506d73d3650811dae81c034c1098759) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { afterEach, describe, expect, it, onTestFinished, vi } from 'vitest'
|
|
|
|
import { useNodeVideo } from '@/composables/node/useNodeImage'
|
|
import { createMockMediaNode } from '@/renderer/extensions/vueNodes/widgets/composables/domWidgetTestUtils'
|
|
|
|
const { canvasInteractionsMock, nodeOutputStoreMock } = vi.hoisted(() => ({
|
|
canvasInteractionsMock: {
|
|
handleWheel: vi.fn(),
|
|
handlePointer: vi.fn()
|
|
},
|
|
nodeOutputStoreMock: {
|
|
getNodeImageUrls: vi.fn<(node: unknown) => string[] | undefined>()
|
|
}
|
|
}))
|
|
|
|
vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
|
|
useCanvasInteractions: () => canvasInteractionsMock
|
|
}))
|
|
vi.mock('@/stores/nodeOutputStore', () => ({
|
|
useNodeOutputStore: () => nodeOutputStoreMock
|
|
}))
|
|
vi.mock('@/utils/imageUtil', () => ({
|
|
fitDimensionsToNodeWidth: () => ({ minHeight: 256, minWidth: 256 })
|
|
}))
|
|
|
|
describe('useNodeVideo', () => {
|
|
afterEach(() => {
|
|
vi.useRealTimers()
|
|
vi.restoreAllMocks()
|
|
})
|
|
|
|
async function setup() {
|
|
vi.clearAllMocks()
|
|
vi.useFakeTimers()
|
|
|
|
nodeOutputStoreMock.getNodeImageUrls.mockReturnValue(['http://video/1.mp4'])
|
|
const node = createMockMediaNode({
|
|
size: [400, 400],
|
|
graph: { setDirtyCanvas: vi.fn() }
|
|
})
|
|
|
|
const createdVideos: HTMLVideoElement[] = []
|
|
const realCreateElement = document.createElement.bind(document)
|
|
vi.spyOn(document, 'createElement').mockImplementation(
|
|
(tag: string, opts?: ElementCreationOptions) => {
|
|
const el = realCreateElement(tag, opts)
|
|
if (tag === 'video') createdVideos.push(el as HTMLVideoElement)
|
|
return el
|
|
}
|
|
)
|
|
|
|
const { showPreview } = useNodeVideo(node)
|
|
showPreview()
|
|
|
|
// happy-dom does not auto-fire onloadeddata for src assignment, so we
|
|
// manually trigger it, then drain the resulting promise chain.
|
|
const video = createdVideos[0]
|
|
video.onloadeddata?.(new Event('loadeddata'))
|
|
await vi.runAllTimersAsync()
|
|
|
|
onTestFinished(() => {
|
|
node.widgets[0]?.onRemove?.()
|
|
})
|
|
|
|
return { node, video }
|
|
}
|
|
|
|
it('creates a video-preview widget and forwards canvas events while alive', async () => {
|
|
const { node, video } = await setup()
|
|
|
|
expect(node.widgets[0]?.name).toBe('video-preview')
|
|
|
|
video.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
|
|
video.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
|
|
video.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
|
|
|
|
expect(canvasInteractionsMock.handleWheel).toHaveBeenCalledTimes(1)
|
|
expect(canvasInteractionsMock.handlePointer).toHaveBeenCalledTimes(2)
|
|
})
|
|
|
|
it('detaches every listener when the widget is removed', async () => {
|
|
const { node, video } = await setup()
|
|
|
|
node.widgets[0]?.onRemove?.()
|
|
|
|
video.dispatchEvent(new WheelEvent('wheel', { bubbles: true }))
|
|
video.dispatchEvent(new PointerEvent('pointermove', { bubbles: true }))
|
|
video.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
|
|
|
|
expect(canvasInteractionsMock.handleWheel).not.toHaveBeenCalled()
|
|
expect(canvasInteractionsMock.handlePointer).not.toHaveBeenCalled()
|
|
})
|
|
})
|