|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- 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();
- });
- });
|