From 7632881468259e286c92f9dc614ba27bbd834e1e Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 23 Nov 2018 18:37:44 +0100
Subject: [PATCH 1/3] test: more coverage

---
 package.json                                     | 11 ++++++++++-
 .../__tests__/DefaultHeader.test.js              |  3 ++-
 .../__tests__/DefaultLayout.test.js              | 10 ++++++++++
 src/setupTests.js                                | 11 +++++++++++
 src/views/Base/Dropdowns/Dropdowns.test.js       | 16 ++++++++++++++++
 src/views/Pages/Login/Login.test.js              |  3 ++-
 src/views/Theme/Colors/Colors.test.js            |  4 ++--
 src/views/Users/User.test.js                     | 15 +++++++++++++++
 src/views/Users/Users.test.js                    |  3 ++-
 9 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 src/containers/DefaultLayout/__tests__/DefaultLayout.test.js
 create mode 100644 src/views/Users/User.test.js

diff --git a/package.json b/package.json
index b175ba9a7..a1094215e 100644
--- a/package.json
+++ b/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"
+    ]
+  }
 }
diff --git a/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js b/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js
index 4bd014bd5..76887e028 100644
--- a/src/containers/DefaultLayout/__tests__/DefaultHeader.test.js
+++ b/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);
 });
diff --git a/src/containers/DefaultLayout/__tests__/DefaultLayout.test.js b/src/containers/DefaultLayout/__tests__/DefaultLayout.test.js
new file mode 100644
index 000000000..c0e178847
--- /dev/null
+++ b/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);
+});
diff --git a/src/setupTests.js b/src/setupTests.js
index 82edfc9e5..833205466 100644
--- a/src/setupTests.js
+++ b/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,
+    },
+  });
+}
diff --git a/src/views/Base/Dropdowns/Dropdowns.test.js b/src/views/Base/Dropdowns/Dropdowns.test.js
index 0f2d8510f..fa2616394 100644
--- a/src/views/Base/Dropdowns/Dropdowns.test.js
+++ b/src/views/Base/Dropdowns/Dropdowns.test.js
@@ -1,9 +1,25 @@
 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);
+  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()
 });
diff --git a/src/views/Pages/Login/Login.test.js b/src/views/Pages/Login/Login.test.js
index 5d5bbf44b..b10e7b859 100644
--- a/src/views/Pages/Login/Login.test.js
+++ b/src/views/Pages/Login/Login.test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { MemoryRouter } from 'react-router-dom';
 import Login from './Login';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<Login />, div);
+  ReactDOM.render(<MemoryRouter><Login/></MemoryRouter>, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/views/Theme/Colors/Colors.test.js b/src/views/Theme/Colors/Colors.test.js
index 754245eba..dbed6eb24 100644
--- a/src/views/Theme/Colors/Colors.test.js
+++ b/src/views/Theme/Colors/Colors.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Colors from './Colors';
-import { shallow } from 'enzyme'
+import { mount } from 'enzyme'
 
 it('renders without crashing', () => {
-  shallow(<Colors />);
+  mount(<Colors />);
 });
diff --git a/src/views/Users/User.test.js b/src/views/Users/User.test.js
new file mode 100644
index 000000000..df0e3f4c3
--- /dev/null
+++ b/src/views/Users/User.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {MemoryRouter} from 'react-router-dom';
+import { mount } from 'enzyme'
+import User from './User';
+
+
+it('renders without crashing', () => {
+  const wrapper = mount(
+    <MemoryRouter>
+      <User match={{params: {id: "1"}, isExact: true, path: "/users/:id", name: "User details"}}/>
+    </MemoryRouter>
+  );
+  expect(wrapper.containsMatchingElement(<strong>Samppa Nori</strong>)).toEqual(true)
+  wrapper.unmount()
+});
diff --git a/src/views/Users/Users.test.js b/src/views/Users/Users.test.js
index faab45ec9..946fec612 100644
--- a/src/views/Users/Users.test.js
+++ b/src/views/Users/Users.test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { MemoryRouter } from 'react-router-dom';
 import Users from './Users';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<Users />, div);
+  ReactDOM.render(<MemoryRouter><Users /></MemoryRouter>, div);
   ReactDOM.unmountComponentAtNode(div);
 });

From 52a68868cd4c3ae372f125082640a32908bc4ef4 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Mon, 26 Nov 2018 18:28:27 +0100
Subject: [PATCH 2/3] refactor(Tabs): cleanup, test coverage

---
 src/views/Base/Tabs/Tabs.js      | 204 +++++++++++--------------------
 src/views/Base/Tabs/Tabs.test.js |  12 ++
 2 files changed, 85 insertions(+), 131 deletions(-)

