Added modal window and its tests

src/__test__/Modal.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Modal from '../components/Modal';
+import { mount, shallow } from 'enzyme';
+
+describe('<Modal />', () => {
+  it('Clicking show button shows a new node with class named "modal"', () => {
+    const modal = mount(<Modal />);
+    expect(modal.find('.modal').hasClass('active')).toBe(false);
+    modal.find('button.show').simulate('click');
+    expect(modal.find('.modal').hasClass('active')).toBe(true);
+  });
+
+  it('Clicking the close button close the modal window and make the class inactive', () => {
+    const modal = mount(<Modal />);
+    modal.find('button.show').simulate('click');
+    modal.find('button.hide').simulate('click');
+    expect(modal.find('.modal').hasClass('active')).toBe(false);
+  });
+});

src/components/Modal/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const ModalWindow = ({ isActive, onClickClose }) => <div className={'modal' + isActive}>
+<button className="hide" onClick={onClickClose}>X</button>
+Test Modal
+</div>
+
+export default class Modal extends React.Component {
+	state = {isActive: false}
+
+	handleClick = () => {
+		this.setState({isActive: true}) 
+	}
+	
+	handleCloseModal = () => {
+		this.setState({isActive: false})
+	}
+
+	render() {
+		return (
+		<div>
+			<button className="show" onClick={this.handleClick}>Show Modal</button>
+			<ModalWindow isActive={(this.state.isActive) ? ' active' : ''} onClickClose={this.handleCloseModal}/>
+		</div>)
+	}
+}

src/components/Nav/index.js

@@ -6,9 +6,10 @@ import './style.css';
 const Nav = () =>
   <ul className="nav">
     <li><NavLink to="/" exact={true}>Home</NavLink></li>
-    <li><NavLink to="/Toggle">Toggle</NavLink></li>
+    <li><NavLink to="/toggle">Toggle</NavLink></li>
     <li><NavLink to="/tabs">Tab View</NavLink></li>
     <li><NavLink to="/counter">Counter</NavLink></li>
+    <li><NavLink to="/modal">Modal</NavLink></li>
     <li><NavLink to="/tabss">Test 404</NavLink></li>
   </ul>;
 

src/routes.js

@@ -7,6 +7,7 @@ import Nav from './components/Nav';
 import Toggle from './components/Toggle';
 import Home from './components/Home';
 import TabView from './components/Tabs';
+import Modal from './components/Modal';
 import Counter from './components/Counter';
 import NotFound from './components/NotFound';
 
@@ -18,9 +19,10 @@ const Routes = props =>
       <main className="components">
         <Switch>
           <Route path="/" exact component={Home} />
-          <Route path="/Toggle" component={Toggle} />
+          <Route path="/toggle" component={Toggle} />
           <Route path="/tabs" component={TabView} />
           <Route path="/counter" component={Counter} />
+          <Route path="/modal" component={Modal} />
           <Route component={NotFound} />
         </Switch>
       </main>