Add Component Test Coverage (#1109)

google-labs-jules[bot] · web-flow · commit 12e9e50bcbf7 · 2025-12-11T08:58:41.000-08:00
* feat(testing): add component tests for key UI components Adds component tests for several key UI components using React Testing Library, as requested in issue #106. This change includes: - Unit tests for TimerDisplay, HrmTiles, and SpotifyDisplay components. - An integration test for the main Control Panel page. - Fixes to the Jest configuration to handle ES modules and provide necessary context providers. These tests improve coverage and help prevent future UI regressions. * chore(lint): fix linting errors Fixes Prettier formatting issues in the newly added test files. * chore(lint): fix linting errors Fixes Prettier formatting issues in the newly added test files. --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -27,19 +27,23 @@ const config = {
     '!**/node_modules/**',
   ],
   transform: {
+    '^.+\\.mjs$': 'babel-jest', // Added to handle .mjs files if any
     '^.+\\.(ts|tsx)$': [
       'ts-jest',
       {
         useESM: true,
         tsconfig: {
           module: 'ES2022',
-          moduleResolution: 'node',
+          moduleResolution: 'bundler', // bundler is a better choice for modern apps
           esModuleInterop: true,
           allowSyntheticDefaultImports: true,
         },
       },
     ],
   },
+  transformIgnorePatterns: [
+    '/node_modules/(?!uuid)', // Ensure uuid is transformed
+  ],
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   moduleNameMapper: {
     '^(\\.{1,2}/.*)\\.js$': '$1',
diff --git a/tests/unit/app/client/control/page.test.tsx b/tests/unit/app/client/control/page.test.tsx
@@ -0,0 +1,38 @@
+/** @jest-environment jsdom */
+
+import ControlPage from '@/app/client/control/page'
+import { WebSocketProvider } from '@/context/WebSocketContext'
+import { SessionProvider } from 'next-auth/react'
+import '@testing-library/jest-dom'
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+
+// Mock child components that have complex internal logic
+jest.mock('@/app/client/control/components/TimerControls', () => ({
+  __esModule: true,
+  default: () => <div data-testid="mock-timer-controls">Timer Controls</div>,
+}))
+jest.mock('@/app/client/control/components/SpotifyControls', () => ({
+  __esModule: true,
+  default: () => (
+    <div data-testid="mock-spotify-controls">Spotify Controls</div>
+  ),
+}))
+
+describe('ControlPage Integration', () => {
+  it('should render all child components within the providers', async () => {
+    render(
+      <SessionProvider session={null}>
+        <WebSocketProvider>
+          <ControlPage />
+        </WebSocketProvider>
+      </SessionProvider>
+    )
+
+    // Wait for all components to be rendered, including dynamic ones
+    await waitFor(() => {
+      expect(screen.getByTestId('mock-timer-controls')).toBeInTheDocument()
+      expect(screen.getByTestId('mock-spotify-controls')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/tests/unit/components/HrmTiles.test.tsx b/tests/unit/components/HrmTiles.test.tsx
@@ -0,0 +1,102 @@
+/** @jest-environment jsdom */
+
+import HrmTiles from '@/components/HrmTiles'
+import { useWebSocket } from '@/context/WebSocketContext'
+import '@testing-library/jest-dom'
+import { render, screen, within } from '@testing-library/react'
+
+// Mock the context and child component for isolation
+jest.mock('@/context/WebSocketContext')
+jest.mock('@/components/HrTile', () => ({
+  __esModule: true,
+  default: ({ name, bpm }: { name: string; bpm: number | null }) => (
+    <div data-testid="mock-hr-tile">
+      <p>{name}</p>
+      <p>{bpm === null ? 'Signal Drop' : bpm}</p>
+    </div>
+  ),
+}))
+
+const mockedUseWebSocket = useWebSocket as jest.Mock
+
+describe('HrmTiles', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should render HRM data correctly for a user', () => {
+    mockedUseWebSocket.mockReturnValue({
+      hrmData: [{ clientId: 'user1', name: 'Ariel', value: 150 }],
+      connectionStatus: 'Connected',
+      activeAlerts: [],
+    })
+
+    render(<HrmTiles />)
+
+    const tile = screen.getByTestId('mock-hr-tile')
+    expect(within(tile).getByText('Ariel')).toBeInTheDocument()
+    expect(within(tile).getByText('150')).toBeInTheDocument()
+  })
+
+  it('should render "Signal Drop" when value is null', () => {
+    mockedUseWebSocket.mockReturnValue({
+      hrmData: [{ clientId: 'user1', name: 'Ariel', value: null }],
+      connectionStatus: 'Connected',
+      activeAlerts: [],
+    })
+
+    render(<HrmTiles />)
+
+    const tile = screen.getByTestId('mock-hr-tile')
+    expect(within(tile).getByText('Ariel')).toBeInTheDocument()
+    expect(within(tile).getByText('Signal Drop')).toBeInTheDocument()
+  })
+
+  it('should render skeleton containers when hrmData is empty', () => {
+    mockedUseWebSocket.mockReturnValue({
+      hrmData: [],
+      connectionStatus: 'Connected',
+      activeAlerts: [],
+    })
+
+    render(<HrmTiles />)
+
+    // The component renders skeleton containers when there's no data
+    expect(screen.getAllByTestId('hr-tile-grid-item')).toHaveLength(2)
+    // And no actual HrTile components are rendered
+    expect(screen.queryByTestId('mock-hr-tile')).not.toBeInTheDocument()
+  })
+
+  it('should render skeleton containers when connection status is not "Connected"', () => {
+    mockedUseWebSocket.mockReturnValue({
+      hrmData: [{ clientId: 'user1', name: 'Ariel', value: 150 }],
+      connectionStatus: 'Connecting...',
+      activeAlerts: [],
+    })
+
+    render(<HrmTiles />)
+
+    expect(screen.getAllByTestId('hr-tile-grid-item')).toHaveLength(2)
+    expect(screen.queryByTestId('mock-hr-tile')).not.toBeInTheDocument()
+  })
+
+  it('should filter out users with placeholder names or a value of 0', () => {
+    mockedUseWebSocket.mockReturnValue({
+      hrmData: [
+        { clientId: 'user1', name: 'new user (1)', value: 120 },
+        { clientId: 'user2', name: 'Ariel', value: 0 },
+        { clientId: 'user3', name: 'Valid User', value: 130 },
+      ],
+      connectionStatus: 'Connected',
+      activeAlerts: [],
+    })
+
+    render(<HrmTiles />)
+
+    // Only the 'Valid User' tile should be rendered
+    const tiles = screen.getAllByTestId('mock-hr-tile')
+    expect(tiles).toHaveLength(1)
+    expect(within(tiles[0]).getByText('Valid User')).toBeInTheDocument()
+    expect(within(tiles[0]).getByText('130')).toBeInTheDocument()
+  })
+})
diff --git a/tests/unit/components/Spotify/PlaylistSelector.test.tsx b/tests/unit/components/Spotify/PlaylistSelector.test.tsx
@@ -0,0 +1,79 @@
+/** @jest-environment jsdom */
+
+import PlaylistSelector from '@/components/Spotify/PlaylistSelector'
+import '@testing-library/jest-dom'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+const mockPlaylists = {
+  presetPlaylists: [
+    { id: '1', name: 'Chill Hits', uri: 'spotify:playlist:1' },
+    { id: '2', name: 'Rock Classics', uri: 'spotify:playlist:2' },
+  ],
+  userPlaylists: [{ id: '3', name: 'Focus Flow', uri: 'spotify:playlist:3' }],
+}
+
+describe('PlaylistSelector', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(mockPlaylists),
+      })
+    ) as jest.Mock
+  })
+
+  it('should fetch and display playlists on render', async () => {
+    render(
+      <PlaylistSelector
+        onPlaylistSelected={jest.fn()}
+        onPlaylistPlay={jest.fn()}
+      />
+    )
+
+    // Wait for the playlists to be fetched and rendered
+    await waitFor(() => {
+      expect(screen.getByText('Chill Hits')).toBeInTheDocument()
+      expect(screen.getByText('Rock Classics')).toBeInTheDocument()
+      expect(screen.getByText('Focus Flow')).toBeInTheDocument()
+    })
+  })
+
+  it('should call onPlaylistSelected with the correct URI when a playlist is selected from the list', async () => {
+    const onPlaylistSelected = jest.fn()
+    render(
+      <PlaylistSelector
+        onPlaylistSelected={onPlaylistSelected}
+        onPlaylistPlay={jest.fn()}
+      />
+    )
+    const user = userEvent.setup()
+
+    const rockClassicsItem = await screen.findByText('Rock Classics')
+    await user.click(rockClassicsItem)
+
+    // Verify the callback was called with the correct URI
+    expect(onPlaylistSelected).toHaveBeenCalledWith('spotify:playlist:2')
+  })
+
+  it('should call onPlaylistPlay with the correct URI when the play button is clicked', async () => {
+    const onPlaylistPlay = jest.fn()
+    render(
+      <PlaylistSelector
+        onPlaylistSelected={jest.fn()}
+        onPlaylistPlay={onPlaylistPlay}
+      />
+    )
+    const user = userEvent.setup()
+
+    const focusFlowItem = await screen.findByText('Focus Flow')
+    const listItem = focusFlowItem.closest('li')
+    if (!listItem) throw new Error('Playlist item not found')
+
+    const playButton = within(listItem).getByRole('button', { name: /play/i })
+
+    await user.click(playButton)
+
+    expect(onPlaylistPlay).toHaveBeenCalledWith('spotify:playlist:3')
+  })
+})
diff --git a/tests/unit/components/SpotifyDisplay.test.tsx b/tests/unit/components/SpotifyDisplay.test.tsx
@@ -0,0 +1,115 @@
+/** @jest-environment jsdom */
+
+// Mock the uuid module at the top level BEFORE any other imports
+jest.mock('uuid', () => ({
+  v4: () => 'mock-uuid-1234',
+}))
+
+import SpotifyDisplay from '@/components/SpotifyDisplay'
+import { ErrorProvider } from '@/context/ErrorContext'
+import { useWebSocket } from '@/context/WebSocketContext'
+import useSpotifyWebPlayback from '@/hooks/useSpotifyWebPlayback'
+import '@testing-library/jest-dom'
+import { render, screen, waitFor } from '@testing-library/react'
+import { useSession } from 'next-auth/react'
+import React from 'react'
+
+// Mock child components and dependencies
+jest.mock('@/components/SpotifyLoginButton', () => ({
+  __esModule: true,
+  default: () => <button>Login with Spotify</button>,
+}))
+jest.mock('@/context/WebSocketContext')
+jest.mock('next-auth/react')
+jest.mock('@/hooks/useSpotifyWebPlayback', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}))
+
+const mockedUseWebSocket = useWebSocket as jest.Mock
+const mockedUseSession = useSession as jest.Mock
+const mockedUseSpotifyWebPlayback = useSpotifyWebPlayback as jest.Mock
+
+// Custom renderer to wrap component with required providers
+const renderWithProviders = (ui: React.ReactElement) => {
+  return render(<ErrorProvider>{ui}</ErrorProvider>)
+}
+
+describe('SpotifyDisplay', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    mockedUseSpotifyWebPlayback.mockReturnValue({
+      isReady: true,
+      deviceId: 'mock-device-id',
+      player: null,
+      isAuthenticated: true,
+    })
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      })
+    ) as jest.Mock
+  })
+
+  it('should render the login button when not logged in', async () => {
+    mockedUseSession.mockReturnValue({ data: null, status: 'unauthenticated' })
+    mockedUseWebSocket.mockReturnValue({
+      spotifyData: { trackName: '', artist: '', isPlaying: false },
+      spotifyServiceInitialized: true,
+    })
+    mockedUseSpotifyWebPlayback.mockReturnValue({
+      isAuthenticated: false,
+    })
+
+    renderWithProviders(<SpotifyDisplay />)
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: /login with spotify/i })
+      ).toBeInTheDocument()
+    })
+  })
+
+  it('should render "No Active Playback" when logged in but trackName is "Awaiting Login..."', async () => {
+    mockedUseSession.mockReturnValue({
+      data: { accessToken: 'fake-token' },
+      status: 'authenticated',
+    })
+    mockedUseWebSocket.mockReturnValue({
+      spotifyData: {
+        trackName: 'Awaiting Login...',
+        artist: '',
+        isPlaying: false,
+      },
+      spotifyServiceInitialized: true,
+    })
+
+    renderWithProviders(<SpotifyDisplay />)
+
+    await waitFor(() => {
+      expect(screen.getByText('No Active Playback')).toBeInTheDocument()
+    })
+  })
+
+  it('should render the track name and artist when a track is playing', async () => {
+    mockedUseSession.mockReturnValue({
+      data: { accessToken: 'fake-token' },
+      status: 'authenticated',
+    })
+    mockedUseWebSocket.mockReturnValue({
+      spotifyData: {
+        trackName: 'Test Track',
+        artist: 'Test Artist',
+        isPlaying: true,
+      },
+      spotifyServiceInitialized: true,
+    })
+
+    renderWithProviders(<SpotifyDisplay />)
+
+    await waitFor(() => {
+      expect(screen.getByText(/Test Track — Test Artist/i)).toBeInTheDocument()
+    })
+  })
+})
diff --git a/tests/unit/components/TimerDisplay.test.tsx b/tests/unit/components/TimerDisplay.test.tsx
