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 {
LinkButton,
LinkButtonDerivedElement,
} from '.';
expect.extend(matchers);
describe('LinkButton', () => {
afterEach(() => {
cleanup();
});
it('renders a button', () => {
render(
,
);
const button = screen.getByRole('link');
expect(button).toBeInTheDocument();
});
it('renders a subtext', () => {
render(
,
);
const subtext = screen.getByTestId('subtext');
expect(subtext).toBeInTheDocument();
});
it('renders a badge', () => {
render(
,
);
const badge = screen.getByTestId('badge');
expect(badge).toBeInTheDocument();
});
it('renders as a menu item', () => {
render(
,
);
const menuItemIndicator = screen.getByTestId('menuItemIndicator');
expect(menuItemIndicator).toBeInTheDocument();
});
it('handles click events', async () => {
const onClick = vi.fn().mockImplementationOnce(
(e: React.MouseEvent) => {
e.preventDefault();
},
);
render(
,
);
const button = screen.getByRole('link');
await userEvent.click(button);
expect(onClick).toBeCalled();
});
it('renders a compact link', () => {
render(
,
);
const button = screen.getByRole('link');
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 link styles', () => {
render(
,
);
const button = screen.getByRole('link');
expect(button).toHaveClass(className);
});
it('renders badge styles', () => {
render(
,
);
const badge = screen.getByTestId('badge');
expect(badge).toBeInTheDocument();
});
});
it.each`
variant | className
${'bare'} | ${'bg-negative'}
${'outline'} | ${'border-2'}
${'filled'} | ${'bg-primary'}
`('renders a link with $variant variant', ({
variant,
className,
}: { variant: Button.Variant, className: string }) => {
render(
,
);
const button = screen.getByRole('link');
expect(button).toHaveClass(className);
});
it('renders a block link', () => {
render(
,
);
const button = screen.getByRole('link');
expect(button).toHaveClass('w-full flex');
});
it('renders children', () => {
render(
Foo
,
);
const children = screen.getByTestId('children');
expect(children).toHaveTextContent('Foo');
});
it.each(Button.AVAILABLE_TYPES)('renders a link with type %s', (buttonType) => {
render(
,
);
const button = screen.getByRole('link');
expect(button).toHaveProperty('type', buttonType);
});
it('renders a disabled link', () => {
render(
,
);
const button = screen.queryByRole('link');
expect(button).toBeNull();
});
});