tesseract/packages/web/categories/option/react/src/components/ToggleButton/ToggleButton.test.tsx

import * as React from 'react';
import {
  render,
  screen
} from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import * as ButtonBase from '@tesseract-design/web-base-button';
import * as CheckControlBase from '@tesseract-design/web-base-checkcontrol';
import { vi } from 'vitest';
import { ToggleButton } from '.';

vi.mock('@tesseract-design/web-base-button');
vi.mock('@tesseract-design/web-base-checkcontrol');

describe('ToggleButton', () => {
  it('renders a checkbox', () => {
    render(
      <ToggleButton />
    );
    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toBeInTheDocument();
  });

  it('renders an indeterminate checkbox', () => {
    render(
      <ToggleButton
        indeterminate
      />
    );
    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toHaveProperty('indeterminate', true);
  });

  it('renders a subtext', () => {
    render(
      <ToggleButton
        subtext="subtext"
      />
    );
    const subtext: HTMLElement = screen.getByTestId('subtext');
    expect(subtext).toBeInTheDocument();
  });

  it('renders a badge', () => {
    render(
      <ToggleButton
        badge="badge"
      />
    );
    const badge: HTMLElement = screen.getByTestId('badge');
    expect(badge).toBeInTheDocument();
  });

  describe('on indeterminate', () => {
    it('renders an indeterminate checkbox', () => {
      render(
        <ToggleButton
          indeterminate
        />
      );
      const checkbox = screen.getByRole('checkbox');
      expect(checkbox).toHaveProperty('indeterminate', true);
    });

    it('acknowledges passed ref', () => {
      const ref = React.createRef<HTMLInputElement>()
      render(
        <ToggleButton
          indeterminate
          ref={ref}
        />
      );
      expect(ref.current).toHaveProperty('indeterminate', true);
    });
  });

  it('handles click events', () => {
    const onClick = vi.fn().mockImplementationOnce((e) => { e.preventDefault(); })
    render(
      <ToggleButton
        onClick={onClick}
      />
    );
    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
    userEvent.click(checkbox);
    expect(onClick).toBeCalled();
  });

  it('renders a compact button', () => {
    render(
      <ToggleButton
        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(
        <ToggleButton
          size={size}
        />
      );

      expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
        size,
      }));
    });

    it('renders badge styles', () => {
      render(
        <ToggleButton
          size={size}
          badge="badge"
        />
      );

      expect(ButtonBase.BadgeContainer).toBeCalledWith(expect.objectContaining({
        size,
      }));
    });
  });

  it.each(Object.values(ButtonBase.ButtonVariant))('renders a button with variant %s', (variant) => {
    render(
      <ToggleButton
        variant={variant}
      />
    );

    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
      variant,
    }));
  });

  it('renders a bordered button', () => {
    render(
      <ToggleButton
        border
      />
    );

    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
      border: true,
    }));
  });

  it('renders a block button', () => {
    render(
      <ToggleButton
        block
      />
    );

    expect(ButtonBase.Button).toBeCalledWith(expect.objectContaining({
      block: true,
    }));

    expect(ButtonBase.Border).toBeCalledWith(expect.objectContaining({
      block: true,
    }));

    expect(CheckControlBase.ClickAreaWrapper).toBeCalledWith(expect.objectContaining({
      block: true,
    }));
  });

  it('renders children', () => {
    render(
      <ToggleButton>
        Foo
      </ToggleButton>
    );

    const children: HTMLElement = screen.getByTestId('children');
    expect(children).toHaveTextContent('Foo');
  });

  it('renders a disabled button', () => {
    render(
      <ToggleButton
        disabled
      />
    );
    const checkbox: HTMLButtonElement = screen.getByRole('checkbox');
    expect(checkbox).toBeDisabled();
  });

  it('handles change events', () => {
    const onChange = vi.fn().mockImplementationOnce((e) => { e.preventDefault(); })
    render(
      <ToggleButton
        onChange={onChange}
      />
    );
    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
    userEvent.click(checkbox);
    expect(onChange).toBeCalled();
  });
});