goodgo-platform/apps/web/components/charts/__tests__/price-area-chart.spec.tsx

import { render, screen } from '@testing-library/react';
import type { ReactNode } from 'react';
import { describe, expect, it, vi } from 'vitest';
import { PriceAreaChart } from '../price-area-chart';

vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  AreaChart: ({
    children,
    data,
  }: {
    children: ReactNode;
    data: unknown[];
  }) => (
    <div data-testid="area-chart" data-count={data.length}>
      {children}
    </div>
  ),
  Area: ({ stroke, dataKey }: { stroke: string; dataKey: string }) => (
    <div data-testid={`area-${dataKey}`} data-stroke={stroke} />
  ),
  XAxis: ({ dataKey }: { dataKey: string }) => (
    <div data-testid={`xaxis-${dataKey}`} />
  ),
  YAxis: () => <div data-testid="yaxis" />,
  CartesianGrid: () => <div data-testid="grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
}));

describe('PriceAreaChart', () => {
  it('renders responsive container with chart, axes, grid and tooltip', () => {
    render(
      <PriceAreaChart
        data={[
          { period: 'D1', avgPriceM2: 60_000_000 },
          { period: 'D2', avgPriceM2: 62_000_000 },
        ]}
      />,
    );
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
    expect(screen.getByTestId('area-chart')).toHaveAttribute('data-count', '2');
    expect(screen.getByTestId('xaxis-period')).toBeInTheDocument();
    expect(screen.getByTestId('yaxis')).toBeInTheDocument();
    expect(screen.getByTestId('grid')).toBeInTheDocument();
    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
  });

  it('uses signal-up stroke color when last point >= first', () => {
    render(
      <PriceAreaChart
        data={[
          { period: 'D1', avgPriceM2: 60_000_000 },
          { period: 'D2', avgPriceM2: 65_000_000 },
        ]}
      />,
    );
    expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
      'data-stroke',
      'hsl(var(--signal-up))',
    );
  });

  it('uses signal-down stroke color when last point < first', () => {
    render(
      <PriceAreaChart
        data={[
          { period: 'D1', avgPriceM2: 70_000_000 },
          { period: 'D2', avgPriceM2: 60_000_000 },
        ]}
      />,
    );
    expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
      'data-stroke',
      'hsl(var(--signal-down))',
    );
  });

  it('defaults to signal-down stroke for single or empty data', () => {
    render(<PriceAreaChart data={[]} />);
    expect(screen.getByTestId('area-avgPriceM2')).toHaveAttribute(
      'data-stroke',
      'hsl(var(--signal-down))',
    );
  });

  it('passes through className to wrapper div', () => {
    const { container } = render(
      <PriceAreaChart
        data={[{ period: 'D1', avgPriceM2: 1 }]}
        className="custom-wrap"
      />,
    );
    expect(container.querySelector('.custom-wrap')).not.toBeNull();
  });
});