Wrote modal tests

.flowconfig

@@ -4,6 +4,7 @@ unsafe.enable_getters_and_setters=true
 module.name_mapper='.+\.s?css' -> 'empty/object'
 
 [ignore]
+.*/node_modules/config-chain/.*
 .*/node_modules/findup/.*
 .*/node_modules/jss/.*
 .*/node_modules/stylelint/.*

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/ClickModal.js

@@ -18,15 +18,15 @@ export default class ClickModal extends React.PureComponent {
         this.modalOpen = true;
     };
 
-    @action handleModalRequestClose = () => {
+    @action handleRequestClose = () => {
         this.modalOpen = false;
     };
 
     render() {
         return (
             <div className={this.props.className}>
                 {React.cloneElement(this.props.clickElement, {onClick: this.handleElementClick})}
-                <Modal isOpen={this.modalOpen} onRequestClose={this.handleModalRequestClose}>
+                <Modal isOpen={this.modalOpen} onRequestClose={this.handleRequestClose}>
                     {this.props.children}
                 </Modal>
             </div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Modal.js

@@ -7,15 +7,17 @@ export default class Modal extends React.PureComponent {
     props: {
         isOpen: boolean,
         children: React.Element<*>,
-        onRequestClose: () => void,
+        onRequestClose?: () => void,
     };
 
     static defaultProps = {
         isOpen: false,
     };
 
     requestClose = () => {
-        this.props.onRequestClose();
+        if (this.props.onRequestClose) {
+            this.props.onRequestClose();
+        }
     };
 
     handleBackdropClick = this.requestClose;

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/ClickModal.test.js

@@ -0,0 +1,48 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import ClickModal from '../ClickModal';
+import React from 'react';
+import {mount} from 'enzyme';
+import pretty from 'pretty';
+
+afterEach(() => document.body.innerHTML = '');
+
+test('The modal should initially not be rendered', () => {
+    const body = document.body;
+    const view = mount(
+        <ClickModal clickElement={<button>Open modal</button>}>
+            <p>Modal content</p>
+        </ClickModal>
+    ).render();
+    expect(view).toMatchSnapshot();
+    expect(body.innerHTML).toBe('');
+});
+
+test('The modal should be rendered when the button got clicked', () => {
+    const body = document.body;
+    const view = mount(
+        <ClickModal clickElement={<button>Open modal</button>}>
+            <p>Modal content</p>
+        </ClickModal>
+    );
+    view.render();
+
+    expect(body.innerHTML).toBe('');
+    view.find('button').simulate('click');
+    expect(pretty(body.innerHTML)).toMatchSnapshot();
+});
+
+test('The modal should close again when backdrop got clicked', () => {
+    const body = document.body;
+    const view = mount(
+        <ClickModal clickElement={<button>Open modal</button>}>
+            <p>Modal content</p>
+        </ClickModal>
+    );
+    view.render();
+
+    expect(body.innerHTML).toBe('');
+    view.find('button').simulate('click');
+    expect(pretty(body.innerHTML)).toMatchSnapshot();
+    body.getElementsByClassName('backdrop')[0].click();
+    expect(body.innerHTML).toBe('');
+});

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/Modal.test.js

@@ -0,0 +1,32 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import {mount, shallow} from 'enzyme';
+import Modal from '../Modal';
+import React from 'react';
+import pretty from 'pretty';
+
+afterEach(() => document.body.innerHTML = '');
+
+test('The component should render in body when open', () => {
+    const body = document.body;
+    const view = mount(<Modal isOpen={true}><p>Modal content</p></Modal>).render();
+    expect(view.html()).toBe(null);
+    expect(pretty(body.innerHTML)).toMatchSnapshot();
+});
+
+test('The component should not render in body when closed', () => {
+    const body = document.body;
+    const view = mount(<Modal isOpen={false}><p>Modal content</p></Modal>).render();
+    expect(view.html()).toBe(null);
+    expect(body.innerHTML).toBe('');
+});
+
+test('The component should request to be closed on click on backdrop', () => {
+    const requestCloseSpy = jest.fn();
+    const view = shallow(<Modal isOpen={false} onRequestClose={requestCloseSpy}><p>Modal content</p></Modal>);
+    const backdrop = view.find('.backdrop');
+    expect(backdrop.length).toBe(1);
+
+    expect(requestCloseSpy).toHaveBeenCalledTimes(0);
+    backdrop.simulate('click');
+    expect(requestCloseSpy).toHaveBeenCalledTimes(1);
+});

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/__snapshots__/ClickModal.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The modal should be rendered when the button got clicked 1`] = `
+"<div>
+  <div data-reactroot=\\"\\" class=\\"container\\">
+    <div class=\\"modal\\">
+      <p>Modal content</p>
+    </div>
+    <div class=\\"backdrop\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`The modal should close again when backdrop got clicked 1`] = `
+"<div>
+  <div data-reactroot=\\"\\" class=\\"container\\">
+    <div class=\\"modal\\">
+      <p>Modal content</p>
+    </div>
+    <div class=\\"backdrop\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`The modal should initially not be rendered 1`] = `
+<div>
+  <button>
+    Open modal
+  </button>
+</div>
+`;

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/__snapshots__/Modal.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The component should render in body when open 1`] = `
+"<div>
+  <div data-reactroot=\\"\\" class=\\"container\\">
+    <div class=\\"modal\\">
+      <p>Modal content</p>
+    </div>
+    <div class=\\"backdrop\\"></div>
+  </div>
+</div>"
+`;

src/Sulu/Bundle/AdminBundle/Resources/js/package.json

@@ -28,6 +28,7 @@
         "enzyme-to-json": "^1.5.1",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^20.0.4",
+        "pretty": "^2.0.0",
         "react-test-renderer": "^15.6.1"
     },
     "jest": {