@dfosco/storyboard-react 4.0.0-beta.8 → 4.0.0

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -0,0 +1,346 @@
+/**
+ * Tests for canvas image drag-and-drop functionality.
+ *
+ * Tests the event handling for dropping images from Finder/file manager
+ * onto the canvas, including coordinate conversion and file filtering.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, act, waitFor } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+import { addWidget, uploadImage } from './canvasApi.js'
+
+// Mock dependencies
+vi.mock('@dfosco/tiny-canvas', () => ({
+  Canvas: ({ children }) => <div data-testid="tiny-canvas">{children}</div>,
+}))
+
+const mockCanvas = {
+  title: 'Drag Drop Test Canvas',
+  widgets: [],
+  sources: [],
+  centered: false,
+  dotted: false,
+  grid: true,
+  gridSize: 24,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: {},
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget() {
+    return <div>mock widget</div>
+  },
+}))
+
+vi.mock('./widgets/WidgetChrome.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-chrome">{children}</div>,
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./widgets/widgetConfig.js', () => ({
+  getFeatures: () => [],
+  isResizable: () => false,
+  schemas: {},
+  getMenuWidgetTypes: () => [],
+}))
+
+vi.mock('./widgets/figmaUrl.js', () => ({
+  isFigmaUrl: () => false,
+  sanitizeFigmaUrl: (url) => url,
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(() => Promise.resolve({ success: true, widget: { id: 'image-abc', type: 'image' } })),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(),
+  uploadImage: vi.fn(() => Promise.resolve({ success: true, filename: 'test-image.png' })),
+}))
+
+vi.mock('./useUndoRedo.js', () => ({
+  default: () => ({
+    snapshot: vi.fn(),
+    undo: vi.fn(),
+    redo: vi.fn(),
+    reset: vi.fn(),
+    canUndo: false,
+    canRedo: false,
+  }),
+}))
+
+// Helper to create a mock File
+function createMockImageFile(name = 'test.png', type = 'image/png') {
+  const blob = new Blob(['fake image data'], { type })
+  return new File([blob], name, { type })
+}
+
+// Helper to create a DataTransfer-like object
+function createDataTransfer(files, types = ['Files']) {
+  return {
+    files,
+    types,
+    dropEffect: 'none',
+  }
+}
+
+describe('CanvasPage image drag-and-drop', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock FileReader for blobToDataUrl
+    global.FileReader = class {
+      readAsDataURL() {
+        setTimeout(() => {
+          this.result = 'data:image/png;base64,fakedata'
+          this.onload?.()
+        }, 0)
+      }
+    }
+    // Mock Image for getImageDimensions
+    global.Image = class {
+      set src(val) {
+        setTimeout(() => {
+          this.naturalWidth = 800
+          this.naturalHeight = 600
+          this.onload?.()
+        }, 0)
+      }
+    }
+  })
+
+  afterEach(() => {
+    delete global.FileReader
+    delete global.Image
+  })
+
+  it('allows drop by preventing default on dragover with Files', () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['Files'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).toHaveBeenCalled()
+    expect(dragOverEvent.dataTransfer.dropEffect).toBe('copy')
+  })
+
+  it('ignores dragover without Files type (internal widget drag)', () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['text/plain'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('uploads image and creates widget on drop', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile('photo.png', 'image/png')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    // Mock getBoundingClientRect for coordinate calculation
+    scrollContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      width: 1000,
+      height: 800,
+    })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait for async processing
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    expect(uploadImage).toHaveBeenCalledWith(
+      expect.stringContaining('data:image/png'),
+      'test-canvas'
+    )
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        type: 'image',
+        props: expect.objectContaining({
+          src: 'test-image.png',
+          private: false,
+        }),
+        position: expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+        }),
+      })
+    )
+  })
+
+  it('ignores non-image files but prevents browser default', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const textFile = new File(['text content'], 'readme.txt', { type: 'text/plain' })
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([textFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0 })
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    // Should prevent default (stops browser from opening the file)
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    // But should not call upload or add widget for non-image files
+    expect(uploadImage).not.toHaveBeenCalled()
+    expect(addWidget).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple image files on drop', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const image1 = createMockImageFile('photo1.png', 'image/png')
+    const image2 = createMockImageFile('photo2.jpg', 'image/jpeg')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([image1, image2], ['Files'])
+    dropEvent.clientX = 100
+    dropEvent.clientY = 100
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait longer for multiple async operations
+      await new Promise((r) => setTimeout(r, 150))
+    })
+
+    // Should call upload for each image
+    expect(uploadImage).toHaveBeenCalledTimes(2)
+    expect(addWidget).toHaveBeenCalledTimes(2)
+  })
+
+  it('ignores drop without Files type', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([], ['text/html'])
+    dropEvent.preventDefault = vi.fn()
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+    })
+
+    expect(dropEvent.preventDefault).not.toHaveBeenCalled()
+    expect(uploadImage).not.toHaveBeenCalled()
+  })
+
+  it('snaps drop position to grid when snap is enabled', async () => {
+    // Enable snap in mock data
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = true
+
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position that should snap: 137 → 144 (gridSize 24: round(137/24)*24 = 144)
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85 // 85 → 96
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 144, y: 96 },
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+
+  it('does not snap drop position when snap is disabled', async () => {
+    // Ensure snap is disabled (default from mock)
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = false
+
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position should round to nearest integer, not snap to grid
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 137, y: 85 }, // No snapping, just rounded integers
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+})