Test: add unit tests for BarChart component #1801

frontend/__tests__/unit/components/BarChart.test.tsx

@@ -0,0 +1,206 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFire } from '@fortawesome/free-solid-svg-icons'
+import { act, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { ThemeProvider } from 'next-themes'
+import React from 'react'
+
+import BarChart from 'components/BarChart'
+
+// Register FontAwesome icon
+library.add(faFire)
+
+// Mock ApexCharts
+jest.mock('react-apexcharts', () => {
+  const MockChart = ({ options, series }: any) => (
+    <div
+      data-testid="mock-chart"
+      data-options={JSON.stringify(options)}
+      data-series={JSON.stringify(series)}
+    />
+  )
+  return {
+    __esModule: true,
+    default: MockChart,
+  }
+})
+
+// Utility to render with act + theme
+const renderWithTheme = async (ui: React.ReactElement, theme: 'light' | 'dark' = 'light') => {
+  let result: ReturnType<typeof render> | undefined
+  await act(async () => {
+    result = render(
+      <ThemeProvider attribute="class" forcedTheme={theme}>
+        {ui}
+      </ThemeProvider>
+    )
+  })
+  return result!
+}
+
+// Common test props
+const mockProps = {
+  title: 'Calories Burned',
+  labels: ['Mon', 'Tue', 'Wed'],
+  days: [200, 150, 100],
+  requirements: [180, 170, 90],
+}
+
+describe('<BarChart />', () => {
+  it('renders without crashing with minimal props', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('renders with custom icon when provided', async () => {
+    // cspell:ignore fas
+    await renderWithTheme(<BarChart {...mockProps} icon={['fas', 'fire']} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+
+    // Check for custom FontAwesome fire icon
+    const fireIconElement = document.querySelector('svg[data-icon="fire"]')
+    expect(fireIconElement).toBeInTheDocument()
+
+    // Component renders both default and custom icons
+    const defaultIconElement = document.querySelector('svg[data-icon="link"]')
+    expect(defaultIconElement).toBeInTheDocument()
+
+    // Should have multiple icons when custom icon is provided
+    const allIcons = document.querySelectorAll('svg[data-icon]')
+    expect(allIcons.length).toBeGreaterThan(1)
+  })
+
+  it('renders with default icon when icon prop not provided', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+
+    // Should render default link icon when no icon prop is provided
+    const defaultIconElement = document.querySelector('svg[data-icon="link"]')
+    expect(defaultIconElement).toBeInTheDocument()
+
+    // Should only have the default icon
+    const allIcons = document.querySelectorAll('svg[data-icon]')
+    expect(allIcons.length).toBe(1)
+  })
+
+  it('renders correctly in light mode', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />, 'light')
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('renders correctly in dark mode', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />, 'dark')
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles empty data arrays without crashing', async () => {
+    const emptyProps = {
+      title: 'Empty Chart',
+      labels: [],
+      days: [],
+      requirements: [],
+    }
+    await renderWithTheme(<BarChart {...emptyProps} />)
+    expect(screen.getByText('Empty Chart')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles single data point correctly', async () => {
+    const singleDataProps = {
+      title: 'Single Day',
+      labels: ['Mon'],
+      days: [200],
+      requirements: [180],
+    }
+    await renderWithTheme(<BarChart {...singleDataProps} />)
+    expect(screen.getByText('Single Day')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles reverseColors when provided', async () => {
+    const reverseColorsProps = {
+      ...mockProps,
+      reverseColors: [true, false, true],
+    }
+    await renderWithTheme(<BarChart {...reverseColorsProps} />)
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles reverseColors when not provided', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />)
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles mismatched array lengths gracefully', async () => {
+    const mismatchedProps = {
+      ...mockProps,
+      days: [200, 150], // Only 2 entries instead of 3
+      requirements: [180], // Only 1 entry
+    }
+    await renderWithTheme(<BarChart {...mismatchedProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('passes correct data to chart component', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />)
+    const chartElement = screen.getByTestId('mock-chart')
+
+    // Verify that chart receives the data
+    expect(chartElement).toHaveAttribute('data-series')
+    expect(chartElement).toHaveAttribute('data-options')
+  })
+
+  it('renders with different title', async () => {
+    const customTitleProps = {
+      ...mockProps,
+      title: 'Custom Chart Title',
+    }
+    await renderWithTheme(<BarChart {...customTitleProps} />)
+    expect(screen.getByText('Custom Chart Title')).toBeInTheDocument()
+    expect(screen.queryByText('Calories Burned')).not.toBeInTheDocument()
+  })
+
+  it('handles zero values in data arrays', async () => {
+    const zeroDataProps = {
+      ...mockProps,
+      days: [0, 150, 0],
+      requirements: [0, 170, 0],
+    }
+    await renderWithTheme(<BarChart {...zeroDataProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles negative values in data arrays', async () => {
+    const negativeDataProps = {
+      ...mockProps,
+      days: [-50, 150, -30],
+      requirements: [-40, 170, -20],
+    }
+    await renderWithTheme(<BarChart {...negativeDataProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('handles large numbers in data arrays', async () => {
+    const largeDataProps = {
+      ...mockProps,
+      days: [20000, 15000, 10000],
+      requirements: [18000, 17000, 9000],
+    }
+    await renderWithTheme(<BarChart {...largeDataProps} />)
+    expect(screen.getByText('Calories Burned')).toBeInTheDocument()
+    expect(screen.getByTestId('mock-chart')).toBeInTheDocument()
+  })
+
+  it('renders chart container with proper accessibility', async () => {
+    await renderWithTheme(<BarChart {...mockProps} />)
+    const chartElement = screen.getByTestId('mock-chart')
+    expect(chartElement).toBeInTheDocument()
+    expect(chartElement).toBeVisible()
+  })
+})