test: coverage

package.json

@@ -44,6 +44,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "test:cov": "react-scripts test --coverage",
     "test:debug": "react-scripts --inspect-brk test --runInBand",
     "eject": "react-scripts eject"
   },
@@ -58,5 +59,13 @@
     "not dead",
     "not ie <= 9",
     "not op_mini all"
-  ]
+  ],
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!**/*index.js",
+      "!src/serviceWorker.js",
+      "!src/polyfill.js"
+    ]
+  }
 }

src/App.test.js

@@ -1,20 +1,9 @@
-// import React from 'react';
-// import ReactDOM from 'react-dom';
-// import App from './App';
-//
-// jest.mock('react-chartjs-2', () => ({
-//   Line: () => null,
-//   Polar: () => null,
-//   Pie: () => null,
-//   Radar: () => null,
-//   Bar: () => null,
-//   Doughnut: () => null,
-// }));
+import React from 'react';
+import {shallow} from 'enzyme/build';
+import App from './App';
 
-// it('renders without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<App />, div);
-//   ReactDOM.unmountComponentAtNode(div);
-// });
 
-it('', () => {})
+it('mounts without crashing', () => {
+  const wrapper = shallow(<App />);
+  wrapper.unmount()
+});

src/containers/DefaultLayout/__tests__/DefaultHeader.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { MemoryRouter } from 'react-router-dom';
 import DefaultHeader from '../DefaultHeader';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<DefaultHeader />, div);
+  ReactDOM.render(<MemoryRouter><DefaultHeader /></MemoryRouter>, div);
   ReactDOM.unmountComponentAtNode(div);
 });

src/containers/DefaultLayout/__tests__/DefaultLayout.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {MemoryRouter, Route} from 'react-router-dom';
+import DefaultLayout from '../DefaultLayout';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<MemoryRouter><Route path="/" name="Home" component={DefaultLayout} /></MemoryRouter>, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/setupTests.js

@@ -2,3 +2,14 @@ import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 configure({ adapter: new Adapter() });
+
+if (global.document) {
+  document.createRange = () => ( {
+    setStart: () => {},
+    setEnd: () => {},
+    commonAncestorContainer: {
+      nodeName: 'BODY',
+      ownerDocument: document,
+    },
+  });
+}

src/views/Base/Collapses/Collapses.js

@@ -103,7 +103,8 @@ class Collapses extends Component {
                 </CardBody>
               </Collapse>
               <CardFooter>
-                <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+                <Button color="primary" onClick={this.toggle} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
+                <hr/>
                 <h5>Current state: {this.state.status}</h5>
               </CardFooter>
             </Card>
@@ -122,7 +123,7 @@ class Collapses extends Component {
                 </Fade>
               </CardBody>
               <CardFooter>
-                <Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
+                <Button color="primary" onClick={this.toggleFade} id="toggleFade1">Toggle Fade</Button>
               </CardFooter>
             </Card>
           </Col>

src/views/Base/Collapses/Collapses.test.js

@@ -1,9 +1,73 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Collapses from './Collapses';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Collapses />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+describe('toggle clicks', function() {
+  it('collapse without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let collapse = wrapper.find('#toggleCollapse1').at(0);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(false);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    wrapper.unmount()
+  });
+  it('fade without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let fade = wrapper.find('#toggleFade1').at(0);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(false);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(true);
+    wrapper.unmount()
+  });
+  it('accordion without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="collapseTwo"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(true);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="collapseThree"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(false);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(true);
+    accordion = wrapper.find('[aria-controls="collapseOne"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().accordion[0]).toEqual(true);
+    expect(wrapper.state().accordion[1]).toEqual(false);
+    expect(wrapper.state().accordion[2]).toEqual(false);
+    wrapper.unmount()
+  });
+  it('custom without crashing', () => {
+    const wrapper = mount(<Collapses />);
+    let accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(false);
+    expect(wrapper.state().custom[1]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="exampleAccordion1"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(true);
+    expect(wrapper.state().custom[1]).toEqual(false);
+    accordion = wrapper.find('[aria-controls="exampleAccordion2"]').at(0);
+    accordion.simulate('click');
+    expect(wrapper.state().custom[0]).toEqual(false);
+    expect(wrapper.state().custom[1]).toEqual(true);
+    wrapper.unmount()
+  });
+});

src/views/Base/Dropdowns/Dropdowns.test.js

@@ -1,9 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { mount } from 'enzyme'
 import Dropdowns from './Dropdowns';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Dropdowns />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Dropdowns />);
+  for (let i=0; i<5; i++) {
+    let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
+    Dropdown.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  for (let i=0; i<2; i++) {
+    let Dropdown = wrapper.find('[data-toggle="dropdown"]').at(0);
+    Dropdown.simulate('click');
+    expect(wrapper.state().dropdownOpen[5]).toEqual(true);
+    let DropdownItem = wrapper.find('div.dropdown-menu > .dropdown-item').at(i);
+    DropdownItem.simulate('click');
+    expect(wrapper.state().dropdownOpen[5]).toEqual(false);
+  }
+  wrapper.unmount()
+});

src/views/Base/Forms/Forms.test.js

@@ -1,9 +1,39 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Forms from './Forms';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Forms />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+describe('toggle clicks', function() {
+  it('dropdowns without crashing', () => {
+    const wrapper = mount(<Forms />);
+    for (let i = 0; i < 4; i++) {
+      let count = i === 0 ? 'first' : i === 1 ? 'second' : i === 2 ? 'third' : 'fourth'
+      let Dropdown = wrapper.find('button.dropdown-toggle').at(i);
+      Dropdown.simulate('click');
+      expect(wrapper.state()[count]).toEqual(true);
+    }
+    wrapper.unmount()
+  });
+  it('collapse without crashing', () => {
+    const wrapper = mount(<Forms />);
+    let collapse = wrapper.find('button.btn-minimize').at(0);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(false);
+    collapse.simulate('click');
+    expect(wrapper.state().collapse).toEqual(true);
+    wrapper.unmount()
+  });
+  it('fade without crashing', () => {
+    const wrapper = mount(<Forms />);
+    let fade = wrapper.find('button.btn-close').at(0);
+    fade.simulate('click');
+    expect(wrapper.state().fadeIn).toEqual(false);
+    wrapper.unmount()
+  });
+})

src/views/Base/ListGroups/ListGroups.test.js

@@ -1,9 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ListGroups from './ListGroups';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<ListGroups />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<ListGroups />);
+  for (let i=0; i<4; i++) {
+    let ListGroup = wrapper.find('#list-tab .list-group-item-action.list-group-item').at(i);
+    ListGroup.simulate('click');
+    expect(wrapper.state().activeTab).toEqual(i);
+  }
+  wrapper.unmount()
+});

src/views/Base/Navs/Navs.test.js

@@ -1,9 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Navs from './Navs';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Navs />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Navs />);
+  for (let i=0; i<2; i++) {
+    let Nav = wrapper.find('a.dropdown-toggle').at(i);
+    Nav.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  wrapper.unmount()
+});