@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/components/__tests__/media-player-react19.test.tsx

@@ -0,0 +1,457 @@
+import { act, render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { MediaProvider } from "../../context/media-provider"
+import { setupMediaMocks } from "../../test/media-mocks"
+import { MediaPlayer } from "../media-player"
+
+// Import React 19 hooks
+import { useActionState, useOptimistic, useTransition } from "react"
+
+describe("Media Player React 19 Features", () => {
+	beforeEach(() => {
+		setupMediaMocks()
+		vi.clearAllMocks()
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	describe("useTransition Implementation", () => {
+		it("should handle media state transitions with loading indicators", async () => {
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableTransitions={true} />
+				</MediaProvider>
+			)
+
+			const playButton = screen.getByRole("button", { name: /play/i })
+			expect(playButton).toBeInTheDocument()
+
+			// Start playback - should trigger transition
+			await user.click(playButton)
+
+			// Should show loading state during transition
+			await waitFor(() => {
+				expect(screen.getByTestId("transition-loading")).toBeInTheDocument()
+			})
+
+			// Complete transition
+			act(() => {
+				vi.advanceTimersByTime(100)
+			})
+
+			await waitFor(() => {
+				expect(screen.queryByTestId("transition-loading")).not.toBeInTheDocument()
+				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
+			})
+		})
+
+		it("should handle seeking transitions separately from playback transitions", async () => {
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableTransitions={true} />
+				</MediaProvider>
+			)
+
+			// Start playback first
+			const playButton = screen.getByRole("button", { name: /play/i })
+			await user.click(playButton)
+
+			// Wait for playback to start
+			await waitFor(() => {
+				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
+			})
+
+			// Then seek - should trigger separate transition
+			const seekBar = screen.getByRole("slider", { name: /seek/i })
+			await user.click(seekBar)
+			await user.keyboard("{ArrowRight}")
+
+			// Should show seeking state
+			await waitFor(() => {
+				expect(screen.getByTestId("seeking-transition")).toBeInTheDocument()
+			})
+
+			// Complete seeking transition
+			act(() => {
+				vi.advanceTimersByTime(50)
+			})
+
+			await waitFor(() => {
+				expect(screen.queryByTestId("seeking-transition")).not.toBeInTheDocument()
+			})
+		})
+	})
+
+	describe("useOptimistic Implementation", () => {
+		it("should provide immediate UI feedback for volume changes", async () => {
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableOptimistic={true} />
+				</MediaProvider>
+			)
+
+			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
+
+			// Initial volume should be 1.0
+			expect(volumeSlider).toHaveValue("1")
+
+			// Change volume - should update optimistically
+			await user.click(volumeSlider)
+			await user.keyboard("{ArrowDown}")
+
+			// Optimistic update should be immediate
+			expect(volumeSlider).toHaveValue("0.9")
+			expect(screen.getByTestId("optimistic-volume")).toHaveTextContent("90%")
+
+			// Simulate async operation completion
+			act(() => {
+				vi.advanceTimersByTime(100)
+			})
+
+			// State should be consistent after async operation
+			expect(volumeSlider).toHaveValue("0.9")
+		})
+
+		it("should handle optimistic seek operations", async () => {
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableOptimistic={true} duration={100} />
+				</MediaProvider>
+			)
+
+			const seekBar = screen.getByRole("slider", { name: /seek/i })
+			const timeDisplay = screen.getByTestId("time-display")
+
+			// Initial time should be 0:00
+			expect(timeDisplay).toHaveTextContent("0:00")
+
+			// Seek to 30 seconds - should update optimistically
+			await user.click(seekBar)
+			await user.keyboard("3") // Should seek to 30%
+
+			// Optimistic update should be immediate
+			expect(timeDisplay).toHaveTextContent("0:30")
+			expect(screen.getByTestId("optimistic-time")).toHaveTextContent("30%")
+
+			// Simulate media element updating
+			const video = screen.getByRole("application") as HTMLVideoElement
+			act(() => {
+				video.currentTime = 30
+				const seekingEvent = new Event("seeking")
+				video.dispatchEvent(seekingEvent)
+
+				vi.advanceTimersByTime(100)
+
+				const seekedEvent = new Event("seeked")
+				video.dispatchEvent(seekedEvent)
+			})
+
+			await waitFor(() => {
+				expect(timeDisplay).toHaveTextContent("0:30")
+			})
+		})
+
+		it("should revert optimistic updates on error", async () => {
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableOptimistic={true} />
+				</MediaProvider>
+			)
+
+			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
+
+			// Change volume
+			await user.click(volumeSlider)
+			await user.keyboard("{ArrowUp}")
+
+			// Optimistic update should show
+			expect(volumeSlider).toHaveValue("1")
+
+			// Simulate error
+			const video = screen.getByRole("application") as HTMLVideoElement
+			act(() => {
+				video.error = new Error("Volume change failed")
+				const errorEvent = new Event("error")
+				video.dispatchEvent(errorEvent)
+			})
+
+			await waitFor(() => {
+				expect(volumeSlider).toHaveValue("1") // Should revert to previous state
+				expect(screen.getByTestId("error-message")).toBeInTheDocument()
+			})
+		})
+	})
+
+	describe("useActionState Implementation", () => {
+		it("should handle media settings form with async submission", async () => {
+			const mockSubmit = vi.fn().mockResolvedValue({ success: true })
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime })
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
+				</MediaProvider>
+			)
+
+			// Open settings panel
+			const settingsButton = screen.getByRole("button", { name: /settings/i })
+			await user.click(settingsButton)
+
+			// Change playback speed
+			const speedSelect = screen.getByRole("combobox", { name: /playback speed/i })
+			await user.selectOptions(speedSelect, "1.5")
+
+			// Enable subtitles
+			const subtitleToggle = screen.getByRole("switch", { name: /subtitles/i })
+			await user.click(subtitleToggle)
+
+			// Submit form
+			const saveButton = screen.getByRole("button", { name: /save settings/i })
+			await user.click(saveButton)
+
+			// Should show loading state
+			expect(saveButton).toBeDisabled()
+			expect(screen.getByText(/saving/i)).toBeInTheDocument()
+
+			// Complete async operation
+			act(() => {
+				vi.advanceTimersByTime(200)
+			})
+
+			await waitFor(() => {
+				expect(saveButton).not.toBeDisabled()
+				expect(screen.getByText(/settings saved/i)).toBeInTheDocument()
+				expect(mockSubmit).toHaveBeenCalledWith({
+					playbackRate: 1.5,
+					subtitles: true
+				})
+			})
+		})
+
+		it("should handle form submission errors gracefully", async () => {
+			const mockSubmit = vi.fn().mockRejectedValue(new Error("Network error"))
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
+				</MediaProvider>
+			)
+
+			// Open settings and submit
+			const settingsButton = screen.getByRole("button", { name: /settings/i })
+			await user.click(settingsButton)
+
+			const saveButton = screen.getByRole("button", { name: /save settings/i })
+			await user.click(saveButton)
+
+			await waitFor(() => {
+				expect(screen.getByText(/network error/i)).toBeInTheDocument()
+				expect(saveButton).not.toBeDisabled()
+			})
+		})
+
+		it("should validate form inputs before submission", async () => {
+			const mockSubmit = vi.fn()
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" showSettings={true} onSettingsChange={mockSubmit} />
+				</MediaProvider>
+			)
+
+			const settingsButton = screen.getByRole("button", { name: /settings/i })
+			await user.click(settingsButton)
+
+			// Try to set invalid volume
+			const volumeInput = screen.getByRole("spinbutton", { name: /volume/i })
+			await user.clear(volumeInput)
+			await user.type(volumeInput, "150") // Invalid: > 100
+
+			const saveButton = screen.getByRole("button", { name: /save settings/i })
+			await user.click(saveButton)
+
+			// Should show validation error
+			await waitFor(() => {
+				expect(screen.getByText(/volume must be between 0 and 100/i)).toBeInTheDocument()
+				expect(mockSubmit).not.toHaveBeenCalled()
+			})
+		})
+	})
+
+	describe("React 19 Concurrent Features", () => {
+		it("should handle Suspense boundaries for media loading", async () => {
+			const LazyMediaPlayer = vi.fn().mockImplementation(() => {
+				throw new Promise(() => {}) // Never resolves to test loading state
+			})
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" component={LazyMediaPlayer} />
+				</MediaProvider>
+			)
+
+			// Should show loading fallback
+			expect(screen.getByTestId("media-loading-fallback")).toBeInTheDocument()
+			expect(screen.getByText(/loading media/i)).toBeInTheDocument()
+		})
+
+		it("should handle startTransition for non-urgent updates", async () => {
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableConcurrentFeatures={true} />
+				</MediaProvider>
+			)
+
+			const qualitySelector = screen.getByRole("combobox", { name: /quality/i })
+
+			// Change quality - should use startTransition
+			await user.selectOptions(qualitySelector, "1080p")
+
+			// UI should remain responsive during transition
+			const playButton = screen.getByRole("button", { name: /play/i })
+			expect(playButton).not.toBeDisabled()
+
+			// Should show quality change indicator
+			expect(screen.getByTestId("quality-changing")).toBeInTheDocument()
+
+			// Complete transition
+			act(() => {
+				vi.advanceTimersByTime(300)
+			})
+
+			await waitFor(() => {
+				expect(screen.queryByTestId("quality-changing")).not.toBeInTheDocument()
+				expect(screen.getByDisplayValue("1080p")).toBeInTheDocument()
+			})
+		})
+
+		it("should handle concurrent media operations", async () => {
+			const user = userEvent.setup()
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableConcurrentFeatures={true} />
+				</MediaProvider>
+			)
+
+			const playButton = screen.getByRole("button", { name: /play/i })
+			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
+			const seekBar = screen.getByRole("slider", { name: /seek/i })
+
+			// Trigger multiple operations concurrently
+			await user.click(playButton)
+			await user.click(volumeSlider)
+			await user.keyboard("{ArrowDown}")
+			await user.click(seekBar)
+			await user.keyboard("{ArrowRight}")
+
+			// All operations should complete without blocking UI
+			await waitFor(() => {
+				expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
+				expect(volumeSlider).toHaveValue("0.9")
+				expect(screen.getByTestId("current-time")).not.toHaveTextContent("0:00")
+			})
+		})
+	})
+
+	describe("React 19 Server Components Integration", () => {
+		it("should handle streaming server-side rendering", async () => {
+			// Mock streaming SSR
+			const mockStream = {
+				write: vi.fn(),
+				end: vi.fn()
+			}
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" streaming={true} stream={mockStream} />
+				</MediaProvider>
+			)
+
+			// Should render shell immediately
+			expect(screen.getByRole("application")).toBeInTheDocument()
+
+			// Should stream content when ready
+			await waitFor(() => {
+				expect(mockStream.write).toHaveBeenCalledWith('<div data-testid="media-content">')
+			})
+		})
+
+		it("should handle progressive hydration", async () => {
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" progressiveHydration={true} />
+				</MediaProvider>
+			)
+
+			// Should render static content immediately
+			expect(screen.getByTestId("media-player-shell")).toBeInTheDocument()
+
+			// Should hydrate interactive elements progressively
+			await waitFor(() => {
+				expect(screen.getByRole("button", { name: /play/i })).toBeInTheDocument()
+				expect(screen.getByRole("slider", { name: /volume/i })).toBeInTheDocument()
+			})
+		})
+	})
+
+	describe("Performance Optimizations with React 19", () => {
+		it("should use React Compiler optimizations", async () => {
+			const renderSpy = vi.spyOn(console, "log").mockImplementation(() => {})
+
+			render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableCompilerOptimizations={true} />
+				</MediaProvider>
+			)
+
+			// Should log compiler optimizations
+			expect(renderSpy).toHaveBeenCalledWith(
+				expect.stringContaining("React Compiler optimizations applied")
+			)
+
+			renderSpy.mockRestore()
+		})
+
+		it("should optimize re-renders with useMemo and useCallback", async () => {
+			const user = userEvent.setup()
+
+			const { rerender } = render(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableOptimizations={true} />
+				</MediaProvider>
+			)
+
+			const initialRenderCount = vi.fn().mockImplementation(() => {})
+			initialRenderCount()
+
+			// Re-render with same props
+			rerender(
+				<MediaProvider>
+					<MediaPlayer src="test-video.mp4" enableOptimizations={true} />
+				</MediaProvider>
+			)
+
+			// Component should not re-render unnecessarily
+			expect(initialRenderCount).toHaveBeenCalledTimes(1)
+		})
+	})
+})