veza/apps/web/src/components/data/Grid.test.tsx

import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Grid } from './Grid';

describe('Grid Component', () => {
  it('renders children', () => {
    const { getByText } = render(
      <Grid>
        <div>Item 1</div>
        <div>Item 2</div>
      </Grid>,
    );

    expect(getByText('Item 1')).toBeInTheDocument();
    expect(getByText('Item 2')).toBeInTheDocument();
  });

  it('renders with default columns (3)', () => {
    const { container } = render(
      <Grid>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-3');
  });

  it('renders with custom number of columns', () => {
    const { container } = render(
      <Grid columns={4}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-4');
  });

  it('renders with default gap (4)', () => {
    const { container } = render(
      <Grid>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-4');
  });

  it('renders with custom gap', () => {
    const { container } = render(
      <Grid gap={6}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-6');
  });

  it('renders with rowGap and columnGap', () => {
    const { container } = render(
      <Grid rowGap={2} columnGap={4}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-y-2');
    expect(grid).toHaveClass('gap-x-4');
  });

  it('renders with responsive breakpoints', () => {
    const { container } = render(
      <Grid
        columns={{
          sm: 2,
          md: 3,
          lg: 4,
          xl: 5,
        }}
      >
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-2');
    expect(grid).toHaveClass('sm:grid-cols-2');
    expect(grid).toHaveClass('md:grid-cols-3');
    expect(grid).toHaveClass('lg:grid-cols-4');
    expect(grid).toHaveClass('xl:grid-cols-5');
  });

  it('renders with 2xl breakpoint', () => {
    const { container } = render(
      <Grid
        columns={{
          lg: 4,
          xl: 5,
          '2xl': 6,
        }}
      >
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('lg:grid-cols-4');
    expect(grid).toHaveClass('xl:grid-cols-5');
    expect(grid).toHaveClass('2xl:grid-cols-6');
  });

  it('renders with mobile first (1 column) when only larger breakpoints are specified', () => {
    const { container } = render(
      <Grid
        columns={{
          md: 3,
          lg: 4,
        }}
      >
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-1');
    expect(grid).toHaveClass('md:grid-cols-3');
    expect(grid).toHaveClass('lg:grid-cols-4');
  });

  it('applies custom className', () => {
    const { container } = render(
      <Grid className="custom-grid">
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('custom-grid');
  });

  it('always includes grid class', () => {
    const { container } = render(
      <Grid>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid');
  });

  it('renders with gap 0', () => {
    const { container } = render(
      <Grid gap={0}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-0');
  });

  it('renders with large gap', () => {
    const { container } = render(
      <Grid gap={12}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-12');
  });

  it('renders with single column', () => {
    const { container } = render(
      <Grid columns={1}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-1');
  });

  it('renders with 12 columns', () => {
    const { container } = render(
      <Grid columns={12}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('grid-cols-12');
  });

  it('prioritizes gap over rowGap and columnGap', () => {
    const { container } = render(
      <Grid gap={8} rowGap={2} columnGap={4}>
        <div>Item</div>
      </Grid>,
    );

    const grid = container.firstChild;
    expect(grid).toHaveClass('gap-8');
    expect(grid).not.toHaveClass('gap-y-2');
    expect(grid).not.toHaveClass('gap-x-4');
  });
});