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 b175ba9..a109421 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 4bd014b..76887e0 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 0000000..c0e1788
--- /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 82edfc9..8332054 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 0f2d851..fa26163 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 5d5bbf4..b10e7b8 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 754245e..dbed6eb 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 0000000..df0e3f4
--- /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 faab45e..946fec6 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      | 244 ++++++++++++-------------------
 src/views/Base/Tabs/Tabs.test.js |  12 ++
 2 files changed, 105 insertions(+), 151 deletions(-)

diff --git a/src/views/Base/Tabs/Tabs.js b/src/views/Base/Tabs/Tabs.js
index de7dc3e..cdec062 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 activeTab={this.state.activeTab[1]}>
+              {this.tabPane()}
+              </TabContent>
+          </Col>
+          <Col xs="12" md="6" className="mb-4">
+            <Nav tabs>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[2] === '1'}
+                  onClick={() => { this.toggle(2, '1'); }}
+                >
+                  <i className="icon-calculator"></i> <span className={this.state.activeTab[2] === '1' ? '' : 'd-none'}> Calculator</span>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  active={this.state.activeTab[2] === '2'}
+                  onClick={() => { this.toggle(2, '2'); }}
+                >
+                  <i className="icon-basket-loaded"></i> <span
+                  className={this.state.activeTab[2] === '2' ? '' : 'd-none'}> Shopping cart</span>
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink
+                  className={classnames({ active: this.state.activeTab[2] === '3' })}
+                  onClick={() => { this.toggle(2,'3'); }}
+                >
+                  <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[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>
+                  <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>
+                  <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>
-          </Col>
-          <Col xs="12" md="6" className="mb-4">
-            <Nav tabs>
-              <NavItem>
-                <NavLink
-                  className={classnames({ active: this.state.activeTab === '1' })}
-                  onClick={() => { this.toggle('1'); }}
-                >
-                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
-                  color="success">New</Badge>
-                </NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
-                  onClick={() => { this.toggle('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>
-                </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>
-                </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 4a10e40..6d3d51a 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 11afb31..7af377d 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 0fd28c2..aab9258 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 0a6cf6d..80d5434 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 fa26163..ecc269f 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 bb2396a..952f0a9 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 9923f32..6b9f398 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 3193dab..d00d930 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 337fcb5..4bc5243 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 9c44fb1..26d3c61 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 454c547..bf18225 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 6ab857b..72186c4 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()
+});