65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { DataTable } from '../DataTable';
|
|
|
|
interface User {
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
const columns = [
|
|
{ key: 'name', header: 'Nome' },
|
|
{ key: 'email', header: 'E-mail' },
|
|
];
|
|
|
|
const data: User[] = [
|
|
{ id: '1', name: 'Alice', email: 'alice@test.com' },
|
|
{ id: '2', name: 'Bob', email: 'bob@test.com' },
|
|
];
|
|
|
|
describe('DataTable', () => {
|
|
it('renders columns and data correctly', () => {
|
|
render(<DataTable columns={columns} data={data} rowKey="id" />);
|
|
|
|
expect(screen.getByText('Nome')).toBeInTheDocument();
|
|
expect(screen.getByText('E-mail')).toBeInTheDocument();
|
|
expect(screen.getByText('Alice')).toBeInTheDocument();
|
|
expect(screen.getByText('bob@test.com')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows skeleton when isLoading is true', () => {
|
|
render(<DataTable columns={columns} data={[]} rowKey="id" isLoading />);
|
|
|
|
const skeletons = document.querySelectorAll('.animate-pulse');
|
|
expect(skeletons.length).toBe(5);
|
|
});
|
|
|
|
it('shows empty state when data is empty', () => {
|
|
render(
|
|
<DataTable
|
|
columns={columns}
|
|
data={[]}
|
|
rowKey="id"
|
|
emptyMessage="Nenhum usuário encontrado"
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText('Nenhum usuário encontrado')).toBeInTheDocument();
|
|
});
|
|
|
|
it('uses custom render function for columns', () => {
|
|
const columnsWithRender = [
|
|
{
|
|
key: 'name',
|
|
header: 'Nome',
|
|
render: (item: User) => <strong>{item.name.toUpperCase()}</strong>,
|
|
},
|
|
];
|
|
|
|
render(<DataTable columns={columnsWithRender} data={data} rowKey="id" />);
|
|
|
|
expect(screen.getByText('ALICE')).toBeInTheDocument();
|
|
});
|
|
});
|