diff --git a/src/views/Base/Tabs/Tabs.js b/src/views/Base/Tabs/Tabs.js
index de7dc3e21..cdec062ed 100644
--- a/src/views/Base/Tabs/Tabs.js
+++ b/src/views/Base/Tabs/Tabs.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
+import React, {Component} from 'react';
+import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
 import classnames from 'classnames';
 
 class Tabs extends Component {
@@ -9,16 +9,36 @@ class Tabs extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      activeTab: '1',
+      activeTab: new Array(4).fill('1'),
     };
   }
 
-  toggle(tab) {
-    if (this.state.activeTab !== tab) {
-      this.setState({
-        activeTab: tab,
-      });
-    }
+  lorem() {
+    return 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
+  }
+
+  toggle(tabPane, tab) {
+    const newArray = this.state.activeTab.slice()
+    newArray[tabPane] = tab
+    this.setState({
+      activeTab: newArray,
+    });
+  }
+
+  tabPane() {
+    return (
+      <>
+        <TabPane tabId="1">
+          {`1. ${this.lorem()}`}
+        </TabPane>
+        <TabPane tabId="2">
+          {`2. ${this.lorem()}`}
+        </TabPane>
+        <TabPane tabId="3">
+          {`3. ${this.lorem()}`}
+        </TabPane>
+      </>
+    );
   }
 
   render() {
@@ -29,207 +49,129 @@ class Tabs extends Component {
             <Nav tabs>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '1' })}
-                  onClick={() => { this.toggle('1'); }}
+                  active={this.state.activeTab[0] === '1'}
+                  onClick={() => { this.toggle(0, '1'); }}
                 >
                   Home
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
-                  onClick={() => { this.toggle('2'); }}
+                  active={this.state.activeTab[0] === '2'}
+                  onClick={() => { this.toggle(0, '2'); }}
                 >
                   Profile
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
-                  onClick={() => { this.toggle('3'); }}
+                  active={this.state.activeTab[0] === '3'}
+                  onClick={() => { this.toggle(0, '3'); }}
                 >
                   Messages
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
-              <TabPane tabId="1">
-                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="2">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="3">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
+            <TabContent activeTab={this.state.activeTab[0]}>
+              {this.tabPane()}
             </TabContent>
           </Col>
           <Col xs="12" md="6" className="mb-4">
             <Nav tabs>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '1' })}
-                  onClick={() => { this.toggle('1'); }}
+                  active={this.state.activeTab[1] === '1'}
+                  onClick={() => { this.toggle(1, '1'); }}
                 >
                   <i className="icon-calculator"></i>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
-                  onClick={() => { this.toggle('2'); }}
+                  active={this.state.activeTab[1] === '2'}
+                  onClick={() => { this.toggle(1, '2'); }}
                 >
                   <i className="icon-basket-loaded"></i>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
-                  onClick={() => { this.toggle('3'); }}
+                  active={this.state.activeTab[1] === '3'}
+                  onClick={() => { this.toggle(1, '3'); }}
                 >
                   <i className="icon-pie-chart"></i>
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
-              <TabPane tabId="1">
-                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="2">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="3">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-            </TabContent>
+            <TabContent activeTab={this.state.activeTab[1]}>
+              {this.tabPane()}
+              </TabContent>
           </Col>
           <Col xs="12" md="6" className="mb-4">
             <Nav tabs>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '1' })}
-                  onClick={() => { this.toggle('1'); }}
+                  active={this.state.activeTab[2] === '1'}
+                  onClick={() => { this.toggle(2, '1'); }}
                 >
-                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator</span>
+                  <i className="icon-calculator"></i> <span className={this.state.activeTab[2] === '1' ? '' : 'd-none'}> Calculator</span>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
-                  onClick={() => { this.toggle('2'); }}
+                  active={this.state.activeTab[2] === '2'}
+                  onClick={() => { this.toggle(2, '2'); }}
                 >
                   <i className="icon-basket-loaded"></i> <span
-                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart</span>
+                  className={this.state.activeTab[2] === '2' ? '' : 'd-none'}> Shopping cart</span>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
-                  onClick={() => { this.toggle('3'); }}
+                  className={classnames({ active: this.state.activeTab[2] === '3' })}
+                  onClick={() => { this.toggle(2,'3'); }}
                 >
-                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
+                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab[2] === '3' ? '' : 'd-none'}> Charts</span>
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
-              <TabPane tabId="1">
-                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="2">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="3">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
+            <TabContent activeTab={this.state.activeTab[2]}>
+              {this.tabPane()}
             </TabContent>
           </Col>
           <Col xs="12" md="6" className="mb-4">
             <Nav tabs>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '1' })}
-                  onClick={() => { this.toggle('1'); }}
+                  active={this.state.activeTab[3] === '1'}
+                  onClick={() => { this.toggle(3, '1'); }}
                 >
