nextui/packages/components/switch/__tests__/switch.test.tsx

import * as React from "react";
import {act, render} from "@testing-library/react";

import {Switch} from "../src";

describe("Switch", () => {
  it("should render correctly", () => {
    const wrapper = render(<Switch aria-label="switch" />);

    expect(() => wrapper.unmount()).not.toThrow();
  });

  it("ref should be forwarded", () => {
    const ref = React.createRef<HTMLDivElement>();

    render(<Switch ref={ref} aria-label="switch" />);
    expect(ref.current).not.toBeNull();
  });

  it("should check and uncheck", () => {
    const {getByRole} = render(<Switch aria-label="switch" />);

    const checkbox = getByRole("switch");

    expect(checkbox).not.toBeChecked();

    act(() => {
      checkbox.click();
    });

    expect(checkbox).toBeChecked();

    act(() => {
      checkbox.click();
    });

    expect(checkbox).not.toBeChecked();
  });

  it("should not check if disabled", () => {
    const {getByRole} = render(<Switch isDisabled aria-label="switch" />);

    const checkbox = getByRole("switch");

    act(() => {
      checkbox.click();
    });

    expect(checkbox).not.toBeChecked();
  });

  it("should be checked if defaultSelected", () => {
    const {getByRole} = render(<Switch defaultSelected aria-label="switch" />);

    const checkbox = getByRole("switch");

    expect(checkbox).toBeChecked();
  });

  it("should not check if readOnly", () => {
    const {getByRole} = render(<Switch isReadOnly aria-label="switch" />);

    const checkbox = getByRole("switch");

    act(() => {
      checkbox.click();
    });

    expect(checkbox).not.toBeChecked();
  });

  it("should check and uncheck with controlled state", () => {
    const ControlledSwitch = ({onChange}: any) => {
      const [isSelected, setIsSelected] = React.useState(false);

      return (
        <Switch
          aria-label="switch"
          isSelected={isSelected}
          onChange={(selected) => {
            onChange?.(selected);
            setIsSelected(selected);
          }}
        />
      );
    };

    const onChange = jest.fn();

    const {getByRole} = render(<ControlledSwitch onChange={onChange} />);

    const checkbox = getByRole("switch");

    expect(checkbox).not.toBeChecked();

    act(() => {
      checkbox.click();
    });

    expect(checkbox).toBeChecked();

    expect(onChange).toHaveBeenCalledWith(true);
  });

  it("should render the thumbIcon", () => {
    const wrapper = render(
      <Switch aria-label="switch" thumbIcon={<svg data-testid="thumb-icon" />} />,
    );

    expect(wrapper.getByTestId("thumb-icon")).toBeInTheDocument();
  });

  it('should work with thumbIcon as "function"', () => {
    const thumbIcon = jest.fn(() => <svg data-testid="thumb-icon" />);

    const wrapper = render(<Switch aria-label="switch" thumbIcon={thumbIcon} />);

    expect(thumbIcon).toHaveBeenCalled();
    expect(wrapper.getByTestId("thumb-icon")).toBeInTheDocument();
  });

  it("should change the thumbIcon when clicked", () => {
    const thumbIcon = jest.fn((props) => {
      const {isSelected} = props;

      return isSelected ? (
        <svg data-testid="checked-thumb-icon" />
      ) : (
        <svg data-testid="unchecked-thumb-icon" />
      );
    });

    const {getByRole, container} = render(<Switch aria-label="switch" thumbIcon={thumbIcon} />);

    const checkbox = getByRole("switch");

    expect(checkbox).not.toBeChecked();

    act(() => {
      checkbox.click();
    });

    expect(checkbox).toBeChecked();

    expect(thumbIcon).toHaveBeenCalledWith(
      expect.objectContaining({
        isSelected: true,
      }),
    );

    const checkedThumbIcon = container.querySelector("[data-testid=checked-thumb-icon]");

    expect(checkedThumbIcon).toBeInTheDocument();

    act(() => {
      checkbox.click();
    });

    expect(checkbox).not.toBeChecked();

    expect(thumbIcon).toHaveBeenCalledWith(
      expect.objectContaining({
        isSelected: false,
      }),
    );

    const uncheckedThumbIcon = container.querySelector("[data-testid=unchecked-thumb-icon]");

    expect(uncheckedThumbIcon).toBeInTheDocument();
  });

  it('should work with "leftIcon"', () => {
    const wrapper = render(
      <Switch aria-label="switch" leftIcon={<svg data-testid="left-icon" />} />,
    );

    expect(wrapper.getByTestId("left-icon")).toBeInTheDocument();
  });

  it('should work with "rightIcon"', () => {
    const wrapper = render(
      <Switch aria-label="switch" rightIcon={<svg data-testid="right-icon" />} />,
    );

    expect(wrapper.getByTestId("right-icon")).toBeInTheDocument();
  });

  it('should work with "leftIcon" and "rightIcon"', () => {
    const wrapper = render(
      <Switch
        aria-label="switch"
        leftIcon={<svg data-testid="left-icon" />}
        rightIcon={<svg data-testid="right-icon" />}
      />,
    );

    expect(wrapper.getByTestId("left-icon")).toBeInTheDocument();
    expect(wrapper.getByTestId("right-icon")).toBeInTheDocument();
  });
});