@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
76 lines (75 loc) • 3.35 kB
JavaScript
import { render, screen } from '@testing-library/react';
import { HiHome } from '@vertisanpro/react-icons/hi';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Flowbite } from '../Flowbite';
import { Breadcrumb } from './Breadcrumb';
describe('Components / Breadcrumb', () => {
it('should have `role="navigation"`', () => {
render(React.createElement(TestBreadcrumb, null));
expect(breadcrumb()).toBeInTheDocument();
});
it('should contain a `role="list"`', () => {
render(React.createElement(TestBreadcrumb, null));
expect(breadcrumb()).toContainElement(breadcrumbList());
});
it('should contain a `role="listitem"` for each `Breadcrumb.Item`', () => {
render(React.createElement(TestBreadcrumb, null));
expect(items()[0]).toHaveTextContent('Home');
expect(items()[1]).toHaveTextContent('Projects');
expect(items()[2]).toHaveTextContent('Flowbite React');
});
it('should contain a `role="link"` for each `Breadcrumb.Item href=".."`', () => {
render(React.createElement(TestBreadcrumb, null));
expect(links()[0]).toHaveTextContent('Home');
expect(links()[1]).toHaveTextContent('Projects');
});
it('should use `aria-label` if provided', () => {
render(React.createElement(TestBreadcrumb, null));
expect(breadcrumb()).toHaveAccessibleName('test label');
});
it('should use custom list classes via theme={}', () => {
const theme = {
breadcrumb: {
root: {
list: 'gap-6',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(TestBreadcrumb, null)));
expect(breadcrumbList()).toHaveClass('gap-6');
});
it('should use custom item classes via theme={}', () => {
const theme = {
breadcrumb: {
item: {
base: 'justify-center',
chevron: 'h-9 w-9',
href: {
off: 'text-md',
on: 'text-lg',
},
icon: 'h-6 w-6',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(TestBreadcrumb, null)));
expect(items()[0]).toHaveClass('justify-center');
expect(contents()[0]).toHaveAttribute('href');
expect(contents()[0]).toHaveClass('text-lg');
expect(items()[2]).toHaveClass('justify-center');
expect(contents()[2]).not.toHaveAttribute('href');
expect(contents()[2]).toHaveClass('text-md');
});
});
const TestBreadcrumb = () => (React.createElement(Breadcrumb, { "aria-label": "test label" },
React.createElement(Breadcrumb.Item, { href: "#", icon: HiHome }, "Home"),
React.createElement(Breadcrumb.Item, { href: "#" }, "Projects"),
React.createElement(Breadcrumb.Item, { icon: HiHome }, "Flowbite React")));
const breadcrumb = () => screen.getByRole('navigation');
const breadcrumbList = () => screen.getByRole('list');
const items = () => screen.getAllByRole('listitem');
const links = () => screen.getAllByRole('link');
const contents = () => screen.getAllByTestId('flowbite-breadcrumb-item');