57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { Table, type Column } from './Table';
|
|
|
|
interface TestRow {
|
|
id: string;
|
|
name: string;
|
|
role: string;
|
|
}
|
|
|
|
const columns: Column<TestRow>[] = [
|
|
{
|
|
key: 'name',
|
|
header: 'Name',
|
|
},
|
|
{
|
|
key: 'role',
|
|
header: 'Role',
|
|
},
|
|
];
|
|
|
|
const data: TestRow[] = [
|
|
{ id: 'user-1', name: 'Ada', role: 'Admin' },
|
|
{ id: 'user-2', name: 'Grace', role: 'Reader' },
|
|
];
|
|
|
|
describe('Table', () => {
|
|
it('renders a skeleton table while loading', () => {
|
|
const { container } = render(<Table columns={columns} data={[]} loading />);
|
|
|
|
expect(screen.queryByText('No Results')).not.toBeInTheDocument();
|
|
expect(container.querySelectorAll('tbody tr')).toHaveLength(5);
|
|
});
|
|
|
|
it('renders the empty state message when there is no data', () => {
|
|
render(<Table columns={columns} data={[]} emptyMessage="Nothing here" />);
|
|
|
|
expect(screen.getByText('Nothing here')).toBeInTheDocument();
|
|
});
|
|
|
|
it('uses a custom render function for column output', () => {
|
|
const customColumns: Column<TestRow>[] = [
|
|
{
|
|
key: 'name',
|
|
header: 'Name',
|
|
render: (_value, row, index) => `${index + 1}. ${row.name.toUpperCase()}`,
|
|
},
|
|
];
|
|
|
|
render(<Table columns={customColumns} data={data} />);
|
|
|
|
expect(screen.getByText('1. ADA')).toBeInTheDocument();
|
|
expect(screen.getByText('2. GRACE')).toBeInTheDocument();
|
|
});
|
|
|
|
});
|