test(dataviewer): add tests for dashboard components

[WilliamBerryiii]

Problem Statement

Dashboard components (src/components/dashboard/ or similar) are the main entry points for the application — they compose other components, manage layout, and coordinate data flow. Some have basic tests but most lack coverage for data rendering, user interactions, loading/error states, and responsive behavior.

Parent tracking issue: #210
Depends on: #212 (Happy DOM + coverage config), #214 (custom hook tests)

Scope

Components to test:

• Main dashboard layout and container components
• Dataset list/grid views
• Episode summary cards
• Navigation and breadcrumb components
• Search and filter UI components
• Statistics and metrics display components

Acceptance Criteria

• Every dashboard component has a corresponding .test.tsx file
• Tests cover: rendering with data, empty state, loading state, error state
• User interactions tested (click, search, filter) using @testing-library/user-event
• Components tested with mocked store state (Zustand) and mocked API responses
• Accessibility basics verified (roles, labels, keyboard navigation where applicable)
• All new tests pass with npm run test
• Coverage for dashboard components reaches 80%+

Test Pattern

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { DashboardView } from '@/components/dashboard/DashboardView'

// Mock stores
vi.mock('@/stores/useEpisodeStore', () => ({
  useEpisodeStore: vi.fn(() => ({
    episodes: [{ id: '1', name: 'test-episode' }],
    isLoading: false,
  })),
}))

describe('DashboardView', () => {
  it('should render episode list', () => {
    render()
    expect(screen.getByText('test-episode')).toBeInTheDocument()
  })

  it('should show loading state', () => {
    vi.mocked(useEpisodeStore).mockReturnValue({
      episodes: [],
      isLoading: true,
    })
    render()
    expect(screen.getByRole('progressbar')).toBeInTheDocument()
  })

  it('should show empty state', () => {
    vi.mocked(useEpisodeStore).mockReturnValue({
      episodes: [],
      isLoading: false,
    })
    render()
    expect(screen.getByText(/no episodes/i)).toBeInTheDocument()
  })
})

RPI Tutorial

Phase 1: Research — /task-research

/task-research topic="Dashboard components in src/dataviewer/frontend/src/components/ — list all dashboard-related components, their props, store dependencies, and existing test files"

Phase 2: Plan — /task-plan

/task-plan research="{research-output}/dashboard-component-tests.md"

Phase 3: Implement — /task-implement

/task-implement plan="{plan-output}/dashboard-component-tests-plan.instructions.md"

Phase 4: Review — /task-review

/task-review plan="{plan-output}/dashboard-component-tests-plan.instructions.md"

Review focus:

• Tests use screen queries (not container queries)
• User interactions use userEvent (not fireEvent)
• Store mocks are properly typed
• Loading, error, and empty states all covered