import React from 'react';
import { mount } from 'enzyme';

import Modal from '.';
import ModalHeader from './Header';
import ModalBody from './Body';
import ModalFooter from './Footer';

describe('Modal', () => {
  let node;

  beforeEach(() => {
    node = mount(<Modal>Hello, world.</Modal>);
    node.setState({ open: true });

    const modalRoot = document.createElement('div');
    modalRoot.setAttribute('id', 'modal-root');
    modalRoot.classList.add('ModalWrapper');

    const body = document.querySelector('body');
    body.appendChild(modalRoot);
  });

  afterEach(() => {
    node.unmount();
  });

  it('displays the <Modal> element', () => {
    expect(node.find('.Modal')).toHaveLength(1);
  });

  it('should toggle state.open', () => {
    node.instance().toggle();
    expect(node.state('open')).toBe(false);
    node.instance().toggle(false);
    expect(node.state('open')).toBe(false);
  });

  it('displays the small <Modal>', () => {
    node = mount(<Modal size="sm">Hello, world.</Modal>);
    expect(node.find('.Modal').hasClass('Modal_sm')).toBe(true);
  });

  it('displays the <Modal> vertically centered', () => {
    node = mount(<Modal verticalCenter>Hello, world.</Modal>);
    expect(node.find('.Modal').hasClass('Modal_verticalCenter')).toBe(true);
  });

  it('displays the <Modal> with a header, body, and footer', () => {
    node = mount(
      <Modal>
        <ModalHeader />
        <ModalBody />
        <ModalFooter />
      </Modal>
    );
    expect(node.find('header').hasClass('Modal-Header')).toBe(true);
    expect(node.find('.Modal-Body')).toHaveLength(1);
    expect(node.find('footer').hasClass('Modal-Footer')).toBe(true);
  });

  it('displays the <Modal> with a scrollable body', () => {
    node = mount(
      <Modal scrollable>
        <ModalHeader />
        <ModalBody />
        <ModalFooter />
      </Modal>
    );
    expect(node.find('.Modal').hasClass('Modal_scrollable')).toBe(true);
  });
});
