/* eslint-disable no-underscore-dangle */

import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Collapse from '.';

describe('Collapse Component', () => {
  test('Render', () => {
    const { container } = render(
      <Collapse buttonText="Open" contentText="Content Text" initOpen />
    );

    const button = container.querySelector('button');
    const content = container.querySelector('div.content');

    expect(button.innerHTML).toBe('Open');
    expect(content.innerHTML).toBe('Content Text');
  });

  test('Open collapse', () => {
    const { container } = render(<Collapse buttonText="Open" contentText="Content Text" />);

    const button = container.querySelector('button');
    expect(button.classList.contains('active')).toBeFalsy();
    fireEvent.click(button);
    // jest does not render the component, hence testing the actual layout cannot be done due to the collapse using scrollHeight.
  });

  test('Open collapse with different initial height', () => {
    const { container } = render(
      <Collapse buttonText="Open" maxHeight={20} contentText="Content Text" />
    );

    const button = container.querySelector('button');
    fireEvent.click(button);
    expect(button.classList.contains('active')).toBeFalsy();
  });

  test('Only Mobile', () => {
    const { container } = render(
      <Collapse buttonText="Open" contentText="Content Text" onlyMobile />
    );

    expect(container.querySelector('button')).toBeTruthy();
  });
});
afterEach(() => {
  cleanup();
});
