gridpilot.gg/apps/website/components/admin/AdminDataTable.test.tsx

/**
 * AdminDataTable Component Tests
 *
 * Tests for the AdminDataTable component that provides a consistent
 * container for high-density admin tables.
 */

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

describe('AdminDataTable', () => {
  it('should render children content', () => {
    render(
      <AdminDataTable>
        <table>
          <tbody>
            <tr>
              <td>Test Data</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Test Data')).toBeInTheDocument();
  });

  it('should render with maxHeight prop', () => {
    render(
      <AdminDataTable maxHeight={400}>
        <table>
          <tbody>
            <tr>
              <td>Scrollable Content</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Scrollable Content')).toBeInTheDocument();
  });

  it('should render with string maxHeight prop', () => {
    render(
      <AdminDataTable maxHeight="500px">
        <table>
          <tbody>
            <tr>
              <td>Scrollable Content</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Scrollable Content')).toBeInTheDocument();
  });

  it('should render without maxHeight prop', () => {
    render(
      <AdminDataTable>
        <table>
          <tbody>
            <tr>
              <td>Content</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Content')).toBeInTheDocument();
  });

  it('should render multiple table rows', () => {
    render(
      <AdminDataTable>
        <table>
          <tbody>
            <tr>
              <td>Row 1</td>
            </tr>
            <tr>
              <td>Row 2</td>
            </tr>
            <tr>
              <td>Row 3</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Row 1')).toBeInTheDocument();
    expect(screen.getByText('Row 2')).toBeInTheDocument();
    expect(screen.getByText('Row 3')).toBeInTheDocument();
  });

  it('should render with complex table structure', () => {
    render(
      <AdminDataTable>
        <table>
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Data 1</td>
              <td>Data 2</td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Header 1')).toBeInTheDocument();
    expect(screen.getByText('Header 2')).toBeInTheDocument();
    expect(screen.getByText('Data 1')).toBeInTheDocument();
    expect(screen.getByText('Data 2')).toBeInTheDocument();
  });

  it('should render with nested components', () => {
    const NestedComponent = () => (
      <div>
        <span>Nested</span>
        <button>Action</button>
      </div>
    );

    render(
      <AdminDataTable>
        <table>
          <tbody>
            <tr>
              <td>
                <NestedComponent />
              </td>
            </tr>
          </tbody>
        </table>
      </AdminDataTable>
    );

    expect(screen.getByText('Nested')).toBeInTheDocument();
    expect(screen.getByText('Action')).toBeInTheDocument();
  });
});