button.test.tsx

import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from './button';

const testLabel = 'button';

const buttonBaseClass = 'a-btn';
const buttonLinkClass = 'a-btn--link';
const buttonFullXSClass = 'a-btn--full-on-xs';
const buttonSecondaryClass = 'a-btn--secondary';

describe('<Button />', () => {
  it('Propagates additional HTML properties to main component element', () => {
    const testClass = 'this-is-a-test-classname';
    const testTitle = 'test-title';

    render(
      <Button label={testLabel} className={testClass} title={testTitle} />,
    );
    expect(screen.getByText(testLabel)).toBeInTheDocument();
    expect(screen.getByText(testLabel)).toHaveClass(buttonBaseClass);
    expect(screen.getByText(testLabel)).toHaveClass(testClass);
    expect(screen.getByText(testLabel)).toHaveAttribute('title', testTitle);
  });

  it('Renders as a link', () => {
    render(<Button label={testLabel} isLink />);
    expect(screen.getByText(testLabel)).toHaveClass(buttonLinkClass);
  });

  it('Renders labels correctly', () => {
    render(<Button label={testLabel} />);
    expect(screen.getByText(testLabel)).toBeInTheDocument();
    expect(screen.getByText(testLabel).textContent).toEqual(testLabel);

    const wowLabel = 'wowzers';
    render(<Button label={wowLabel} />);
    expect(screen.getByText(wowLabel)).toBeInTheDocument();
    expect(screen.getByText(wowLabel).textContent).toEqual(wowLabel);
  });

  it('Renders children without a label', () => {
    render(
      <Button>
        <span data-testid='button-child'>Child</span>
      </Button>,
    );
    expect(screen.getByTestId('button-child')).toBeInTheDocument();
  });

  it('Throws an error when both left and right icons are provided', () => {
    expect(() =>
      render(<Button label={testLabel} iconLeft='left' iconRight='right' />),
    ).toThrow(
      'Button component: only one of iconLeft or iconRight can be provided',
    );
  });

  it('Renders left icon correctly', async () => {
    render(<Button label={testLabel} iconLeft='left' />);
    expect(screen.getByText(testLabel)).toBeInTheDocument();
    expect(screen.getByText(testLabel).textContent).toEqual(testLabel);
    expect(
      screen.getByText(testLabel, { selector: 'span' }),
    ).toBeInTheDocument();
    expect(await screen.findByTestId('button-icon-left')).toBeInTheDocument();
  });

  it('Renders right icon correctly', async () => {
    render(<Button label={testLabel} iconRight='right' />);
    expect(screen.getByText(testLabel)).toBeInTheDocument();
    expect(screen.getByText(testLabel).textContent).toEqual(testLabel);
    expect(
      screen.getByText(testLabel, { selector: 'span' }),
    ).toBeInTheDocument();
    expect(await screen.findByTestId('button-icon-right')).toBeInTheDocument();
  });

  it('Renders alternative appearances', () => {
    render(<Button label={testLabel} />);
    expect(screen.getByText(testLabel)).toHaveClass(buttonBaseClass);

    const secondaryLabel = 'secondary button';
    render(<Button label={secondaryLabel} appearance='secondary' />);
    expect(screen.getByText(secondaryLabel)).toHaveClass(buttonSecondaryClass);
  });

  it('Renders alternative sizes', () => {
    render(<Button label={testLabel} size='default' />);
    expect(screen.getByText(testLabel)).toHaveClass(buttonBaseClass);

    const labelFull = 'full width';
    render(<Button label={labelFull} size='full' />);
    expect(screen.getByText(labelFull)).toHaveClass(buttonFullXSClass);
  });

  it('Can be disabled', () => {
    render(<Button label={testLabel} />);
    expect(screen.getByText(testLabel)).toBeEnabled();

    const labelDisabled = 'disabled button';
    render(<Button label={labelDisabled} disabled />);
    expect(screen.getByText(labelDisabled)).toBeDisabled();
  });

  it('Tracks clicks', async () => {
    const onClick = vi.fn();
    render(<Button label={testLabel} onClick={onClick} />);
    const button = screen.getByText(testLabel);
    expect(button).toBeInTheDocument();

    await userEvent.click(button);
    expect(onClick).toHaveBeenCalledTimes(1);

    await userEvent.click(button);
    await userEvent.click(button);
    await userEvent.click(button);
    expect(onClick).toHaveBeenCalledTimes(4);
  });
});