@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
69 lines (68 loc) • 3.11 kB
JavaScript
import { render, screen } from '@testing-library/react';
import { HiCheck } from '@vertisanpro/react-icons/hi';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Flowbite } from '../Flowbite';
import { Badge } from './Badge';
describe('Components / Badge', () => {
describe('Rendering', () => {
it('should render an `<a>` given `href=".."`', () => {
render(React.createElement(Badge, { href: "/", icon: HiCheck }, "A badge with a link"));
expect(link()).toBeInTheDocument();
expect(link()).toHaveAttribute('href', '/');
});
});
describe('Classname', () => {
it('should merge not overwrite', () => {
render(React.createElement(Badge, { className: "bg-red-500" }, "A badge with custom background"));
expect(badge()).toHaveClass('bg-red-500 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300');
});
});
describe('Theme', () => {
it('should use custom colors', () => {
const theme = {
badge: {
root: {
color: {
primary: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300',
},
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Badge, { color: "primary", href: "/", icon: HiCheck }, "A badge")));
expect(badge()).toHaveClass('bg-cyan-100 text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 group-hover:bg-cyan-200 dark:group-hover:bg-cyan-300');
});
it('should use custom sizes', () => {
const theme = {
badge: {
root: {
size: {
xxl: 'text-2xl',
},
},
icon: {
off: 'rounded-lg p-1',
on: 'rounded-full p-5',
size: {
xxl: 'w-6 h-6',
},
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Badge, { size: "xxl" }, "A badge"),
React.createElement(Badge, { icon: HiCheck, size: "xxl" })));
const badges = screen.getAllByTestId('flowbite-badge');
const regularBadge = badges[0];
const emptyBadge = badges[1];
expect(regularBadge).toHaveClass('text-2xl');
expect(regularBadge).toHaveClass('rounded-lg p-1');
expect(emptyBadge).toHaveClass('rounded-full p-5');
expect(icon()).toHaveClass('w-6 h-6');
});
});
});
const badge = () => screen.getByTestId('flowbite-badge');
const icon = () => screen.getByTestId('flowbite-badge-icon');
const link = () => screen.getByRole('link');