|
- import * as React from 'react';
- import {
- render,
- screen,
- } from '@testing-library/react';
- import userEvent from '@testing-library/user-event';
- import * as ButtonBase from '@tesseract-design/web-base-button';
- import { vi } from 'vitest';
- import {
- LinkButton,
- } from '.';
-
- vi.mock('@tesseract-design/web-base-button');
-
- describe('LinkButton', () => {
- it('renders a link', () => {
- render(
- <LinkButton
- href="http://example.com"
- />
- );
- const button: HTMLButtonElement = screen.getByRole('link');
- expect(button).toBeInTheDocument();
- });
-
- it('renders a subtext', () => {
- render(
- <LinkButton
- subtext="subtext"
- />
- );
- const subtext: HTMLElement = screen.getByTestId('subtext');
- expect(subtext).toBeInTheDocument();
- });
-
- it('renders a badge', () => {
- render(
- <LinkButton
- badge="badge"
- />
- );
- const badge: HTMLElement = screen.getByTestId('badge');
- expect(badge).toBeInTheDocument();
- });
-
- it('renders as a menu item', () => {
- render(
- <LinkButton
- menuItem
- />
- );
- const menuItemIndicator: HTMLElement = screen.getByTestId('menuItemIndicator');
- expect(menuItemIndicator).toBeInTheDocument();
- });
-
- it('handles click events', () => {
- const onClick = vi.fn().mockImplementationOnce((e) => { e.preventDefault() });
- render(
- <LinkButton
- href="http://example.com"
- onClick={onClick}
- />
- );
- const button: HTMLButtonElement = screen.getByRole('link');
- userEvent.click(button);
- expect(onClick).toBeCalled();
- });
-
- it('renders a compact button', () => {
- render(
- <LinkButton
- compact
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- compact: true,
- }));
-
- expect(ButtonBase.Label).toBeCalledWith(expect.objectContaining({
- compact: true,
- }));
- });
-
- describe.each(Object.values(ButtonBase.ButtonSize))('on %s size', (size) => {
- it('renders button styles', () => {
- render(
- <LinkButton
- size={size}
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('renders badge styles', () => {
- render(
- <LinkButton
- size={size}
- badge="badge"
- />
- );
-
- expect(ButtonBase.BadgeContainer).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
-
- it('renders indicator styles', () => {
- render(
- <LinkButton
- size={size}
- menuItem
- />
- );
-
- expect(ButtonBase.IndicatorWrapper).toBeCalledWith(expect.objectContaining({
- size,
- }));
- });
- });
-
- it.each(Object.values(ButtonBase.ButtonVariant))('renders a button with variant %s', (variant) => {
- render(
- <LinkButton
- variant={variant}
- />
- );
-
- expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
- variant,
- }));
- });
-
- it('renders a bordered button', () => {
- render(
- <LinkButton
- border
- />
- );
-
- expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
- border: true,
- }));
- });
-
- it('renders a block button', () => {
- render(
- <LinkButton
- block
- />
- );
-
- expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
- block: true,
- }));
- });
-
- it('renders children', () => {
- render(
- <LinkButton>
- Foo
- </LinkButton>
- );
-
- const children: HTMLElement = screen.getByTestId('children');
- expect(children).toHaveTextContent('Foo');
- });
-
- it('renders a disabled link', () => {
- render(
- <LinkButton
- href="http://example.com"
- disabled
- />
- );
- const button = screen.queryByRole('link');
- expect(button).toBeNull();
- });
- });
|