@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
42 lines (41 loc) • 1.73 kB
JavaScript
import { render, screen } from '@testing-library/react';
import { MdKeyboardArrowLeft, MdKeyboardCommandKey } from '@vertisanpro/react-icons/md';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Flowbite } from '../Flowbite';
import { Kbd } from './Kbd';
describe('Components / Kbd', () => {
describe('Theme', () => {
it('should use custom `base` classes', () => {
const theme = {
kbd: {
root: {
base: 'bg-yellow-400 dark:bg-yellow-40',
},
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Kbd, null)));
expect(kbd()).toBeInTheDocument();
expect(kbd()).toHaveClass('bg-yellow-400 dark:bg-yellow-40');
});
});
describe('Rendering', () => {
it('should render when `children={0}`', () => {
render(React.createElement(Kbd, null, "0"));
expect(kbd()).toHaveTextContent('0');
});
it('should show icon when render', () => {
render(React.createElement(Kbd, { icon: MdKeyboardArrowLeft }));
expect(kbd()).toBeInTheDocument();
expect(kbd().childNodes[0]).toContainHTML('svg');
});
it('should show icon and children when render', () => {
render(React.createElement(Kbd, { icon: MdKeyboardCommandKey }, "command"));
expect(kbd()).toBeInTheDocument();
expect(kbd().childNodes[0]).toContainHTML('svg');
expect(kbd()).toHaveTextContent('command');
});
});
});
const kbd = () => screen.getByTestId('flowbite-kbd');