test: cover composables, renderer and util helpers

src/composables/canvas/useSelectionToolboxPosition.test.ts

@@ -34,17 +34,22 @@ describe('useSelectionToolboxPosition', () => {
     canvasStore = useCanvasStore()
   })
 
-  function renderToolboxForSelection(item: Positionable) {
+  function renderToolboxForSelection(
+    items: Iterable<Positionable>,
+    state: Partial<LGraphCanvas['state']> = {},
+    ds: Partial<LGraphCanvas['ds']> = {}
+  ) {
     canvasStore.canvas = markRaw({
       canvas: document.createElement('canvas'),
       ds: {
-        offset: [0, 0],
-        scale: 1
+        offset: ds.offset ?? [0, 0],
+        scale: ds.scale ?? 1
       },
-      selectedItems: new Set([item]),
+      selectedItems: new Set(items),
       state: {
         draggingItems: false,
-        selectionChanged: true
+        selectionChanged: true,
+        ...state
       }
     } as Partial<LGraphCanvas> as LGraphCanvas)
 
@@ -69,7 +74,7 @@ describe('useSelectionToolboxPosition', () => {
     group.pos = [100, 200]
     group.size = [160, 80]
 
-    const { toolbox, unmount } = renderToolboxForSelection(group)
+    const { toolbox, unmount } = renderToolboxForSelection([group])
 
     expect(toolbox.style.getPropertyValue('--tb-y')).toBe('190px')
     unmount()
@@ -81,11 +86,64 @@ describe('useSelectionToolboxPosition', () => {
     node.pos = [100, 200]
     node.size = [160, 80]
 
-    const { toolbox, unmount } = renderToolboxForSelection(node)
+    const { toolbox, unmount } = renderToolboxForSelection([node])
 
     expect(toolbox.style.getPropertyValue('--tb-y')).toBe(
       `${190 - LiteGraph.NODE_TITLE_HEIGHT}px`
     )
     unmount()
   })
+
+  it('does not set coordinates when selection is empty', () => {
+    const { toolbox, unmount } = renderToolboxForSelection([])
+
+    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('')
+    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('')
+    unmount()
+  })
+
+  it('does not set coordinates while selected items are being dragged', () => {
+    const group = new LGraphGroup('Group', 1)
+    group.pos = [100, 200]
+    group.size = [160, 80]
+
+    const { toolbox, unmount } = renderToolboxForSelection([group], {
+      draggingItems: true
+    })
+
+    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('')
+    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('')
+    unmount()
+  })
+
+  it('positions multiple selected items from their union bounds', () => {
+    const first = new LGraphGroup('First', 1)
+    first.pos = [100, 200]
+    first.size = [100, 40]
+    const second = new LGraphGroup('Second', 2)
+    second.pos = [300, 260]
+    second.size = [50, 40]
+
+    const { toolbox, unmount } = renderToolboxForSelection([first, second])
+
+    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('270px')
+    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('190px')
+    unmount()
+  })
+
+  it('applies canvas scale and offset to screen coordinates', () => {
+    const group = new LGraphGroup('Group', 1)
+    group.pos = [100, 200]
+    group.size = [100, 40]
+
+    const { toolbox, unmount } = renderToolboxForSelection(
+      [group],
+      {},
+      { offset: [10, 20], scale: 2 }
+    )
+
+    expect(toolbox.style.getPropertyValue('--tb-x')).toBe('360px')
+    expect(toolbox.style.getPropertyValue('--tb-y')).toBe('420px')
+    unmount()
+  })
 })

src/composables/graph/useImageMenuOptions.test.ts

@@ -1,6 +1,7 @@
 import { fromPartial } from '@total-typescript/shoehorn'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { downloadFile, openFileInNewTab } from '@/base/common/downloadUtil'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
 import { useImageMenuOptions } from './useImageMenuOptions'
@@ -19,6 +20,11 @@ vi.mock('@/stores/commandStore', () => ({
   useCommandStore: () => ({ execute: vi.fn() })
 }))
 
+vi.mock('@/base/common/downloadUtil', () => ({
+  downloadFile: vi.fn(),
+  openFileInNewTab: vi.fn()
+}))
+
 function mockClipboard(clipboard: Partial<Clipboard> | undefined) {
   Object.defineProperty(navigator, 'clipboard', {
     value: clipboard,
@@ -27,6 +33,15 @@ function mockClipboard(clipboard: Partial<Clipboard> | undefined) {
   })
 }
 
+function stubClipboardItem() {
+  vi.stubGlobal(
+    'ClipboardItem',
+    class ClipboardItemStub {
+      constructor(public readonly items: Record<string, Blob>) {}
+    }
+  )
+}
+
 function createImageNode(
   overrides: Partial<LGraphNode> | Record<string, unknown> = {}
 ): LGraphNode {
@@ -45,8 +60,13 @@ function createImageNode(
 }
 
 describe('useImageMenuOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
   afterEach(() => {
     vi.restoreAllMocks()
+    vi.unstubAllGlobals()
   })
 
   describe('getImageMenuOptions', () => {
@@ -182,4 +202,147 @@ describe('useImageMenuOptions', () => {
       expect(node.pasteFiles).not.toHaveBeenCalled()
     })
   })
+
+  describe('image actions', () => {
+    it('opens the selected image without preview query params', () => {
+      const node = createImageNode()
+      node.imgs![0].src = 'http://localhost/test.png?preview=1&foo=bar'
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const openOption = getImageMenuOptions(node).find(
+        (o) => o.label === 'Open Image'
+      )
+      openOption?.action?.()
+
+      expect(openFileInNewTab).toHaveBeenCalledWith(
+        'http://localhost/test.png?foo=bar'
+      )
+    })
+
+    it('saves the selected image without preview query params', () => {
+      const node = createImageNode()
+      node.imgs![0].src = 'http://localhost/test.png?preview=1&foo=bar'
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const saveOption = getImageMenuOptions(node).find(
+        (o) => o.label === 'Save Image'
+      )
+      saveOption?.action?.()
+
+      expect(downloadFile).toHaveBeenCalledWith(
+        'http://localhost/test.png?foo=bar'
+      )
+    })
+
+    it('does not open or save when the active image is missing', () => {
+      const node = createImageNode({ imageIndex: 1 })
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const openOption = options.find((o) => o.label === 'Open Image')
+      const saveOption = options.find((o) => o.label === 'Save Image')
+
+      expect(openOption?.action).toEqual(expect.any(Function))
+      expect(saveOption?.action).toEqual(expect.any(Function))
+
+      openOption?.action?.()
+      saveOption?.action?.()
+
+      expect(openFileInNewTab).not.toHaveBeenCalled()
+      expect(downloadFile).not.toHaveBeenCalled()
+    })
+
+    it('logs save failures for invalid image URLs', () => {
+      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+      const node = createImageNode()
+      Object.defineProperty(node.imgs![0], 'src', {
+        value: 'http://[',
+        configurable: true
+      })
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      getImageMenuOptions(node)
+        .find((o) => o.label === 'Save Image')
+        ?.action?.()
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Failed to save image:',
+        expect.any(TypeError)
+      )
+      expect(downloadFile).not.toHaveBeenCalled()
+    })
+
+    it('copies the selected image to clipboard', async () => {
+      const node = createImageNode()
+      const drawImage = vi.fn()
+      const write = vi.fn().mockResolvedValue(undefined)
+      stubClipboardItem()
+      mockClipboard(fromPartial<Clipboard>({ write }))
+      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
+        (() =>
+          fromPartial<CanvasRenderingContext2D>({
+            drawImage
+          })) as unknown as HTMLCanvasElement['getContext']
+      )
+      vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
+        (callback: BlobCallback) => {
+          callback(new Blob(['image'], { type: 'image/png' }))
+        }
+      )
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      await getImageMenuOptions(node)
+        .find((o) => o.label === 'Copy Image')
+        ?.action?.()
+
+      expect(drawImage).toHaveBeenCalledWith(node.imgs![0], 0, 0)
+      expect(write).toHaveBeenCalledWith([
+        expect.objectContaining({
+          items: { 'image/png': expect.any(Blob) }
+        })
+      ])
+    })
+
+    it('does not copy when canvas context is unavailable', async () => {
+      const node = createImageNode()
+      const write = vi.fn()
+      mockClipboard(fromPartial<Clipboard>({ write }))
+      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
+        (() => null) as HTMLCanvasElement['getContext']
+      )
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      await getImageMenuOptions(node)
+        .find((o) => o.label === 'Copy Image')
+        ?.action?.()
+
+      expect(write).not.toHaveBeenCalled()
+    })
+
+    it('does not copy when canvas blob creation fails', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+      const node = createImageNode()
+      const write = vi.fn()
+      mockClipboard(fromPartial<Clipboard>({ write }))
+      vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
+        (() =>
+          fromPartial<CanvasRenderingContext2D>({
+            drawImage: vi.fn()
+          })) as unknown as HTMLCanvasElement['getContext']
+      )
+      vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
+        (callback: BlobCallback) => {
+          callback(null)
+        }
+      )
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      await getImageMenuOptions(node)
+        .find((o) => o.label === 'Copy Image')
+        ?.action?.()
+
+      expect(warnSpy).toHaveBeenCalledWith('Failed to create image blob')
+      expect(write).not.toHaveBeenCalled()
+    })
+  })
 })