78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
/**
|
|
* Phase 2.5 tests: VideoPlayer component.
|
|
*
|
|
* Covers:
|
|
* - Renders video element with correct src
|
|
* - Renders controls attribute
|
|
* - Shows loading state when video not loaded
|
|
* - Forwards ref to video element
|
|
* - Handles video error state
|
|
* - Has proper dimensions styling
|
|
* - Renders without crashing with null src
|
|
*/
|
|
import React from 'react'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
import { VideoPlayer } from '../components/VideoPlayer'
|
|
|
|
describe('VideoPlayer (Phase 2.5)', () => {
|
|
const mockSrc = 'http://localhost:8000/api/v1/video/vid-123'
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
it('renders video element with correct src', () => {
|
|
render(<VideoPlayer src={mockSrc} />)
|
|
|
|
const video = screen.getByTestId('video-player')
|
|
expect(video).toBeInTheDocument()
|
|
expect(video).toHaveAttribute('src', mockSrc)
|
|
})
|
|
|
|
it('renders controls attribute', () => {
|
|
render(<VideoPlayer src={mockSrc} />)
|
|
|
|
const video = screen.getByTestId('video-player')
|
|
expect(video).toHaveAttribute('controls')
|
|
})
|
|
|
|
it('shows loading state when video not loaded', () => {
|
|
render(<VideoPlayer src={mockSrc} />)
|
|
|
|
expect(screen.getByTestId('video-loading')).toBeInTheDocument()
|
|
})
|
|
|
|
it('forwards ref to video element', () => {
|
|
const ref = React.createRef<HTMLVideoElement>()
|
|
render(<VideoPlayer ref={ref} src={mockSrc} />)
|
|
|
|
expect(ref.current).not.toBeNull()
|
|
expect(ref.current?.tagName.toLowerCase()).toBe('video')
|
|
})
|
|
|
|
it('handles video error state', () => {
|
|
render(<VideoPlayer src={mockSrc} />)
|
|
|
|
const video = screen.getByTestId('video-player')
|
|
fireEvent.error(video)
|
|
|
|
expect(screen.getByTestId('video-error')).toBeInTheDocument()
|
|
expect(screen.getByText(/failed to load video/i)).toBeInTheDocument()
|
|
})
|
|
|
|
it('has proper dimensions styling', () => {
|
|
render(<VideoPlayer src={mockSrc} />)
|
|
|
|
const video = screen.getByTestId('video-player')
|
|
expect(video).toHaveClass('w-full')
|
|
expect(video).toHaveClass('max-h-60')
|
|
})
|
|
|
|
it('renders without crashing with null src', () => {
|
|
render(<VideoPlayer src="" />)
|
|
|
|
expect(screen.getByTestId('video-player')).toBeInTheDocument()
|
|
})
|
|
})
|