@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
93 lines (92 loc) • 4.23 kB
JavaScript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { theme } from '../../theme';
import { Flowbite } from '../Flowbite';
import { Button } from './Button';
describe('Components / Button group', () => {
describe('A11y', () => {
it('should have `role="group"` by default', () => {
render(React.createElement(Button.Group, null,
React.createElement(Button, null, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three")));
expect(group()).toBeInTheDocument();
});
it('should allow `aria-label`', () => {
render(React.createElement(Button.Group, { "aria-label": "My group" },
React.createElement(Button, null, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three"))),
expect(group()).toHaveAccessibleName('My group');
});
});
describe('Keyboard interactions', () => {
it('should trigger `onClick` when `Space` is pressed on a `Button`', async () => {
const user = userEvent.setup();
const onClick = vi.fn();
render(React.createElement(Button.Group, null,
React.createElement(Button, { onClick: onClick }, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three")));
const firstButton = buttons()[0];
await user.tab();
await user.click(firstButton);
expect(onClick).toHaveBeenCalledTimes(1);
});
it('should be possible to `Tab` out', async () => {
const user = userEvent.setup();
render(React.createElement(React.Fragment, null,
React.createElement(Button.Group, null,
React.createElement(Button, null, "Inside")),
React.createElement(Button, null, "Outside"))),
await user.tab();
expect(buttons()[0]).toHaveFocus();
await user.tab();
expect(buttons()[1]).toHaveFocus();
});
});
describe('Rendering', () => {
it("should correctly set each `Button`'s position", () => {
render(React.createElement(Button.Group, null,
React.createElement(Button, null, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three")));
const positionClasses = theme.buttonGroup.position;
expect(buttons()[0]).toHaveClass(positionClasses.start);
expect(buttons()[1]).toHaveClass(positionClasses.middle);
expect(buttons()[2]).toHaveClass(positionClasses.end);
});
});
describe('Theme', () => {
it('should use `base` classes', () => {
const theme = {
buttonGroup: {
base: 'text-gray-400',
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Button.Group, null,
React.createElement(Button, null, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three"))));
expect(group()).toHaveClass('text-gray-400');
});
it('should use `position` classes', () => {
const theme = {
buttonGroup: {
base: 'text-gray-400',
},
};
render(React.createElement(Flowbite, { theme: { theme } },
React.createElement(Button.Group, null,
React.createElement(Button, null, "One"),
React.createElement(Button, null, "Two"),
React.createElement(Button, null, "Three"))));
expect(group()).toHaveClass('text-gray-400');
});
});
});
const group = () => screen.getByRole('group');
const buttons = () => screen.getAllByRole('button');