SignalQualityIndicator.test.tsx

import React from 'react'
import { render, screen } from '@testing-library/react'
import { SignalQualityIndicator } from './SignalQualityIndicator'
import '@testing-library/jest-dom'

// Mock Tooltip to ensure title is rendered as an attribute for easy testing
jest.mock('@mui/material', () => ({
  ...jest.requireActual('@mui/material'),
  Tooltip: ({
    children,
    title,
  }: {
    children: React.ReactElement<{ title?: string }>
    title: string
  }) => React.cloneElement(children, { title }),
}))

// Mock MUI icons
jest.mock('@mui/icons-material/SignalCellularAlt', () => ({
  __esModule: true,
  default: () => <div data-testid="SignalCellularAltIcon" />,
}))
jest.mock('@mui/icons-material/SignalCellularAlt2Bar', () => ({
  __esModule: true,
  default: () => <div data-testid="SignalCellularAlt2BarIcon" />,
}))
jest.mock('@mui/icons-material/SignalCellularAlt1Bar', () => ({
  __esModule: true,
  default: () => <div data-testid="SignalCellularAlt1BarIcon" />,
}))
jest.mock('@mui/icons-material/SignalCellularConnectedNoInternet0Bar', () => ({
  __esModule: true,
  default: () => (
    <div data-testid="SignalCellularConnectedNoInternet0BarIcon" />
  ),
}))

describe('SignalQualityIndicator', () => {
  it('should render the "excellent" state with correct tooltip', () => {
    const { container } = render(
      <SignalQualityIndicator periodMs={1000} isConnected={true} />
    )
    expect(screen.getByTestId('SignalCellularAltIcon')).toBeInTheDocument()
    expect(screen.getByText('1000ms')).toBeInTheDocument()
    expect(container.firstChild).toHaveAttribute(
      'title',
      'Signal Quality: 1000ms avg period (~100% capture)'
    )
  })

  it('should render the "good" state with correct tooltip', () => {
    const { container } = render(
      <SignalQualityIndicator periodMs={1800} isConnected={true} />
    )
    expect(screen.getByTestId('SignalCellularAlt2BarIcon')).toBeInTheDocument()
    expect(screen.getByText('1800ms')).toBeInTheDocument()
    expect(container.firstChild).toHaveAttribute(
      'title',
      'Signal Quality: 1800ms avg period (~56% capture)'
    )
  })

  it('should render the "poor" state with correct tooltip', () => {
    const { container } = render(
      <SignalQualityIndicator periodMs={2500} isConnected={true} />
    )
    expect(screen.getByTestId('SignalCellularAlt1BarIcon')).toBeInTheDocument()
    expect(screen.getByText('2500ms')).toBeInTheDocument()
    expect(container.firstChild).toHaveAttribute(
      'title',
      'Signal Quality: 2500ms avg period (~40% capture)'
    )
  })

  it('should render the "none" state when disconnected', () => {
    const { container } = render(
      <SignalQualityIndicator periodMs={1000} isConnected={false} />
    )
    expect(
      screen.getByTestId('SignalCellularConnectedNoInternet0BarIcon')
    ).toBeInTheDocument()
    expect(screen.queryByText('1000ms')).not.toBeInTheDocument()
    expect(container.firstChild).toHaveAttribute('title', 'No Signal')
  })
})