Add some player tests

Author: RobbieTheWagner

tests/unit/ForwardButton.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/preact';
+import { beforeEach, describe, expect, it } from 'vitest';
+import ForwardButton from '../../src/components/player/ForwardButton';
+import { createRef } from 'preact';
+
+// Mock audio element
+const mockAudioElement = {
+  currentTime: 0,
+  duration: 180
+};
+
+describe('ForwardButton', () => {
+  let audioPlayerRef: any;
+
+  beforeEach(() => {
+    mockAudioElement.currentTime = 0;
+    audioPlayerRef = createRef();
+    audioPlayerRef.current = mockAudioElement;
+  });
+
+  it('renders forward button with correct label', () => {
+    render(<ForwardButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Fast-forward 10 seconds');
+  });
+
+  it('advances audio by 10 seconds when clicked', () => {
+    render(<ForwardButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+
+    expect(mockAudioElement.currentTime).toBe(0);
+
+    fireEvent.click(button);
+    expect(mockAudioElement.currentTime).toBe(10);
+
+    fireEvent.click(button);
+    expect(mockAudioElement.currentTime).toBe(20);
+  });
+
+  it('handles null audio player gracefully', () => {
+    const nullRef = createRef();
+    nullRef.current = null;
+
+    render(<ForwardButton audioPlayer={nullRef} />);
+
+    const button = screen.getByRole('button');
+
+    // Should render without crashing
+    expect(button).toBeInTheDocument();
+
+    // Clicking should not crash when audio player is null
+    expect(() => fireEvent.click(button)).not.toThrow();
+  });
+
+  it('has proper styling classes', () => {
+    render(<ForwardButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('forward-button');
+    expect(button).toHaveClass('gradient-icon');
+    expect(button).toHaveClass('relative');
+    expect(button).toHaveClass('rounded-full');
+    expect(button).toHaveClass('focus:outline-hidden');
+  });
+
+  it('allows forwarding from any current position', () => {
+    mockAudioElement.currentTime = 45;
+
+    render(<ForwardButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    expect(mockAudioElement.currentTime).toBe(55);
+  });
+
+  it('adds 10 seconds even near track end (browser handles clamping)', () => {
+    mockAudioElement.currentTime = 175; // Near end of 180 second track
+
+    render(<ForwardButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    // Current implementation just adds 10 seconds without bounds checking
+    // In a real browser, the audio element would clamp this to duration
+    expect(mockAudioElement.currentTime).toBe(185);
+  });
+});

tests/unit/MuteButton.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from '@testing-library/preact';
+import { beforeEach, describe, expect, it } from 'vitest';
+import MuteButton from '../../src/components/player/MuteButton';
+import { isMuted } from '../../src/components/state';
+
+describe('MuteButton', () => {
+  beforeEach(() => {
+    isMuted.value = false;
+  });
+
+  it('renders mute button when not muted', () => {
+    render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Mute');
+    expect(button).toHaveClass('mute-button');
+    expect(button).not.toHaveClass('unmute-button');
+  });
+
+  it('renders unmute button when muted', () => {
+    isMuted.value = true;
+
+    render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('aria-label', 'Unmute');
+    expect(button).toHaveClass('unmute-button');
+    expect(button).not.toHaveClass('mute-button');
+  });
+
+  it('toggles mute state when clicked', () => {
+    render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+
+    expect(isMuted.value).toBe(false);
+    expect(button).toHaveAttribute('aria-label', 'Mute');
+
+    fireEvent.click(button);
+
+    expect(isMuted.value).toBe(true);
+    expect(button).toHaveAttribute('aria-label', 'Unmute');
+
+    fireEvent.click(button);
+
+    expect(isMuted.value).toBe(false);
+    expect(button).toHaveAttribute('aria-label', 'Mute');
+  });
+
+  it('has proper styling classes', () => {
+    render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('gradient-icon');
+    expect(button).toHaveClass('group');
+    expect(button).toHaveClass('relative');
+  });
+
+  it('updates class when mute state changes externally', () => {
+    const { rerender } = render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('mute-button');
+
+    // Change state externally
+    isMuted.value = true;
+    rerender(<MuteButton />);
+
+    expect(button).toHaveClass('unmute-button');
+    expect(button).not.toHaveClass('mute-button');
+  });
+
+  it('maintains proper button type', () => {
+    render(<MuteButton />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+});

tests/unit/PlaybackRateButton.test.tsx

@@ -0,0 +1,125 @@
+import { render, screen, fireEvent } from '@testing-library/preact';
+import { beforeEach, describe, expect, it } from 'vitest';
+import PlaybackRateButton from '../../src/components/player/PlaybackRateButton';
+import { createRef } from 'preact';
+
+// Mock audio element
+const mockAudioElement = {
+  playbackRate: 1,
+  currentTime: 0,
+  duration: 180
+};
+
+describe('PlaybackRateButton', () => {
+  let audioPlayerRef: any;
+
+  beforeEach(() => {
+    mockAudioElement.playbackRate = 1;
+    audioPlayerRef = createRef();
+    audioPlayerRef.current = mockAudioElement;
+  });
+
+  it('renders with initial playback rate of 1x', () => {
+    render(<PlaybackRateButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Playback rate');
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('x')).toBeInTheDocument();
+  });
+
+  it('cycles through playback rates when clicked', () => {
+    render(<PlaybackRateButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+
+    // Initial state: 1x
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(mockAudioElement.playbackRate).toBe(1);
+
+    // Click 1: should go to 1.2x
+    fireEvent.click(button);
+    expect(screen.getByText('1.2')).toBeInTheDocument();
+    expect(mockAudioElement.playbackRate).toBe(1.2);
+
+    // Click 2: should go to 1.5x
+    fireEvent.click(button);
+    expect(screen.getByText('1.5')).toBeInTheDocument();
+    expect(mockAudioElement.playbackRate).toBe(1.5);
+
+    // Click 3: should go to 2x
+    fireEvent.click(button);
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(mockAudioElement.playbackRate).toBe(2);
+
+    // Click 4: should cycle back to 1x
+    fireEvent.click(button);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(mockAudioElement.playbackRate).toBe(1);
+  });
+
+  it('handles null audio player gracefully', () => {
+    const nullRef = createRef();
+    nullRef.current = null;
+
+    render(<PlaybackRateButton audioPlayer={nullRef} />);
+
+    const button = screen.getByRole('button');
+
+    // Should render without crashing
+    expect(button).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+
+    // Clicking should not crash when audio player is null
+    expect(() => fireEvent.click(button)).not.toThrow();
+    expect(screen.getByText('1.2')).toBeInTheDocument();
+  });
+
+  it('has proper styling classes', () => {
+    render(<PlaybackRateButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('gradient-icon');
+    expect(button).toHaveClass('relative');
+    expect(button).toHaveClass('rounded-md');
+    expect(button).toHaveClass('transition-colors');
+    expect(button).toHaveClass('focus:outline-hidden');
+  });
+
+  it('displays rate with x suffix correctly', () => {
+    render(<PlaybackRateButton audioPlayer={audioPlayerRef} />);
+
+    const button = screen.getByRole('button');
+
+    // Test different rates maintain x suffix
+    fireEvent.click(button); // 1.2x
+    expect(screen.getByText('1.2')).toBeInTheDocument();
+    expect(screen.getByText('x')).toBeInTheDocument();
+
+    fireEvent.click(button); // 1.5x
+    expect(screen.getByText('1.5')).toBeInTheDocument();
+    expect(screen.getByText('x')).toBeInTheDocument();
+
+    fireEvent.click(button); // 2x
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('x')).toBeInTheDocument();
+  });
+
+  it('maintains state independently across renders', () => {
+    const { rerender } = render(
+      <PlaybackRateButton audioPlayer={audioPlayerRef} />
+    );
+
+    const button = screen.getByRole('button');
+
+    // Change to 1.5x
+    fireEvent.click(button);
+    fireEvent.click(button);
+    expect(screen.getByText('1.5')).toBeInTheDocument();
+
+    // Rerender should maintain the same state
+    rerender(<PlaybackRateButton audioPlayer={audioPlayerRef} />);
+    expect(screen.getByText('1.5')).toBeInTheDocument();
+  });
+});