@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
67 lines (66 loc) • 4.78 kB
JavaScript
import { render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Table } from './Table';
describe.concurrent('Components / Table', () => {
it('should be able to render a table', () => {
render(React.createElement(TestTable, null));
expect(screen.getByTestId('table-element')).toBeTruthy();
});
it('should be able to render a striped table', () => {
render(React.createElement(TestTable, { striped: true }));
const rows = screen.getAllByTestId('table-row-element');
expect(rows.length).toEqual(5);
expect(rows[0].className).toContain('odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700');
});
it('should be able to render a hoverable table', () => {
render(React.createElement(TestTable, { hoverable: true }));
const rows = screen.getAllByTestId('table-row-element');
expect(rows.length).toEqual(5);
expect(rows[0].className).toContain('hover:bg-gray-50 dark:hover:bg-gray-600');
});
});
const TestTable = (props) => (React.createElement(Table, { ...props },
React.createElement(Table.Head, null,
React.createElement(Table.HeadCell, null, "Product name"),
React.createElement(Table.HeadCell, null, "Color"),
React.createElement(Table.HeadCell, null, "Category"),
React.createElement(Table.HeadCell, null, "Price"),
React.createElement(Table.HeadCell, null,
React.createElement("span", { className: "sr-only" }, "Edit"))),
React.createElement(Table.Body, { className: "divide-y" },
React.createElement(Table.Row, { className: "bg-white dark:border-gray-700 dark:bg-gray-800" },
React.createElement(Table.Cell, { className: "whitespace-nowrap font-medium text-gray-900 dark:text-white" }, 'Apple MacBook Pro 17"'),
React.createElement(Table.Cell, null, "Sliver"),
React.createElement(Table.Cell, null, "Laptop"),
React.createElement(Table.Cell, null, "$2999"),
React.createElement(Table.Cell, null,
React.createElement("a", { href: "/tables", className: "font-medium text-cyan-600 hover:underline dark:text-cyan-500" }, "Edit"))),
React.createElement(Table.Row, { className: "bg-white dark:border-gray-700 dark:bg-gray-800" },
React.createElement(Table.Cell, { className: "whitespace-nowrap font-medium text-gray-900 dark:text-white" }, "Microsoft Surface Pro"),
React.createElement(Table.Cell, null, "White"),
React.createElement(Table.Cell, null, "Laptop PC"),
React.createElement(Table.Cell, null, "$1999"),
React.createElement(Table.Cell, null,
React.createElement("a", { href: "/tables", className: "font-medium text-cyan-600 hover:underline dark:text-cyan-500" }, "Edit"))),
React.createElement(Table.Row, { className: "bg-white dark:border-gray-700 dark:bg-gray-800" },
React.createElement(Table.Cell, { className: "whitespace-nowrap font-medium text-gray-900 dark:text-white" }, "Magic Mouse 2"),
React.createElement(Table.Cell, null, "Black"),
React.createElement(Table.Cell, null, "Accessories"),
React.createElement(Table.Cell, null, "$99"),
React.createElement(Table.Cell, null,
React.createElement("a", { href: "/tables", className: "font-medium text-cyan-600 hover:underline dark:text-cyan-500" }, "Edit"))),
React.createElement(Table.Row, { className: "bg-white dark:border-gray-700 dark:bg-gray-800" },
React.createElement(Table.Cell, { className: "whitespace-nowrap font-medium text-gray-900 dark:text-white" }, "Google Pixel Phone"),
React.createElement(Table.Cell, null, "Gray"),
React.createElement(Table.Cell, null, "Phone"),
React.createElement(Table.Cell, null, "$799"),
React.createElement(Table.Cell, null,
React.createElement("a", { href: "/tables", className: "font-medium text-cyan-600 hover:underline dark:text-cyan-500" }, "Edit"))),
React.createElement(Table.Row, { className: "bg-white dark:border-gray-700 dark:bg-gray-800" },
React.createElement(Table.Cell, { className: "whitespace-nowrap font-medium text-gray-900 dark:text-white" }, "Apple Watch 5"),
React.createElement(Table.Cell, null, "Red"),
React.createElement(Table.Cell, null, "Wearables"),
React.createElement(Table.Cell, null, "$999"),
React.createElement(Table.Cell, null,
React.createElement("a", { href: "/tables", className: "font-medium text-cyan-600 hover:underline dark:text-cyan-500" }, "Edit"))))));