import { test, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import Table from './Table';

test('table renders correctly', () => {
    render(
        <Table>
            <caption>Public holidays in 2020</caption>
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Day</th>
                    <th scope="col">Holiday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>10 April</td>
                    <td>Friday</td>
                    <td>Good Friday</td>
                </tr>
            </tbody>
        </Table>
    );

    const table = screen.getByRole('table');

    expect(table).toHaveClass('ds_table');
    expect(table.nodeName).toEqual('TABLE');
});

test('table with smallscreen behaviour', () => {
    const SMALL_SCREEN_BEHAVIOUR = 'scrolling';

    render(
        <Table smallscreen={SMALL_SCREEN_BEHAVIOUR}>
            <caption>Public holidays in 2020</caption>
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Day</th>
                    <th scope="col">Holiday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>10 April</td>
                    <td>Friday</td>
                    <td>Good Friday</td>
                </tr>
            </tbody>
        </Table>
    );

    const table = screen.getByRole('table');

    expect(table).toHaveAttribute('data-smallscreen', SMALL_SCREEN_BEHAVIOUR);
    expect(table.nodeName).toEqual('TABLE');
});

test('instantiating/initialising DS component script: smallscreen', () => {
    render(
        <Table smallscreen="scrolling">
            <caption>Public holidays in 2020</caption>
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Day</th>
                    <th scope="col">Holiday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>10 April</td>
                    <td>Friday</td>
                    <td>Good Friday</td>
                </tr>
            </tbody>
        </Table>
    );

    const table = screen.getByRole('table');
    expect(table).toHaveClass('js-initialised');
    expect(table).toHaveClass('js-instantiated');
});

test('instantiating/initialising DS component script: not smallscreen', () => {
    render(
        <Table />
    );

    const table = screen.getByRole('table');
    expect(table).not.toHaveClass('js-initialised');
    expect(table).not.toHaveClass('js-instantiated');
});

test('passing additional props', () => {
    render(
        <Table data-test="foo"/>
    );

    const table = screen.getByRole('table');
    expect(table?.dataset.test).toEqual('foo');
});

test('table with additional CSS class', () => {
    render(
        <Table className="foo"/>
    );

    const table = screen.getByRole('table');
    expect(table).toHaveClass('foo', 'ds_table');
});