"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
const TailwindTable_1 = require("../components/modern/TailwindTable");
// Test data
const testData = [
    { id: 1, name: 'Alice', age: 28, role: 'Developer' },
    { id: 2, name: 'Bob', age: 34, role: 'Designer' },
    { id: 3, name: 'Charlie', age: 45, role: 'Manager' },
    { id: 4, name: 'David', age: 22, role: 'Intern' },
];
// Test columns
const testColumns = [
    {
        id: 'name',
        header: 'Name',
        accessor: (row) => row.name,
        sortable: true,
        filterable: true,
    },
    {
        id: 'age',
        header: 'Age',
        accessor: (row) => row.age,
        sortable: true,
        filterable: true,
    },
    {
        id: 'role',
        header: 'Role',
        accessor: (row) => row.role,
        sortable: true,
        filterable: true,
    },
];
describe('TailwindTable', () => {
    test('renders correctly with default props', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns }));
        // Table should be rendered
        const table = react_1.screen.getByRole('table');
        expect(table).toBeInTheDocument();
        // Headers should be rendered
        const headers = react_1.screen.getAllByRole('columnheader');
        expect(headers).toHaveLength(3);
        expect(headers[0]).toHaveTextContent('Name');
        expect(headers[1]).toHaveTextContent('Age');
        expect(headers[2]).toHaveTextContent('Role');
        // Data rows should be rendered
        const cells = react_1.screen.getAllByRole('cell');
        expect(cells).toHaveLength(12); // 4 rows x 3 columns
        // Check some specific cells
        expect(react_1.screen.getByText('Alice')).toBeInTheDocument();
        expect(react_1.screen.getByText('34')).toBeInTheDocument();
        expect(react_1.screen.getByText('Manager')).toBeInTheDocument();
    });
    test('handles empty data', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: [], columns: testColumns }));
        // Table should be rendered
        const table = react_1.screen.getByRole('table');
        expect(table).toBeInTheDocument();
        // Headers should be rendered
        const headers = react_1.screen.getAllByRole('columnheader');
        expect(headers).toHaveLength(3);
        // Empty message should be shown
        expect(react_1.screen.getByText('No data available')).toBeInTheDocument();
    });
    test('handles loading state', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, isLoading: true }));
        // Loading message should be shown
        expect(react_1.screen.getByText('Loading...')).toBeInTheDocument();
    });
    test('supports custom empty and loading text', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: [], columns: testColumns, emptyText: "No items found" }));
        // Custom empty message should be shown
        expect(react_1.screen.getByText('No items found')).toBeInTheDocument();
        rerender((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, isLoading: true, loadingText: "Please wait..." }));
        // Custom loading message should be shown
        expect(react_1.screen.getByText('Please wait...')).toBeInTheDocument();
    });
    test('supports caption and footer', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, caption: "Employee Table", hasFooter: true, footer: "Total: 4 employees" }));
        // Caption should be rendered
        expect(react_1.screen.getByText('Employee Table')).toBeInTheDocument();
        // Footer should be rendered
        expect(react_1.screen.getByText('Total: 4 employees')).toBeInTheDocument();
    });
    test('supports sorting', () => {
        const handleSort = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, sortable: true, onSort: handleSort }));
        // Get the name column header
        const nameHeader = react_1.screen.getByText('Name').closest('th');
        // Click on name header to sort
        react_1.fireEvent.click(nameHeader);
        // onSort should be called with the column id and direction
        expect(handleSort).toHaveBeenCalledWith('name', 'asc');
        // Click again to change sort direction
        react_1.fireEvent.click(nameHeader);
        // onSort should be called with new direction
        expect(handleSort).toHaveBeenCalledWith('name', 'desc');
    });
    test('supports default sort', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, sortable: true, defaultSortColumn: "age", defaultSortDirection: "desc" }));
        // Get all rows
        const rows = react_1.screen.getAllByRole('row').slice(1); // Skip header row
        // Data should be sorted by age in descending order
        const ageOrder = rows.map(row => row.children[1].textContent);
        expect(ageOrder).toEqual(['45', '34', '28', '22']);
    });
    test('supports filtering', () => {
        const handleFilter = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, filterable: true, onFilter: handleFilter }));
        // Filter input should be rendered
        const filterInput = react_1.screen.getByPlaceholderText('Filter...');
        expect(filterInput).toBeInTheDocument();
        // Enter filter text
        react_1.fireEvent.change(filterInput, { target: { value: 'dev' } });
        // onFilter should be called with the filter value
        expect(handleFilter).toHaveBeenCalledWith('dev');
        // Only matching row should be shown
        const rows = react_1.screen.getAllByRole('row').slice(1); // Skip header row
        expect(rows).toHaveLength(1);
        expect(rows[0]).toHaveTextContent('Alice');
        expect(rows[0]).toHaveTextContent('Developer');
    });
    test('supports row click handler', () => {
        const handleRowClick = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, onRowClick: handleRowClick }));
        // Get all rows
        const rows = react_1.screen.getAllByRole('row').slice(1); // Skip header row
        // Click on the second row
        react_1.fireEvent.click(rows[1]);
        // onRowClick should be called with the row data
        expect(handleRowClick).toHaveBeenCalledWith(testData[1], 1);
    });
    test('supports row selection', () => {
        const handleSelectRows = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, selectable: true, onSelectRows: handleSelectRows }));
        // Checkboxes should be rendered
        const checkboxes = react_1.screen.getAllByRole('checkbox');
        expect(checkboxes).toHaveLength(5); // Header checkbox + 4 row checkboxes
        // Select the first row
        react_1.fireEvent.click(checkboxes[1]);
        // onSelectRows should be called with the selected row indices
        expect(handleSelectRows).toHaveBeenCalledWith([0]);
        // Select the third row
        react_1.fireEvent.click(checkboxes[3]);
        // onSelectRows should be called with both selected row indices
        expect(handleSelectRows).toHaveBeenCalledWith([0, 2]);
        // Unselect the first row
        react_1.fireEvent.click(checkboxes[1]);
        // onSelectRows should be called with only the remaining selected row
        expect(handleSelectRows).toHaveBeenCalledWith([2]);
    });
    test('supports "select all" functionality', () => {
        const handleSelectRows = jest.fn();
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, selectable: true, onSelectRows: handleSelectRows }));
        // Get the header checkbox
        const headerCheckbox = react_1.screen.getAllByRole('checkbox')[0];
        // Click the header checkbox to select all
        react_1.fireEvent.click(headerCheckbox);
        // onSelectRows should be called with all row indices
        expect(handleSelectRows).toHaveBeenCalledWith([0, 1, 2, 3]);
        // Click again to deselect all
        react_1.fireEvent.click(headerCheckbox);
        // onSelectRows should be called with empty array
        expect(handleSelectRows).toHaveBeenCalledWith([]);
    });
    test('applies different variants correctly', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, variant: "simple" }));
        // Simple variant should have specific classes
        let table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('border-collapse');
        // Striped variant
        rerender((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, variant: "striped" }));
        table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('border-collapse');
        // Get a row and check for striped class
        const rows = react_1.screen.getAllByRole('row').slice(1); // Skip header row
        expect(rows[1]).toHaveClass('even:bg-gray-50');
        // Bordered variant
        rerender((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, variant: "bordered" }));
        table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('border');
    });
    test('applies different sizes correctly', () => {
        const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, size: "sm" }));
        // Small size
        let table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('text-xs');
        // Medium size
        rerender((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, size: "md" }));
        table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('text-sm');
        // Large size
        rerender((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, size: "lg" }));
        table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('text-base');
    });
    test('supports custom class names', () => {
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: testColumns, className: "test-container-class", tableClassName: "test-table-class", headerClassName: "test-header-class", bodyClassName: "test-body-class", rowClassName: "test-row-class", cellClassName: "test-cell-class" }));
        // Container should have custom class
        const container = react_1.screen.getByRole('table').parentElement;
        expect(container).toHaveClass('test-container-class');
        // Table should have custom class
        const table = react_1.screen.getByRole('table');
        expect(table).toHaveClass('test-table-class');
        // Header should have custom class
        const header = table.querySelector('thead');
        expect(header).toHaveClass('test-header-class');
        // Body should have custom class
        const body = table.querySelector('tbody');
        expect(body).toHaveClass('test-body-class');
        // Row should have custom class
        const row = react_1.screen.getAllByRole('row')[1]; // First data row
        expect(row).toHaveClass('test-row-class');
        // Cell should have custom class
        const cell = react_1.screen.getAllByRole('cell')[0]; // First data cell
        expect(cell).toHaveClass('test-cell-class');
    });
    test('supports custom render functions for cells and headers', () => {
        const customColumns = [
            ...testColumns.slice(0, 2),
            {
                id: 'role',
                header: 'Role',
                accessor: (row) => row.role,
                renderHeader: (column) => (0, jsx_runtime_1.jsxs)("span", { "data-testid": "custom-header", children: ["Custom ", column.header] }),
                renderCell: (value) => (0, jsx_runtime_1.jsxs)("span", { "data-testid": "custom-cell", children: ["Role: ", value] }),
            },
        ];
        (0, react_1.render)((0, jsx_runtime_1.jsx)(TailwindTable_1.TailwindTable, { data: testData, columns: customColumns }));
        // Custom header should be rendered
        const customHeader = react_1.screen.getByTestId('custom-header');
        expect(customHeader).toBeInTheDocument();
        expect(customHeader).toHaveTextContent('Custom Role');
        // Custom cells should be rendered
        const customCells = react_1.screen.getAllByTestId('custom-cell');
        expect(customCells).toHaveLength(4); // One for each row
        expect(customCells[0]).toHaveTextContent('Role: Developer');
        expect(customCells[1]).toHaveTextContent('Role: Designer');
    });
});
//# sourceMappingURL=TailwindTable.test.js.map