-                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
-                  color="success">New</Badge>
+                  <i className="icon-calculator"></i>
+                  <span className={this.state.activeTab[3] === '1' ? '' : 'd-none'}> Calc</span>
+                  {'\u00A0'}<Badge color="success">New</Badge>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
-                  onClick={() => { this.toggle('2'); }}
+                  active={this.state.activeTab[3] === '2'}
+                  onClick={() => { this.toggle(3, '2'); }}
                 >
-                  <i className="icon-basket-loaded"></i> <span
-                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
+                  <i className="icon-basket-loaded"></i>
+                  <span className={this.state.activeTab[3] === '2' ? '' : 'd-none'}> Cart</span>
+                  {'\u00A0'}<Badge pill color="danger">29</Badge>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
-                  onClick={() => { this.toggle('3'); }}
-                >
-                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
+                  active={this.state.activeTab[3] === '3'}
+                  onClick={() => { this.toggle(3, '3'); }} >
+                    <i className="icon-pie-chart"></i>
+                    <span className={this.state.activeTab[3] === '3' ? '' : 'd-none'}> Charts</span>
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
-              <TabPane tabId="1">
-                1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="2">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
-              <TabPane tabId="3">
-                2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                officia deserunt mollit anim id est laborum.
-              </TabPane>
+            <TabContent activeTab={this.state.activeTab[3]}>
+              {this.tabPane()}
             </TabContent>
           </Col>
         </Row>
diff --git a/src/views/Base/Tabs/Tabs.test.js b/src/views/Base/Tabs/Tabs.test.js
index 4a10e40cf..6d3d51a2f 100644
--- a/src/views/Base/Tabs/Tabs.test.js
+++ b/src/views/Base/Tabs/Tabs.test.js
@@ -1,9 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs from './Tabs';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Tabs />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<Tabs />);
+  for (let pane=0; pane<4; pane++) {
+    for( let tabId=1; tabId<4; tabId++) {
+      let Tab = wrapper.find('.nav-tabs .nav-item .nav-link').at((3*pane)+tabId-1);
+      Tab.simulate('click');
+      expect(wrapper.state().activeTab[pane]).toEqual((tabId).toString());
+    }
+  }
+  wrapper.unmount()
+});

From 310fa608b1e5cd0f5d882664debf5bcca877f6e3 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Mon, 26 Nov 2018 19:54:54 +0100
Subject: [PATCH 3/3] test: add coverage

---
 src/App.test.js                               | 25 ++------
 src/views/Base/Collapses/Collapses.js         |  5 +-
 src/views/Base/Collapses/Collapses.test.js    | 64 +++++++++++++++++++
 src/views/Base/Dropdowns/Dropdowns.test.js    |  2 +
 src/views/Base/Forms/Forms.test.js            | 30 +++++++++
 src/views/Base/ListGroups/ListGroups.test.js  | 10 +++
 src/views/Base/Navs/Navs.test.js              | 10 +++
 .../ButtonDropdowns/ButtonDropdowns.js        | 12 ++--
 .../ButtonDropdowns/ButtonDropdowns.test.js   | 11 ++++
 .../Buttons/ButtonGroups/ButtonGroups.js      |  4 +-
 .../Buttons/ButtonGroups/ButtonGroups.test.js | 10 +++
 11 files changed, 155 insertions(+), 28 deletions(-)

diff --git a/src/App.test.js b/src/App.test.js
index 11afb3105..7af377dfc 100644
--- a/src/App.test.js
+++ b/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()
+});
diff --git a/src/views/Base/Collapses/Collapses.js b/src/views/Base/Collapses/Collapses.js
index 0fd28c21a..aab9258cc 100644
--- a/src/views/Base/Collapses/Collapses.js
+++ b/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>
diff --git a/src/views/Base/Collapses/Collapses.test.js b/src/views/Base/Collapses/Collapses.test.js
index 0a6cf6d19..80d543459 100644
--- a/src/views/Base/Collapses/Collapses.test.js
+++ b/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()
+  });
+});
diff --git a/src/views/Base/Dropdowns/Dropdowns.test.js b/src/views/Base/Dropdowns/Dropdowns.test.js
index fa2616394..ecc269fb6 100644
--- a/src/views/Base/Dropdowns/Dropdowns.test.js
+++ b/src/views/Base/Dropdowns/Dropdowns.test.js
@@ -7,6 +7,8 @@ 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);
diff --git a/src/views/Base/Forms/Forms.test.js b/src/views/Base/Forms/Forms.test.js
index bb2396a79..952f0a9ef 100644
--- a/src/views/Base/Forms/Forms.test.js
+++ b/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()
+  });
+})
diff --git a/src/views/Base/ListGroups/ListGroups.test.js b/src/views/Base/ListGroups/ListGroups.test.js
index 9923f326f..6b9f39874 100644
--- a/src/views/Base/ListGroups/ListGroups.test.js
+++ b/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()
+});
diff --git a/src/views/Base/Navs/Navs.test.js b/src/views/Base/Navs/Navs.test.js
index 3193dabd3..d00d93021 100644
--- a/src/views/Base/Navs/Navs.test.js
+++ b/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()
+});
diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
index 337fcb542..4bc524372 100644
--- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
+++ b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
@@ -205,7 +205,7 @@ class ButtonDropdowns extends Component {
                 <i className="fa fa-align-justify"></i><strong>Dropdown directions</strong>
               </CardHeader>
               <CardBody>
-                <ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
+                <ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[13]} toggle={() => { this.toggle(13); }}>
                   <DropdownToggle caret size="lg">
                     Direction Up
                   </DropdownToggle>
