react-conventions/test/RenderToLayer.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react';
import { mount } from 'enzyme';
import RenderToLayer from '../src/components/internal/RenderToLayer';

describe('RenderToLayer', () => {

  function renderElem() {
    return (
      <div className="test-div"></div>
    );
  }

  afterEach(function() {
    var elems = document.body.children;
    document.body.removeChild(elems[elems.length -1]);
  });

  it('should render an element at the bottom of the document body when the open property is set to true', () => {
    const wrapper = mount(<RenderToLayer render={renderElem} open={true} />);

    expect(document.body.getElementsByClassName('test-div')).to.have.length(1);
  });

  it('should remove a rendered element from the bottom of the document body when the open property is set to false', () => {
    const wrapper = mount(<RenderToLayer render={renderElem} open={true} />);

    expect(document.body.getElementsByClassName('test-div')).to.have.length(1);

    wrapper.setProps({open: false});

    expect(document.body.getElementsByClassName('test-div')).to.have.length(0);
  });

  it('should remove a rendered element from the bottom of the document body when the component is unmounted', () => {
    const wrapper = mount(<RenderToLayer render={renderElem} open={true} />);

    expect(document.body.getElementsByClassName('test-div')).to.have.length(1);

    wrapper.unmount();

    expect(document.body.getElementsByClassName('test-div')).to.have.length(0);
  });

  it('should not try to remove the rendered element twice', () => {
    const wrapper = mount(<RenderToLayer render={renderElem} open={true} />);

    expect(document.body.getElementsByClassName('test-div')).to.have.length(1);

    wrapper.setProps({open: false});

    expect(document.body.getElementsByClassName('test-div')).to.have.length(0);

    wrapper.unmount();

    expect(document.body.getElementsByClassName('test-div')).to.have.length(0);
  });
});