monday-ui-react-core/src/components/ExpandCollapse/__tests__/expandCollapse.jest.js

Official monday.com UI resources for application development in React.js

import React from "react";
import renderer from "react-test-renderer";
import { render, fireEvent, screen } from "@testing-library/react";
import '@testing-library/jest-dom';
import ExpandCollapse from "../ExpandCollapse";

describe('ExpandCollapse', () => {
  it("renders correctly with empty props", () => {
    const tree = renderer.create(<ExpandCollapse />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it("Should render header component", function() {
    render(<ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>} />);

    expect(screen.getByText("Some Header")).toBeInTheDocument();
  });

  it("Should not render child components when closed", function() {
    render(
      <ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>}>
        <h1>Child 1</h1>
        <span>Child 2</span>
      </ExpandCollapse>
      );

    expect(screen.getByText("Some Header")).toBeInTheDocument();

    expect(screen.queryByText("Child 1")).toBeNull();
    expect(screen.queryByText("Child 2")).toBeNull();
  });

  it("Should render header and child components when defaultOpenState = true", function () {
    render(
      <ExpandCollapse defaultOpenState={true} 
      headerComponentRenderer={() => <h1>Some Header</h1>}>
        <h1>Child 1</h1>
        <span>Child 2</span>
      </ExpandCollapse>
      );

    expect(screen.getByText("Some Header")).toBeInTheDocument();

    expect(screen.getByText("Child 1")).toBeInTheDocument();
    expect(screen.getByText("Child 2")).toBeInTheDocument();
  });

  it("Should render child components after clicking component", function() {
    const { container } = render(
      <ExpandCollapse headerComponentRenderer={() => <h1>Some Header</h1>}>
        <h1>Child 1</h1>
        <span>Child 2</span>
      </ExpandCollapse>
      );

    expect(screen.getByText("Some Header")).toBeInTheDocument();

    expect(screen.queryByText("Child 1")).toBeNull();
    expect(screen.queryByText("Child 2")).toBeNull();

    fireEvent.click(container.firstChild.firstChild.firstChild);

    expect(screen.getByText("Child 1")).toBeInTheDocument();
    expect(screen.getByText("Child 2")).toBeInTheDocument();
  });

});