@@ -216,7 +216,7 @@ class ButtonDropdowns extends Component {
                     <DropdownItem>Another Action</DropdownItem>
                   </DropdownMenu>
                 </ButtonDropdown>
-                <ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
+                <ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[14]} toggle={() => { this.toggle(14); }}>
                   <DropdownToggle caret size="lg">
                     Direction Left
                   </DropdownToggle>
@@ -227,7 +227,7 @@ class ButtonDropdowns extends Component {
                     <DropdownItem>Another Action</DropdownItem>
                   </DropdownMenu>
                 </ButtonDropdown>
-                <ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
+                <ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
                   <DropdownToggle caret size="lg">
                     Direction Right
                   </DropdownToggle>
@@ -238,7 +238,7 @@ class ButtonDropdowns extends Component {
                     <DropdownItem>Another Action</DropdownItem>
                   </DropdownMenu>
                 </ButtonDropdown>
-                <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
+                <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
                   <DropdownToggle caret size="lg">
                     Default Down
                   </DropdownToggle>
@@ -256,7 +256,7 @@ class ButtonDropdowns extends Component {
                 <i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong>
               </CardHeader>
               <CardBody>
-                <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[13]} toggle={() => { this.toggle(13); }}>
+                <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
                   <DropdownToggle caret size="lg">
                     Large Button
                   </DropdownToggle>
@@ -267,7 +267,7 @@ class ButtonDropdowns extends Component {
                     <DropdownItem>Another Action</DropdownItem>
                   </DropdownMenu>
                 </ButtonDropdown>
-                <ButtonDropdown isOpen={this.state.dropdownOpen[14]} toggle={() => { this.toggle(14); }}>
+                <ButtonDropdown isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
                   <DropdownToggle caret size="sm">
                     Small Button
                   </DropdownToggle>
diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js
index 9c44fb196..26d3c616f 100644
--- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js
+++ b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { mount } from 'enzyme'
 import ButtonDropdowns from './ButtonDropdowns';
 
 it('renders without crashing', () => {
@@ -7,3 +8,13 @@ it('renders without crashing', () => {
   ReactDOM.render(<ButtonDropdowns />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<ButtonDropdowns />);
+  for (let i=0; i<19; i++) {
+    let ButtonDropdown = wrapper.find('button.dropdown-toggle').at(i);
+    ButtonDropdown.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  wrapper.unmount()
+});
+
diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.js b/src/views/Buttons/ButtonGroups/ButtonGroups.js
index 454c5471c..bf1822544 100644
--- a/src/views/Buttons/ButtonGroups/ButtonGroups.js
+++ b/src/views/Buttons/ButtonGroups/ButtonGroups.js
@@ -66,7 +66,7 @@ class ButtonGroups extends Component {
                 <ButtonGroup vertical>
                   <Button>1</Button>
                   <Button>2</Button>
-                  <ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
+                  <ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(0); }}>
                     <DropdownToggle caret>
                       Dropdown
                     </DropdownToggle>
@@ -135,7 +135,7 @@ class ButtonGroups extends Component {
                 <ButtonGroup>
                   <Button>1</Button>
                   <Button>2</Button>
-                  <ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
+                  <ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(1); }}>
                     <DropdownToggle caret>
                       Dropdown
                     </DropdownToggle>
diff --git a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js b/src/views/Buttons/ButtonGroups/ButtonGroups.test.js
index 6ab857b83..72186c4ee 100644
--- a/src/views/Buttons/ButtonGroups/ButtonGroups.test.js
+++ b/src/views/Buttons/ButtonGroups/ButtonGroups.test.js
@@ -1,9 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ButtonGroups from './ButtonGroups';
+import {mount} from 'enzyme/build';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<ButtonGroups />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+it('toggle click without crashing', () => {
+  const wrapper = mount(<ButtonGroups />);
+  for (let i=0; i<2; i++) {
+    let ButtonGroup = wrapper.find('button.dropdown-toggle').at(i);
+    ButtonGroup.simulate('click');
+    expect(wrapper.state().dropdownOpen[i]).toEqual(true);
+  }
+  wrapper.unmount()
+});