Add Modal tests

javascripts/src/components/common/Modal.spec.tsx

@@ -1,10 +1,28 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import 'jest';
-import Modal from './Modal'
+import Modal, {ModalProps} from './Modal'
+import {shallow} from "enzyme";
+import {toJS} from "mobx";
+import toJson from "enzyme-to-json";
 
 describe('Modal', () => {
-  test('your test here', () => {
+  test('nothing displayed if inactive', () => {
-    expect(false).toBe(true)
+    let modal = shallow(<Modal childGenerator={() => <div/>}/>)
+
+    expect(toJson(modal)).toMatchSnapshot()
+  })
+
+  test('active modal displays', () => {
+    let onCloseWasCalled = false
+    let modal = shallow(<Modal titleText={"title text"}
+                               focusDialog={true}
+                               modalActive={true}
+                               onClose={() => { onCloseWasCalled = true}}
+                               childGenerator={() => <div/>}/>)
+    expect(toJson(modal)).toMatchSnapshot()
+    let modalComponent = modal.instance() as React.Component<ModalProps, {}> //casting to modal didn't work for reasons?
+    modalComponent.props.onClose()
+    expect(onCloseWasCalled).toBeTruthy()
   })
 })

javascripts/src/components/common/Modal.tsx

@@ -1,12 +1,11 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
 import AriaModal = require('react-aria-modal');
 
 export interface ModalProps
 {
-  onClose?: () => void
+  onClose?: () => void // if you want your modal to close, this needs to set modalActive to false
   modalActive?: boolean
   titleText?: string
   focusDialog?:boolean
@@ -14,11 +13,16 @@ export interface ModalProps
   childGenerator:() => JSX.Element
 }
 
-class Modal extends React.Component<ModalProps & InjectedIntlProps, {}> {
+class Modal extends React.Component<ModalProps, {}> {
+
+  static defaultProps = {
+    dialogStyle: {minWidth:'768px'}
+  }
+
   render() {
    const modal = this.props.modalActive ?
       <AriaModal mounted={this.props.modalActive} titleText={this.props.titleText} focusDialog={this.props.focusDialog}
-                 onExit={this.props.onClose} dialogStyle={this.props.dialogStyle || {minWidth:'768px'}}>
+                 onExit={this.props.onClose} dialogStyle={this.props.dialogStyle}>
         <header className='modal-header'>
           <h4 className='modal-header-title'>{this.props.titleText}</h4>
         </header>
@@ -31,7 +35,7 @@ class Modal extends React.Component<ModalProps & InjectedIntlProps, {}> {
   }
 }
 
-export default injectIntl(observer(Modal))
+export default observer(Modal)
 
 
 

javascripts/src/components/common/__snapshots__/Modal.spec.tsx.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal active modal displays 1`] = `
+<Displaced
+  dialogStyle={
+    Object {
+      "minWidth": "768px",
+    }
+  }
+  focusDialog={true}
+  mounted={true}
+  onExit={[Function]}
+  titleText="title text"
+>
+  <header
+    className="modal-header"
+  >
+    <h4
+      className="modal-header-title"
+    >
+      title text
+    </h4>
+  </header>
+  <div
+    className="modal-body"
+  >
+    <div />
+  </div>
+</Displaced>
+`;
+
+exports[`Modal nothing displayed if inactive 1`] = `""`;