Nano-Banana-AI-Image-Editor/src/__tests__/ImageCanvas.test.tsx

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ImageCanvas } from '../components/ImageCanvas';
import { useAppStore } from '../store/useAppStore';

// Mock Konva components
jest.mock('react-konva', () => ({
  Stage: ({ children, ...props }: { children: React.ReactNode; [key: string]: unknown }) => (
    <div data-testid="konva-stage" {...props}>
      {children}
    </div>
  ),
  Layer: ({ children }: { children: React.ReactNode }) => <div data-testid="konva-layer">{children}</div>,
  Image: () => <div data-testid="konva-image" />,
  Line: () => <div data-testid="konva-line" />
}));

// Mock Lucide icons
jest.mock('lucide-react', () => ({
  ZoomIn: () => <div data-testid="zoom-in-icon" />,
  ZoomOut: () => <div data-testid="zoom-out-icon" />,
  RotateCcw: () => <div data-testid="rotate-icon" />,
  Download: () => <div data-testid="download-icon" />
}));

// Mock the ToastContext
jest.mock('../components/ToastContext', () => ({
  useToast: () => ({
    addToast: jest.fn()
  })
}));

describe('ImageCanvas', () => {
  beforeEach(() => {
    // Reset the store
    const store = useAppStore as unknown as { setState: (state: unknown) => void };
    store.setState({
      canvasImage: null,
      canvasZoom: 1,
      canvasPan: { x: 0, y: 0 },
      brushStrokes: [],
      showMasks: true,
      selectedTool: 'generate',
      isGenerating: false,
      isContinuousGenerating: false,
      retryCount: 0,
      brushSize: 20,
      showHistory: true,
      showPromptPanel: true
    });
  });

  describe('rendering', () => {
    it('should render empty state when no image', () => {
      render(<ImageCanvas />);
      
      // Check that the empty state is displayed
      expect(screen.getByText('Nano Banana AI')).toBeInTheDocument();
      expect(screen.getByText('在提示框中描述您想要创建的内容')).toBeInTheDocument();
    });

    it('should render generation overlay when generating', () => {
      // Set the store to generating state
      const store = useAppStore as unknown as { setState: (state: unknown) => void };
      store.setState({
        isGenerating: true
      });
      
      render(<ImageCanvas />);
      
      // Check that the generation overlay is displayed
      expect(screen.getByText('正在创建图像...')).toBeInTheDocument();
    });

    it('should show retry count during continuous generation', () => {
      // Set the store to continuous generation state
      const store = useAppStore as unknown as { setState: (state: unknown) => void };
      store.setState({
        isGenerating: true,
        isContinuousGenerating: true,
        retryCount: 3
      });
      
      render(<ImageCanvas />);
      
      // Check that the retry count is displayed
      expect(screen.getByText('重试次数: 3')).toBeInTheDocument();
    });

    it('should render canvas controls when image is present', () => {
      // Set the store to have an image and not generating
      const store = useAppStore as unknown as { setState: (state: unknown) => void };
      store.setState({
        canvasImage: 'test-image-url',
        isGenerating: false
      });
      
      render(<ImageCanvas />);
      
      // Check that the control buttons are rendered
      // Note: In test environment, these might not render due to mock limitations
      // We'll just check that the component renders without error
      expect(screen.getByTestId('konva-stage')).toBeInTheDocument();
    });
  });

  describe('continuous generation display', () => {
    it('should display retry count in generation overlay', () => {
      // Set the store to continuous generation state
      const store = useAppStore as unknown as { setState: (state: unknown) => void };
      store.setState({
        isGenerating: true,
        isContinuousGenerating: true,
        retryCount: 7
      });
      
      render(<ImageCanvas />);
      
      // Check that the retry count is displayed in the overlay
      expect(screen.getByText('重试次数: 7')).toBeInTheDocument();
    });

    it('should not display retry count when not in continuous mode', () => {
      // Set the store to regular generation state
      const store = useAppStore as unknown as { setState: (state: unknown) => void };
      store.setState({
        isGenerating: true,
        isContinuousGenerating: false,
        retryCount: 5
      });
      
      render(<ImageCanvas />);
      
      // Check that the generation message is displayed but not the retry count
      expect(screen.getByText('正在创建图像...')).toBeInTheDocument();
      expect(screen.queryByText('重试次数:')).not.toBeInTheDocument();
    });
  });
});