|
- import * as React from 'react';
- import {
- cleanup,
- render,
- screen,
- } from '@testing-library/react';
- import userEvent from '@testing-library/user-event';
- import { Button } from '@tesseract-design/web-base';
- import {
- vi,
- expect,
- describe,
- it,
- afterEach,
- } from 'vitest';
- import matchers from '@testing-library/jest-dom/matchers';
- import { PluginAPI } from 'tailwindcss/types/config';
- import {
- RadioButton,
- RadioButtonDerivedElement,
- radioButtonPlugin,
- } from '.';
-
- expect.extend(matchers);
-
- describe('radioButtonPlugin', () => {
- it('adds component styles', () => {
- const pluginApi = {
- addComponents: vi.fn(),
- } as unknown as PluginAPI;
-
- radioButtonPlugin(pluginApi);
- expect(pluginApi.addComponents).toBeCalledTimes(1);
- });
- });
-
- describe('RadioButton', () => {
- afterEach(() => {
- cleanup();
- });
-
- it('renders a radio button', () => {
- render(
- <RadioButton />,
- );
- const checkbox = screen.getByRole('radio');
- expect(checkbox).toBeInTheDocument();
- });
-
- it('renders a subtext', () => {
- render(
- <RadioButton
- subtext="subtext"
- />,
- );
- const subtext = screen.getByTestId('subtext');
- expect(subtext).toBeInTheDocument();
- });
-
- it('renders a badge', () => {
- render(
- <RadioButton
- badge="badge"
- />,
- );
- const badge = screen.getByTestId('badge');
- expect(badge).toBeInTheDocument();
- });
-
- it('renders a compact button', () => {
- render(
- <RadioButton
- compact
- />,
- );
-
- const button = screen.getByTestId('button');
- expect(button).toHaveClass('pl-2 gap-2 pr-2');
- });
-
- describe.each`
- size | className
- ${'small'} | ${'h-10'}
- ${'medium'} | ${'h-12'}
- ${'large'} | ${'h-16'}
- `('on $size size', ({
- size,
- className,
- }: { size: Button.Size, className: string }) => {
- it('renders button styles', () => {
- render(
- <RadioButton
- size={size}
- />,
- );
-
- const button = screen.getByTestId('button');
- expect(button).toHaveClass(className);
- });
-
- it('renders badge styles', () => {
- render(
- <RadioButton
- size={size}
- badge="badge"
- />,
- );
-
- const badge = screen.getByTestId('badge');
- expect(badge).toBeInTheDocument();
- });
- });
-
- it.each`
- variant | className
- ${'bare'} | ${'bg-negative'}
- ${'outline'} | ${'border-2'}
- ${'filled'} | ${'bg-primary'}
- `('renders a button with $variant variant', ({
- variant,
- className,
- }: { variant: Button.Variant, className: string }) => {
- render(
- <RadioButton
- variant={variant}
- />,
- );
-
- const button = screen.getByTestId('button');
- expect(button).toHaveClass(className);
- });
-
- it('renders a block button', () => {
- render(
- <RadioButton
- block
- />,
- );
-
- const button = screen.getByTestId('button');
- expect(button).toHaveClass('w-full flex');
- });
-
- it('renders children', () => {
- render(
- <RadioButton>
- Foo
- </RadioButton>,
- );
-
- const children = screen.getByTestId('children');
- expect(children).toHaveTextContent('Foo');
- });
-
- it('renders a disabled button', () => {
- render(
- <RadioButton
- disabled
- />,
- );
- const button = screen.getByRole('radio');
- expect(button).toBeDisabled();
- });
-
- it('handles click events', async () => {
- const onClick = vi.fn().mockImplementationOnce(
- (e: React.MouseEvent<RadioButtonDerivedElement>) => {
- e.preventDefault();
- },
- );
- render(
- <RadioButton
- onClick={onClick}
- />,
- );
- const button = screen.getByRole('radio');
- await userEvent.click(button);
- expect(onClick).toBeCalled();
- });
-
- it('handles change events', async () => {
- const onChange = vi.fn().mockImplementationOnce(
- (e: React.ChangeEvent<RadioButtonDerivedElement>) => {
- e.preventDefault();
- },
- );
-
- render(
- <RadioButton
- onChange={onChange}
- />,
- );
- const radio: HTMLInputElement = screen.getByRole('radio');
- await userEvent.click(radio);
- expect(onChange).toBeCalled();
- });
- });
|