import React from 'react';
import {mount, shallow} from 'enzyme';
import SlideBox from '../index';

describe('<SlideBox />', () => {
  let props;
  let mountedSlideBox;

  const slideBox = () => {
    if (!mountedSlideBox) {
      mountedSlideBox = mount(
        <SlideBox {...props} />
      );
    }
    return mountedSlideBox;
  };

  beforeEach(() => {
    props = {
      header: <h1>Header</h1>,
      content: <p>Content</p>,
      show: undefined,
      handleClose: jest.fn(),
    };
    mountedSlideBox = undefined;
  });

  it('always renders a wrapping div', () => {
    const divs = slideBox().find("div");
    expect(divs.length).toBeGreaterThan(0);
  });

  describe('the rendered div', () => {
    it('contains everything else that gets rendered', () => {
      const divs = slideBox().find("div");
      const wrappingDiv = divs.first();
      expect(wrappingDiv.children()).toEqual({});
    });

    it('has a className of show-slidebox if "show" props is true', () => {
      props.show = true;
      const divs = slideBox().find("div");
      const wrappingDiv = divs.first();
      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper show-slidebox');
    });

    it('has a className of hide-slidebox if "show" props is false', () => {
      props.show = false;
      const divs = slideBox().find("div");
      const wrappingDiv = divs.first();
      expect(wrappingDiv.props().className).toBe('modal-slidebox-wrapper hide-slidebox');
    });

    it('should render a div with class heading-title', () => {
      const divs = slideBox().find("div");
      const header = divs.find('.heading-title');
      expect(header.length).toBe(1);
    });

    it('should render a div with id box-actions', () => {
      const divs = slideBox().find("div");
      const header = divs.find('#box-actions');
      expect(header.length).toBe(1);
    });
  });

  describe('Slidebox header', () => {
    it('renders the element passed as header prop', () => {
      const renderedComponent = shallow(<SlideBox {...props}/>);
      expect(renderedComponent.find('.heading-title').contains(props.header)).toBe(true);
    });
  });

  describe('Slidebox Content', () => {
    it('renders the element passed as content prop', () => {
      const renderedComponent = shallow(<SlideBox {...props}/>);
      expect(renderedComponent.find('#slidebox-content').contains(props.content)).toBe(true);
    });
  });

  describe('when handleClose is defined', () => {
    it('sets onClick action of action box to be same as handleClose ', () => {
      const actionBox = slideBox().find('#box-actions');
      expect(actionBox.props().onClick).toBe(props.handleClose);
    });
  });

  describe('Box Actions Div', () => {
    it('renders one icon', () => {
      const renderedComponent = shallow(<SlideBox {...props}/>);
      const boxActionDiv = renderedComponent.find('#box-actions').first();
      const icon = boxActionDiv.find('i');
      expect(icon.length).toBe(1);
    });

    it('has close as the content for rendered icon', () => {
      const renderedComponent = shallow(<SlideBox {...props}/>);
      const boxActionDiv = renderedComponent.find('#box-actions').first();
      const icon = boxActionDiv.find('i');
      expect(icon.props().children).toBe('close');
    });
  });
});
