@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/ImageUploader/ImageUploader.spec.js

@@ -0,0 +1,1351 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import ImageUploader from './ImageUploader.svelte';
+
+// Mock Sortable.js
+const mockSortableDestroy = vi.fn();
+const mockSortableInstance = {
+  destroy: mockSortableDestroy,
+};
+
+vi.mock('sortablejs', () => ({
+  default: vi.fn(() => mockSortableInstance),
+}));
+
+// Helper to create a mock file
+function createMockFile(name = 'test.jpg', type = 'image/jpeg', size = 1024) {
+  const blob = new Blob(['test'], { type });
+  const file = new File([blob], name, { type });
+  Object.defineProperty(file, 'size', { value: size });
+  return file;
+}
+
+// Helper to create a mock DragEvent with files
+function createDragEvent(type, files = []) {
+  const dataTransfer = {
+    files,
+    types: files.length > 0 ? ['Files'] : [],
+  };
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'dataTransfer', { value: dataTransfer });
+  return event;
+}
+
+describe('ImageUploader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock URL.createObjectURL
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url');
+    global.URL.revokeObjectURL = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Single Image Mode', () => {
+    it('renders empty dropzone when no image provided', () => {
+      const { container } = render(ImageUploader, {
+        props: { maxImages: 1 },
+      });
+      expect(container.querySelector('.filepond-wrapper-single')).toBeInTheDocument();
+    });
+
+    it('renders existing image when provided', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: 'https://example.com/image.jpg',
+          maxImages: 1,
+        },
+      });
+      const img = container.querySelector('img[alt="Uploaded"]');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+    });
+
+    it('shows replace and delete buttons on hover when image exists', () => {
+      render(ImageUploader, {
+        props: {
+          images: 'https://example.com/image.jpg',
+          maxImages: 1,
+        },
+      });
+      expect(screen.getByText('Replace')).toBeInTheDocument();
+      expect(screen.getByText('Delete')).toBeInTheDocument();
+    });
+
+    it('does not show action buttons when disabled', () => {
+      render(ImageUploader, {
+        props: {
+          images: 'https://example.com/image.jpg',
+          maxImages: 1,
+          disabled: true,
+        },
+      });
+      expect(screen.queryByText('Replace')).not.toBeInTheDocument();
+      expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+
+    it('calls onRemove when delete button clicked', async () => {
+      const onRemove = vi.fn();
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: 'https://example.com/image.jpg',
+          maxImages: 1,
+          onRemove,
+        },
+      });
+
+      const deleteButton = screen.getByText('Delete');
+      await user.click(deleteButton);
+      expect(onRemove).toHaveBeenCalledWith(0);
+    });
+
+    it('displays helper text when provided', () => {
+      const helperText = 'Upload a profile picture';
+      render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          helperText,
+        },
+      });
+      expect(screen.getByText(helperText)).toBeInTheDocument();
+    });
+
+    it('displays error message when provided', () => {
+      const error = 'File too large';
+      render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          error,
+        },
+      });
+      expect(screen.getByText(error)).toBeInTheDocument();
+    });
+
+    it('applies custom className', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          class: 'custom-uploader',
+        },
+      });
+      expect(container.querySelector('.custom-uploader')).toBeInTheDocument();
+    });
+  });
+
+  describe('Multi Image Mode', () => {
+    it('renders grid layout for multi-image mode', () => {
+      const { container } = render(ImageUploader, {
+        props: { maxImages: 6 },
+      });
+      // Should have container with flex/grid layout
+      expect(container.querySelector('.image-uploader-multi')).toBeInTheDocument();
+    });
+
+    it('renders existing images in grid', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+        },
+      });
+      const images = container.querySelectorAll('img[alt="Uploaded"]');
+      expect(images).toHaveLength(2);
+      expect(images[0]).toHaveAttribute('src', 'https://example.com/1.jpg');
+      expect(images[1]).toHaveAttribute('src', 'https://example.com/2.jpg');
+    });
+
+    it('shows "Main" badge on first image when enabled', () => {
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          showMainBadge: true,
+        },
+      });
+      expect(screen.getByText('Main')).toBeInTheDocument();
+    });
+
+    it('does not show "Main" badge when disabled', () => {
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          showMainBadge: false,
+        },
+      });
+      expect(screen.queryByText('Main')).not.toBeInTheDocument();
+    });
+
+    it('shows empty slot when can add more images', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+      const emptySlot = container.querySelector('.empty-slot');
+      expect(emptySlot).toBeInTheDocument();
+    });
+
+    it('does not show empty slot when max images reached', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: Array(6).fill('https://example.com/image.jpg'),
+          maxImages: 6,
+        },
+      });
+      const emptySlots = container.querySelectorAll('.empty-slot');
+      expect(emptySlots).toHaveLength(0);
+    });
+
+    it('calls onSetMain when non-main image clicked', async () => {
+      const onSetMain = vi.fn();
+      const user = userEvent.setup();
+
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          onSetMain,
+        },
+      });
+
+      const images = container.querySelectorAll('img[alt="Uploaded"]');
+      await user.click(images[1]);
+      expect(onSetMain).toHaveBeenCalledWith({ index: 1 });
+    });
+
+    it('does not call onSetMain when main image clicked', async () => {
+      const onSetMain = vi.fn();
+      const user = userEvent.setup();
+
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          onSetMain,
+        },
+      });
+
+      const images = container.querySelectorAll('img[alt="Uploaded"]');
+      await user.click(images[0]);
+      expect(onSetMain).not.toHaveBeenCalled();
+    });
+
+    it('shows remove button on each image', () => {
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+        },
+      });
+      const removeButtons = screen.getAllByLabelText('Remove photo');
+      expect(removeButtons).toHaveLength(2);
+    });
+
+    it('calls onRemove with correct index', async () => {
+      const onRemove = vi.fn();
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          onRemove,
+        },
+      });
+
+      const removeButtons = screen.getAllByLabelText('Remove photo');
+      await user.click(removeButtons[1]);
+      expect(onRemove).toHaveBeenCalledWith(1);
+    });
+
+    it('opens upload modal when empty slot clicked', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+    });
+
+    it('closes modal when close button clicked', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+
+      const closeButton = screen.getByLabelText('Close');
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Upload photo')).not.toBeInTheDocument();
+      });
+    });
+
+    it('closes modal when backdrop clicked', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+
+      const backdrop = screen.getByText('Upload photo').closest('.fixed');
+      await user.click(backdrop);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Upload photo')).not.toBeInTheDocument();
+      });
+    });
+
+    describe('Size configurations', () => {
+      it('applies small size classes', () => {
+        const { container } = render(ImageUploader, {
+          props: {
+            images: ['https://example.com/1.jpg'],
+            maxImages: 6,
+            size: 'sm',
+          },
+        });
+        const slot = container.querySelector('.w-16');
+        expect(slot).toBeInTheDocument();
+      });
+
+      it('applies medium size classes', () => {
+        const { container } = render(ImageUploader, {
+          props: {
+            images: ['https://example.com/1.jpg'],
+            maxImages: 6,
+            size: 'md',
+          },
+        });
+        const slot = container.querySelector('.w-24');
+        expect(slot).toBeInTheDocument();
+      });
+
+      it('applies large size classes', () => {
+        const { container } = render(ImageUploader, {
+          props: {
+            images: ['https://example.com/1.jpg'],
+            maxImages: 6,
+            size: 'lg',
+          },
+        });
+        const gridContainer = container.querySelector('.grid-cols-3');
+        expect(gridContainer).toBeInTheDocument();
+      });
+    });
+
+    describe('Shape configurations', () => {
+      it('applies square aspect ratio', () => {
+        const { container } = render(ImageUploader, {
+          props: {
+            images: ['https://example.com/1.jpg'],
+            maxImages: 6,
+            shape: 'square',
+            size: 'lg',
+          },
+        });
+        const slot = container.querySelector('.aspect-square');
+        expect(slot).toBeInTheDocument();
+      });
+
+      it('applies wide aspect ratio', () => {
+        const { container } = render(ImageUploader, {
+          props: {
+            images: [],
+            maxImages: 1,
+            shape: 'wide',
+          },
+        });
+        const wrapper = container.querySelector('.aspect-video');
+        expect(wrapper).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Drag and Drop', () => {
+    it('handles dragover event on empty dropzone', () => {
+      const { container } = render(ImageUploader, {
+        props: { maxImages: 1 },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const event = createDragEvent('dragover', [createMockFile()]);
+
+      fireEvent(dropzone, event);
+      // Should prevent default
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('handles drop event on single mode dropzone', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('handles drop event on multi mode empty slot', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const emptySlot = container.querySelector('.border-dashed');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(emptySlot, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('does not handle drop when disabled', () => {
+      const onUpload = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          disabled: true,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      expect(onUpload).not.toHaveBeenCalled();
+    });
+
+    it('does not handle drop when max images reached', () => {
+      const onUpload = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          images: Array(6).fill('https://example.com/image.jpg'),
+          maxImages: 6,
+          onUpload,
+        },
+      });
+
+      const gridContainer = container.querySelector('.image-uploader-multi > div');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(gridContainer, event);
+
+      expect(onUpload).not.toHaveBeenCalled();
+    });
+
+    it('validates file type on drop', () => {
+      const onUpload = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          acceptedTypes: ['image/jpeg', 'image/png'],
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile('test.txt', 'text/plain');
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      expect(onUpload).not.toHaveBeenCalled();
+    });
+
+    it('shows drag over state', () => {
+      const { container } = render(ImageUploader, {
+        props: { maxImages: 1 },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const dragOverEvent = createDragEvent('dragover', [createMockFile()]);
+
+      fireEvent(dropzone, dragOverEvent);
+
+      expect(container.querySelector('.dropzone-drag-over')).toBeInTheDocument();
+    });
+
+    it('clears drag over state on dragleave', () => {
+      const { container } = render(ImageUploader, {
+        props: { maxImages: 1 },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+
+      // Trigger dragover first
+      const dragOverEvent = createDragEvent('dragover', [createMockFile()]);
+      fireEvent(dropzone, dragOverEvent);
+
+      // Then dragleave
+      const dragLeaveEvent = createDragEvent('dragleave');
+      fireEvent(dropzone, dragLeaveEvent);
+
+      expect(container.querySelector('.dropzone-drag-over')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Upload functionality', () => {
+    it('calls onUpload when file is uploaded', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('updates images when onUpload returns URL (self-managed mode)', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const onchange = vi.fn();
+
+      const { container } = render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 1,
+          onUpload,
+          onchange,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+        expect(onchange).toHaveBeenCalledWith(['https://example.com/uploaded.jpg']);
+      });
+    });
+
+    it('calls onchange when image is uploaded', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const onchange = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 1,
+          onUpload,
+          onchange,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onchange).toHaveBeenCalledWith(['https://example.com/uploaded.jpg']);
+      });
+    });
+
+    it('handles upload error gracefully', async () => {
+      const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const onUpload = vi.fn().mockRejectedValue(new Error('Upload failed'));
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(consoleError).toHaveBeenCalledWith('Upload failed:', expect.any(Error));
+      });
+
+      consoleError.mockRestore();
+    });
+
+    it('warns when onUpload is not provided', async () => {
+      const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(consoleWarn).toHaveBeenCalledWith('ImageUploader: onUpload callback not provided');
+      });
+
+      consoleWarn.mockRestore();
+    });
+
+    it('handles controlled mode (onUpload returns void)', async () => {
+      const onUpload = vi.fn().mockResolvedValue(undefined);
+      const onchange = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 1,
+          onUpload,
+          onchange,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+
+      // In controlled mode, onchange should not be called
+      expect(onchange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Cropping functionality', () => {
+    it('shows crop modal when enableCrop is true', async () => {
+      const onUpload = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          enableCrop: true,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('skips crop modal when enableCrop is false', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+
+      expect(global.URL.createObjectURL).not.toHaveBeenCalled();
+    });
+
+    it('revokes object URL when crop is cancelled', async () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          onUpload: vi.fn(),
+          enableCrop: true,
+        },
+      });
+
+      const dropzone = container.querySelector('.filepond-wrapper-single');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(global.URL.createObjectURL).toHaveBeenCalled();
+      });
+
+      // Simulate cancel would trigger revokeObjectURL
+      // This is handled in the component's handleCropCancel function
+    });
+  });
+
+  describe('Reordering functionality', () => {
+    it('renders grid with reorderable items when enableReorder is true', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          enableReorder: true,
+        },
+      });
+
+      // Should have grid container that Sortable would attach to
+      const gridContainer = container.querySelector('.image-uploader-multi > div');
+      expect(gridContainer).toBeInTheDocument();
+
+      // Should have cursor-grab class on filled slots
+      const slots = container.querySelectorAll('[class*="cursor-grab"]');
+      expect(slots.length).toBeGreaterThan(0);
+    });
+
+    it('renders grid without cursor-grab when enableReorder is false', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          enableReorder: false,
+        },
+      });
+
+      // Should not have cursor-grab class
+      const slots = container.querySelectorAll('[class*="cursor-grab"]');
+      expect(slots).toHaveLength(0);
+    });
+
+    it('cleans up on unmount', () => {
+      const { unmount } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          enableReorder: true,
+        },
+      });
+
+      // Should not throw when unmounting
+      expect(() => unmount()).not.toThrow();
+    });
+  });
+
+  describe('Props validation', () => {
+    it('normalizes single image string to array', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: 'https://example.com/image.jpg',
+          maxImages: 6,
+        },
+      });
+
+      const img = container.querySelector('img[alt="Uploaded"]');
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+    });
+
+    it('filters out falsy values from images array', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', null, '', 'https://example.com/2.jpg', undefined],
+          maxImages: 6,
+        },
+      });
+
+      const images = container.querySelectorAll('img[alt="Uploaded"]');
+      expect(images).toHaveLength(2);
+    });
+
+    it('respects maxImages limit', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 2,
+        },
+      });
+
+      // Should not show empty slot when at max
+      const emptySlots = container.querySelectorAll('.border-dashed');
+      expect(emptySlots).toHaveLength(0);
+    });
+
+    it('uses default maxImages of 6', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: Array(5).fill('https://example.com/image.jpg'),
+        },
+      });
+
+      // Should show empty slot since only 5 out of default 6
+      const emptySlot = container.querySelector('.border-dashed');
+      expect(emptySlot).toBeInTheDocument();
+    });
+
+    it('uses custom emptyLabel', () => {
+      const emptyLabel = 'Drop your awesome photo here';
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 6,
+          emptyLabel,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      expect(addButton).toBeInTheDocument();
+    });
+
+    it('uses custom acceptedTypes', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          acceptedTypes: ['image/png'],
+        },
+      });
+
+      // Component should be rendered with custom types
+      expect(container.querySelector('.filepond-wrapper-single')).toBeInTheDocument();
+    });
+
+    it('uses custom maxFileSize', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          maxImages: 1,
+          maxFileSize: '5MB',
+        },
+      });
+
+      expect(container.querySelector('.filepond-wrapper-single')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('empty slot has proper aria-label', () => {
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      expect(addButton).toBeInTheDocument();
+      expect(addButton).toHaveAttribute('role', 'button');
+      expect(addButton).toHaveAttribute('tabindex', '0');
+    });
+
+    it('remove buttons have proper aria-label', () => {
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      const removeButton = screen.getByLabelText('Remove photo');
+      expect(removeButton).toBeInTheDocument();
+    });
+
+    it('close button in modal has proper aria-label', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        const closeButton = screen.getByLabelText('Close');
+        expect(closeButton).toBeInTheDocument();
+      });
+    });
+
+    it('dropzone is keyboard accessible', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+
+      // Should respond to Enter key
+      addButton.focus();
+      await user.keyboard('{Enter}');
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+    });
+
+    it('dropzone responds to Space key', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+
+      addButton.focus();
+      await user.keyboard('{ }');
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Modal functionality', () => {
+    it('modal has native dropzone for drag and drop', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        const dropzoneText = screen.getByText('Drag & drop or click to upload');
+        expect(dropzoneText).toBeInTheDocument();
+      });
+    });
+
+    it('modal shows accepted file types', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('JPG, PNG, WebP')).toBeInTheDocument();
+      });
+    });
+
+    it('modal handles file drop', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+
+      const dropzone = screen.getByText('Drag & drop or click to upload').closest('[role="button"]');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('modal handles file drop with crop enabled', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+          onUpload,
+          enableCrop: true,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+
+      const dropzone = screen.getByText('Drag & drop or click to upload').closest('[role="button"]');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('modal does not propagate click to backdrop', async () => {
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+        },
+      });
+
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      await user.click(addButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload photo')).toBeInTheDocument();
+      });
+
+      // Click inside modal content
+      const modalContent = screen.getByText('Upload photo').closest('.bg-white, .dark\\:bg-gray-800');
+      await user.click(modalContent);
+
+      // Modal should still be open
+      expect(screen.getByText('Upload photo')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles undefined images prop', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: undefined,
+          maxImages: 6,
+        },
+      });
+
+      expect(container.querySelector('.image-uploader-multi')).toBeInTheDocument();
+    });
+
+    it('handles null images prop', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: null,
+          maxImages: 6,
+        },
+      });
+
+      expect(container.querySelector('.image-uploader-multi')).toBeInTheDocument();
+    });
+
+    it('handles empty string image', () => {
+      const { container } = render(ImageUploader, {
+        props: {
+          images: '',
+          maxImages: 6,
+        },
+      });
+
+      // Empty string should be filtered out
+      const images = container.querySelectorAll('img[alt="Uploaded"]');
+      expect(images).toHaveLength(0);
+    });
+
+    it('prevents file drop when at max capacity', () => {
+      const onUpload = vi.fn();
+      const { container } = render(ImageUploader, {
+        props: {
+          images: Array(6).fill('https://example.com/image.jpg'),
+          maxImages: 6,
+          onUpload,
+        },
+      });
+
+      const gridContainer = container.querySelector('.image-uploader-multi');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      fireEvent(gridContainer, event);
+
+      expect(onUpload).not.toHaveBeenCalled();
+    });
+
+    it('handles remove in controlled mode with onReorderIndices', async () => {
+      const onRemove = vi.fn();
+      const onReorderIndices = vi.fn();
+      const user = userEvent.setup();
+
+      render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg', 'https://example.com/2.jpg'],
+          maxImages: 6,
+          onRemove,
+          onReorderIndices,
+        },
+      });
+
+      const removeButtons = screen.getAllByLabelText('Remove photo');
+      await user.click(removeButtons[0]);
+
+      // Should call onRemove but not update state internally
+      expect(onRemove).toHaveBeenCalledWith(0);
+    });
+
+    it('handles single mode file input change', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          images: 'https://example.com/existing.jpg',
+          maxImages: 1,
+          onUpload,
+          enableCrop: false,
+        },
+      });
+
+      // Get the hidden file input via container
+      const fileInput = container.querySelector('input[type="file"]');
+      expect(fileInput).toBeInTheDocument();
+
+      // Create a mock file and FileList
+      const file = createMockFile();
+      const fileList = {
+        0: file,
+        length: 1,
+        item: (index) => (index === 0 ? file : null),
+      };
+
+      // Mock the files property
+      Object.defineProperty(fileInput, 'files', {
+        value: fileList,
+        writable: false,
+      });
+
+      // Trigger change event
+      fireEvent.change(fileInput);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+      });
+    });
+
+    it('handles single mode file input change with crop enabled', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const { container } = render(ImageUploader, {
+        props: {
+          images: 'https://example.com/existing.jpg',
+          maxImages: 1,
+          onUpload,
+          enableCrop: true,
+        },
+      });
+
+      // Get the hidden file input via container
+      const fileInput = container.querySelector('input[type="file"]');
+      expect(fileInput).toBeInTheDocument();
+
+      // Create a mock file and FileList
+      const file = createMockFile();
+      const fileList = {
+        0: file,
+        length: 1,
+        item: (index) => (index === 0 ? file : null),
+      };
+
+      // Mock the files property
+      Object.defineProperty(fileInput, 'files', {
+        value: fileList,
+        writable: false,
+      });
+
+      // Trigger change event
+      fireEvent.change(fileInput);
+
+      await waitFor(() => {
+        expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+      });
+    });
+  });
+
+  describe('Integration scenarios', () => {
+    it('handles complete upload flow in self-managed mode', async () => {
+      const onUpload = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+      const onchange = vi.fn();
+
+      const { container, rerender } = render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+          onUpload,
+          onchange,
+          enableCrop: false,
+        },
+      });
+
+      // Upload first image
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      const file = createMockFile();
+      const event = createDragEvent('drop', [file]);
+
+      const dropzone = addButton;
+      fireEvent(dropzone, event);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledWith(file);
+        expect(onchange).toHaveBeenCalledWith(['https://example.com/uploaded.jpg']);
+      });
+    });
+
+    it('handles multiple uploads sequentially', async () => {
+      let callCount = 0;
+      const onUpload = vi.fn().mockImplementation(() => {
+        callCount++;
+        return Promise.resolve(`https://example.com/image${callCount}.jpg`);
+      });
+      const onchange = vi.fn();
+
+      render(ImageUploader, {
+        props: {
+          images: [],
+          maxImages: 6,
+          onUpload,
+          onchange,
+          enableCrop: false,
+        },
+      });
+
+      // Upload first image
+      const addButton = screen.getByLabelText('Add photo - drag and drop or click to upload');
+      const file1 = createMockFile('image1.jpg');
+      const event1 = createDragEvent('drop', [file1]);
+      fireEvent(addButton, event1);
+
+      await waitFor(() => {
+        expect(onUpload).toHaveBeenCalledTimes(1);
+      });
+
+      // Upload second image would require re-rendering with updated images
+      // This tests that the component can handle sequential uploads
+    });
+
+    it('shows correct number of slots based on current images', () => {
+      const { container, rerender } = render(ImageUploader, {
+        props: {
+          images: ['https://example.com/1.jpg'],
+          maxImages: 6,
+        },
+      });
+
+      // Should show 1 filled + 1 empty = 2 total slots
+      let slots = container.querySelectorAll('[data-slot-id]');
+      expect(slots).toHaveLength(2);
+
+      // Add more images
+      rerender({
+        images: [
+          'https://example.com/1.jpg',
+          'https://example.com/2.jpg',
+          'https://example.com/3.jpg',
+        ],
+        maxImages: 6,
+      });
+
+      // Should show 3 filled + 1 empty = 4 total slots
+      slots = container.querySelectorAll('[data-slot-id]');
+      expect(slots).toHaveLength(4);
+    });
+  });
+});