taro-uno-ui 1.0.0 → 1.0.2

package/src/components/basic/Video/Video.test.tsx

@@ -1,490 +0,0 @@
-/**
- * Taro-Uno Video Component Tests
- * 视频组件测试
- */
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { ThemeProvider } from '../../../theme/ThemeProvider';
-import Video from './Video';
-import type { VideoMethods } from './Video.types';
-import {
-  LoopMode,
-  PlaybackRate
-} from './Video.types';
-
-// 自定义render函数，包裹ThemeProvider
-const renderWithTheme = (ui: React.ReactElement) => {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-};
-
-// Mock the video element
-HTMLVideoElement.prototype.play = vi.fn().mockResolvedValue(undefined);
-HTMLVideoElement.prototype.pause = vi.fn();
-HTMLVideoElement.prototype.load = vi.fn();
-HTMLVideoElement.prototype.requestPictureInPicture = vi.fn().mockResolvedValue(undefined);
-
-// Mock fullscreen methods on HTMLElement.prototype
-HTMLElement.prototype.requestFullscreen = vi.fn().mockResolvedValue(undefined);
-HTMLElement.prototype.exitFullscreen = vi.fn().mockResolvedValue(undefined);
-HTMLElement.prototype.webkitRequestFullscreen = vi.fn().mockResolvedValue(undefined);
-HTMLElement.prototype.mozRequestFullScreen = vi.fn().mockResolvedValue(undefined);
-HTMLElement.prototype.msRequestFullscreen = vi.fn().mockResolvedValue(undefined);
-
-// Mock video element properties using Object.defineProperty
-Object.defineProperty(HTMLVideoElement.prototype, 'videoWidth', {
-  writable: true,
-  value: 1280,
-});
-
-Object.defineProperty(HTMLVideoElement.prototype, 'videoHeight', {
-  writable: true,
-  value: 720,
-});
-
-Object.defineProperty(HTMLVideoElement.prototype, 'duration', {
-  writable: true,
-  value: 30,
-});
-
-Object.defineProperty(HTMLVideoElement.prototype, 'currentTime', {
-  writable: true,
-  value: 0,
-});
-
-Object.defineProperty(HTMLVideoElement.prototype, 'buffered', {
-  get() {
-    return {
-      length: 1,
-      end: (index: number) => 30,
-    };
-  },
-});
-
-// Mock the document fullscreen methods
-document.exitFullscreen = vi.fn().mockResolvedValue(undefined);
-document.fullscreenElement = null;
-
-// Mock the document picture-in-picture methods
-document.exitPictureInPicture = vi.fn().mockResolvedValue(undefined);
-(document as any).pictureInPictureElement = null;
-
-// Mock the canvas methods
-HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
-  drawImage: vi.fn(),
-  toDataURL: vi.fn().mockReturnValue('data:image/png;base64,mock-data'),
-});
-
-// Test data
-const TEST_VIDEO_URL = 'https://example.com/test-video.mp4';
-const TEST_VIDEO_SRC = {
-  src: TEST_VIDEO_URL,
-  title: 'Test Video',
-  description: 'A test video for component testing',
-  poster: 'https://example.com/test-poster.jpg',
-};
-
-const TEST_CHAPTERS = [
-  {
-    id: 'chapter-1',
-    title: 'Chapter 1',
-    startTime: 0,
-    endTime: 10,
-  },
-  {
-    id: 'chapter-2',
-    title: 'Chapter 2',
-    startTime: 10,
-    endTime: 20,
-  },
-  {
-    id: 'chapter-3',
-    title: 'Chapter 3',
-    startTime: 20,
-    endTime: 30,
-  },
-];
-
-const TEST_ADS = [
-  {
-    id: 'ad-1',
-    src: 'https://example.com/test-ad.mp4',
-    duration: 5,
-    title: 'Test Ad',
-    description: 'A test advertisement',
-    skipAfter: 2,
-  },
-];
-
-// Test cases
-describe('Video Component', () => {
-  // Reset mocks before each test
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  // Basic rendering test
-  test('should render Video component with basic props', () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    
-    // 查找视频容器元素，使用getAllByRole并选择第一个元素
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-  });
-
-  // Source prop handling test
-  test('should handle string, object, and array sources', () => {
-    // Test with string source
-    const { rerender } = renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    // 查找视频容器元素
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-
-    // Test with object source
-    rerender(<Video src={TEST_VIDEO_SRC} />);
-    const buttons2 = screen.getAllByRole('button', { name: '▶' });
-    expect(buttons2[0].closest('div')).toBeInTheDocument();
-
-    // Test with array source
-    const sources = [TEST_VIDEO_SRC, { src: 'https://example.com/another-video.mp4' }];
-    rerender(<Video src={sources} />);
-    const buttons3 = screen.getAllByRole('button', { name: '▶' });
-    expect(buttons3[0].closest('div')).toBeInTheDocument();
-  });
-
-  // Auto play test
-  test('should auto play when autoPlay prop is true', async () => {
-    // Mock play method and reset call count before test
-    const mockPlay = vi.spyOn(HTMLVideoElement.prototype, 'play').mockClear();
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} autoPlay />);
-    
-    // Wait for play to be called
-    await waitFor(() => {
-      // 组件内部可能会多次调用play方法，所以我们只需要检查它被调用过至少一次
-      expect(mockPlay).toHaveBeenCalled();
-    });
-  });
-
-  // Play/pause test
-  test('should handle play and pause actions', async () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    
-    // Mock play and pause methods with clear call counts
-    const mockPlay = vi.spyOn(HTMLVideoElement.prototype, 'play').mockClear();
-    const mockPause = vi.spyOn(HTMLVideoElement.prototype, 'pause').mockClear();
-    
-    // 查找中心播放按钮并点击
-    const buttons = screen.getAllByRole('button');
-    const playButton = buttons.find(btn => btn.textContent === '▶') || buttons[0];
-    fireEvent.click(playButton);
-    
-    // 等待play方法被调用
-    await waitFor(() => {
-      expect(mockPlay).toHaveBeenCalled();
-    });
-    
-    // 再次点击同一按钮暂停
-    fireEvent.click(playButton);
-    
-    // 等待pause方法被调用
-    await waitFor(() => {
-      expect(mockPause).toHaveBeenCalled();
-    });
-  });
-
-  // Volume control test
-  test('should handle volume control', () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 音量控制通过组件方法测试，不依赖原生video元素
-  });
-
-  // Playback rate test
-  test('should handle playback rate changes', () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 播放速率控制通过组件方法测试，不依赖原生video元素
-  });
-
-  // Fullscreen test
-  test('should handle fullscreen toggle', async () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} allowFullscreen />);
-    
-    // Mock fullscreen methods
-    const mockRequestFullscreen = vi.spyOn(HTMLElement.prototype, 'requestFullscreen').mockClear();
-    const mockExitFullscreen = vi.spyOn(document, 'exitFullscreen').mockClear();
-    
-    // 查找全屏按钮并点击
-    const fullscreenButton = screen.getByRole('button', { name: /⛶|🔽/ });
-    fireEvent.click(fullscreenButton);
-    
-    await waitFor(() => {
-      expect(mockRequestFullscreen).toHaveBeenCalled();
-    });
-    
-    // Test exit fullscreen by clicking the same button again
-    fireEvent.click(fullscreenButton);
-    
-    await waitFor(() => {
-      expect(mockExitFullscreen).toHaveBeenCalled();
-    });
-  });
-
-  // Picture in picture test
-  test('should handle picture in picture toggle', async () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} allowPictureInPicture />);
-    
-    // Mock picture-in-picture methods
-    const mockRequestPictureInPicture = vi.spyOn(HTMLVideoElement.prototype, 'requestPictureInPicture').mockClear();
-    const mockExitPictureInPicture = vi.spyOn(document, 'exitPictureInPicture').mockClear();
-    
-    // 查找画中画按钮并点击
-    const pipButton = screen.getByRole('button', { name: '📺' });
-    fireEvent.click(pipButton);
-    
-    await waitFor(() => {
-      expect(mockRequestPictureInPicture).toHaveBeenCalled();
-    });
-    
-    // Test exit picture-in-picture by clicking the same button again
-    fireEvent.click(pipButton);
-    
-    await waitFor(() => {
-      expect(mockExitPictureInPicture).toHaveBeenCalled();
-    });
-  });
-
-  // Progress control test
-  test('should handle progress control', () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} />);
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 进度控制通过组件方法测试，不依赖原生video元素
-  });
-
-  // Loop mode test
-  test('should handle loop modes', () => {
-    const { rerender } = renderWithTheme(<Video src={TEST_VIDEO_URL} loop={LoopMode.OFF} />);
-    
-    // 验证组件渲染成功
-    let buttons = screen.getAllByRole('button', { name: '▶' });
-    let containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} loop={LoopMode.ALL} />);
-    buttons = screen.getAllByRole('button', { name: '▶' });
-    containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} loop={LoopMode.ONE} />);
-    buttons = screen.getAllByRole('button', { name: '▶' });
-    containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-  });
-
-  // Chapters test
-  test('should handle video chapters', () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} chapters={TEST_CHAPTERS} />);
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 章节功能通过组件方法和事件处理，不依赖原生video元素
-  });
-
-  // Watermark test
-  test('should render watermark when watermark prop is provided', () => {
-    const watermarkConfig = {
-      content: 'Test Watermark',
-      position: 'bottom-right',
-      opacity: 0.5,
-      fontSize: 12,
-      rotate: -15,
-    };
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} watermark={watermarkConfig} />);
-    
-    // Check if watermark is rendered (we can't directly query it, but we can verify the component renders without errors)
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    expect(buttons[0].closest('div')).toBeInTheDocument();
-  });
-
-  // Ads test
-  test('should handle video ads', async () => {
-    renderWithTheme(<Video src={TEST_VIDEO_URL} ads={TEST_ADS} />);
-    
-    // Check if component renders without errors
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    expect(buttons[0].closest('div')).toBeInTheDocument();
-    
-    // Test ad countdown
-    // We can't easily test the ad countdown timer directly, but we can verify the component handles ads prop correctly
-  });
-
-  // Error handling test
-  test('should handle video errors', () => {
-    const mockOnError = vi.fn();
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} onError={mockOnError} />);
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 错误处理通过组件内部事件处理，不依赖直接触发原生video元素的error事件
-  });
-
-  // Custom render props test
-  test('should use custom render props for loading, error, and ended states', () => {
-    const customLoading = () => <div data-testid="custom-loading">Custom Loading</div>;
-    const customError = () => <div data-testid="custom-error">Custom Error</div>;
-    const customEnded = () => <div data-testid="custom-ended">Custom Ended</div>;
-    
-    renderWithTheme(
-      <Video
-        src={TEST_VIDEO_URL}
-        renderLoading={customLoading}
-        renderError={customError}
-        renderEnded={customEnded}
-      />
-    );
-    
-    // 验证组件渲染成功
-    const buttons = screen.getAllByRole('button', { name: '▶' });
-    const containerElement = buttons[0].closest('div');
-    expect(containerElement).toBeInTheDocument();
-    
-    // 自定义渲染属性通过组件内部状态管理，不依赖直接触发原生video事件
-  });
-
-  // Methods test
-  test('should expose video methods through ref', () => {
-    const videoRef = React.createRef<VideoMethods>();
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} ref={videoRef} />);
-    
-    // Verify methods are available
-    expect(typeof videoRef.current?.play).toBe('function');
-    expect(typeof videoRef.current?.pause).toBe('function');
-    expect(typeof videoRef.current?.stop).toBe('function');
-    expect(typeof videoRef.current?.seek).toBe('function');
-    expect(typeof videoRef.current?.enterFullscreen).toBe('function');
-    expect(typeof videoRef.current?.exitFullscreen).toBe('function');
-    expect(typeof videoRef.current?.toggleFullscreen).toBe('function');
-    expect(typeof videoRef.current?.enterPictureInPicture).toBe('function');
-    expect(typeof videoRef.current?.exitPictureInPicture).toBe('function');
-    expect(typeof videoRef.current?.togglePictureInPicture).toBe('function');
-    expect(typeof videoRef.current?.setVolume).toBe('function');
-    expect(typeof videoRef.current?.toggleMute).toBe('function');
-    expect(typeof videoRef.current?.setPlaybackRate).toBe('function');
-    expect(typeof videoRef.current?.togglePlay).toBe('function');
-    expect(typeof videoRef.current?.reload).toBe('function');
-    expect(typeof videoRef.current?.getState).toBe('function');
-    expect(typeof videoRef.current?.setSource).toBe('function');
-    expect(typeof videoRef.current?.getScreenshot).toBe('function');
-    expect(typeof videoRef.current?.download).toBe('function');
-    expect(typeof videoRef.current?.showControls).toBe('function');
-    expect(typeof videoRef.current?.hideControls).toBe('function');
-  });
-
-  // Screenshot test
-  test('should generate screenshot when getScreenshot method is called', async () => {
-    const videoRef = React.createRef<VideoMethods>();
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} ref={videoRef} />);
-    
-    // Call getScreenshot method
-    const screenshot = await videoRef.current?.getScreenshot();
-    
-    // Verify screenshot is generated
-    expect(screenshot).toBe('data:image/png;base64,mock-data');
-  });
-
-  // Download test
-  test('should trigger download when download method is called', () => {
-    const videoRef = React.createRef<VideoMethods>();
-    
-    renderWithTheme(<Video src={TEST_VIDEO_URL} ref={videoRef} allowDownload />);
-    
-    // Mock createElement and click methods
-    const mockCreateElement = vi.spyOn(document, 'createElement');
-    const mockClick = vi.fn();
-    
-    // Mock the link element
-    const mockLink = {
-      href: TEST_VIDEO_URL,
-      download: 'video.mp4',
-      click: mockClick,
-    };
-    
-    mockCreateElement.mockReturnValue(mockLink as unknown as HTMLElement);
-    
-    // Call download method
-    videoRef.current?.download();
-    
-    // Verify download is triggered
-    expect(mockCreateElement).toHaveBeenCalledWith('a');
-    expect(mockClick).toHaveBeenCalledTimes(1);
-  });
-
-  // Size variants test
-  test('should render with different size variants', () => {
-    const { rerender, container } = renderWithTheme(<Video src={TEST_VIDEO_URL} size="sm" />);
-    let videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} size="md" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} size="lg" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} size="xl" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} size="full" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-  });
-
-  // Variant styles test
-  test('should render with different variant styles', () => {
-    const { rerender } = renderWithTheme(<Video src={TEST_VIDEO_URL} variant="default" />);
-    let videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} variant="rounded" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} variant="bordered" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-    
-    rerender(<Video src={TEST_VIDEO_URL} variant="shadow" />);
-    videoContainer = screen.getAllByRole('button', { name: '▶' })[0].closest('div');
-    expect(videoContainer).toBeInTheDocument();
-  });
-});