coze-studio/frontend/packages/arch/bot-hooks-base/__tests__/use-drag-and-paste-upload/index.test.tsx

/*
 * Copyright 2025 coze-dev Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { Toast } from '@coze-arch/bot-semi';

import { useDragAndPasteUpload } from '../../src/use-drag-and-paste-upload';

// Mock dependencies
vi.mock('@coze-arch/bot-semi', () => ({
  Toast: {
    warning: vi.fn(),
  },
}));

describe('useDragAndPasteUpload', () => {
  const mockRef = {
    current: document.createElement('div'),
  };

  const mockProps = {
    ref: mockRef,
    onUpload: vi.fn(),
    disableDrag: false,
    disablePaste: false,
    fileLimit: 5,
    maxFileSize: 1024 * 1024, // 1MB
    isFileFormatValid: (file: File) => file.type.startsWith('image/'),
    getExistingFileCount: () => 0,
    closeDelay: 100,
    invalidFormatMessage: 'Invalid format',
    invalidSizeMessage: 'File too large',
    fileExceedsMessage: 'Too many files',
  };

  beforeEach(() => {
    vi.clearAllMocks();
    vi.useFakeTimers();
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it('should handle drag events correctly', () => {
    const { result } = renderHook(() => useDragAndPasteUpload(mockProps));

    // Initial state
    expect(result.current.isDragOver).toBe(false);

    // Simulate dragover
    act(() => {
      const dragOverEvent = new Event('dragover') as DragEvent;
      Object.defineProperty(dragOverEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
        },
      });
      mockRef.current.dispatchEvent(dragOverEvent);
    });

    expect(result.current.isDragOver).toBe(true);

    // Simulate dragleave
    act(() => {
      const dragLeaveEvent = new Event('dragleave') as DragEvent;
      mockRef.current.dispatchEvent(dragLeaveEvent);
    });

    // Wait for closeDelay
    act(() => {
      vi.advanceTimersByTime(mockProps.closeDelay);
    });
    expect(result.current.isDragOver).toBe(false);
  });

  it('should handle file drop correctly', () => {
    const validFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
    renderHook(() => useDragAndPasteUpload(mockProps));

    // Simulate drop
    act(() => {
      const dropEvent = new Event('drop') as DragEvent;
      Object.defineProperty(dropEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
          files: {
            0: validFile,
            length: 1,
            item: (index: number) => (index === 0 ? validFile : null),
          },
        },
      });
      mockRef.current.dispatchEvent(dropEvent);
    });

    expect(mockProps.onUpload).toHaveBeenCalledWith([validFile]);
  });

  it('should handle paste events correctly', () => {
    const validFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
    renderHook(() => useDragAndPasteUpload(mockProps));

    // Simulate paste
    act(() => {
      const pasteEvent = new Event('paste') as ClipboardEvent;
      Object.defineProperty(pasteEvent, 'clipboardData', {
        value: {
          files: {
            0: validFile,
            length: 1,
            item: (index: number) => (index === 0 ? validFile : null),
          },
        },
      });
      mockRef.current.dispatchEvent(pasteEvent);
    });

    expect(mockProps.onUpload).toHaveBeenCalledWith([validFile]);
  });

  it('should validate file format', () => {
    const invalidFile = new File(['content'], 'test.txt', {
      type: 'text/plain',
    });
    renderHook(() => useDragAndPasteUpload(mockProps));

    // Simulate drop with invalid file
    act(() => {
      const dropEvent = new Event('drop') as DragEvent;
      Object.defineProperty(dropEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
          files: {
            0: invalidFile,
            length: 1,
            item: (index: number) => (index === 0 ? invalidFile : null),
          },
        },
      });
      mockRef.current.dispatchEvent(dropEvent);
    });

    expect(Toast.warning).toHaveBeenCalledWith({
      content: mockProps.invalidFormatMessage,
      showClose: false,
    });
    expect(mockProps.onUpload).not.toHaveBeenCalled();
  });

  it('should validate file size', () => {
    const largeFile = new File(['content'.repeat(1000000)], 'large.jpg', {
      type: 'image/jpeg',
    });
    renderHook(() => useDragAndPasteUpload(mockProps));

    // Simulate drop with large file
    act(() => {
      const dropEvent = new Event('drop') as DragEvent;
      Object.defineProperty(dropEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
          files: {
            0: largeFile,
            length: 1,
            item: (index: number) => (index === 0 ? largeFile : null),
          },
        },
      });
      mockRef.current.dispatchEvent(dropEvent);
    });

    expect(Toast.warning).toHaveBeenCalledWith({
      content: mockProps.invalidSizeMessage,
      showClose: false,
    });
    expect(mockProps.onUpload).not.toHaveBeenCalled();
  });

  it('should validate file count', () => {
    const mockPropsWithExistingFiles = {
      ...mockProps,
      getExistingFileCount: () => 4,
    };

    const validFiles = [
      new File(['content1'], 'test1.jpg', { type: 'image/jpeg' }),
      new File(['content2'], 'test2.jpg', { type: 'image/jpeg' }),
    ];

    renderHook(() => useDragAndPasteUpload(mockPropsWithExistingFiles));

    // Simulate drop with too many files
    act(() => {
      const dropEvent = new Event('drop') as DragEvent;
      Object.defineProperty(dropEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
          files: {
            0: validFiles[0],
            1: validFiles[1],
            length: 2,
            item: (index: number) => validFiles[index] || null,
          },
        },
      });
      mockRef.current.dispatchEvent(dropEvent);
    });

    expect(Toast.warning).toHaveBeenCalledWith({
      content: mockProps.fileExceedsMessage,
      showClose: false,
    });
    expect(mockProps.onUpload).not.toHaveBeenCalled();
  });

  it('should respect disableDrag prop', () => {
    const { result } = renderHook(() =>
      useDragAndPasteUpload({ ...mockProps, disableDrag: true }),
    );

    // Simulate dragover
    act(() => {
      const dragOverEvent = new Event('dragover') as DragEvent;
      Object.defineProperty(dragOverEvent, 'dataTransfer', {
        value: {
          types: ['Files'],
        },
      });
      mockRef.current.dispatchEvent(dragOverEvent);
    });

    expect(result.current.isDragOver).toBe(false);
  });

  it('should respect disablePaste prop', () => {
    const validFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
    renderHook(() =>
      useDragAndPasteUpload({ ...mockProps, disablePaste: true }),
    );

    // Simulate paste
    act(() => {
      const pasteEvent = new Event('paste') as ClipboardEvent;
      Object.defineProperty(pasteEvent, 'clipboardData', {
        value: {
          files: {
            0: validFile,
            length: 1,
            item: (index: number) => (index === 0 ? validFile : null),
          },
        },
      });
      mockRef.current.dispatchEvent(pasteEvent);
    });

    expect(mockProps.onUpload).not.toHaveBeenCalled();
  });
});