Merge pull request #134 from coreui/dev-testing

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 React from 'react';
-// import ReactDOM from 'react-dom';
+import {shallow} from 'enzyme/build';
-// import App from './App';
+import App from './App';
-//
-// jest.mock('react-chartjs-2', () => ({
-//   Line: () => null,
-//   Polar: () => null,
-//   Pie: () => null,
-//   Radar: () => null,
-//   Bar: () => null,
-//   Doughnut: () => null,
-// }));
 
-// 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,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { mount } from 'enzyme'
 import Dropdowns from './Dropdowns';
 
 it('renders without crashing', () => {
@@ -7,3 +8,20 @@ it('renders without crashing', () => {
   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()
+});

src/views/Base/Tabs/Tabs.js

@@ -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) {
+  lorem() {
-    if (this.state.activeTab !== tab) {
+    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: tab,
+      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' })}
+                  active={this.state.activeTab[0] === '1'}
-                  onClick={() => { this.toggle('1'); }}
+                  onClick={() => { this.toggle(0, '1'); }}
                 >
                   Home
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
+                  active={this.state.activeTab[0] === '2'}
-                  onClick={() => { this.toggle('2'); }}
+                  onClick={() => { this.toggle(0, '2'); }}
                 >
                   Profile
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
+                  active={this.state.activeTab[0] === '3'}
-                  onClick={() => { this.toggle('3'); }}
+                  onClick={() => { this.toggle(0, '3'); }}
                 >
                   Messages
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
+            <TabContent activeTab={this.state.activeTab[0]}>
-              <TabPane tabId="1">
+              {this.tabPane()}
-                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' })}
+                  active={this.state.activeTab[1] === '1'}
-                  onClick={() => { this.toggle('1'); }}
+                  onClick={() => { this.toggle(1, '1'); }}
                 >
                   <i className="icon-calculator"></i>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '2' })}
+                  active={this.state.activeTab[1] === '2'}
-                  onClick={() => { this.toggle('2'); }}
+                  onClick={() => { this.toggle(1, '2'); }}
                 >
                   <i className="icon-basket-loaded"></i>
                 </NavLink>
               </NavItem>
               <NavItem>
                 <NavLink
-                  className={classnames({ active: this.state.activeTab === '3' })}
+                  active={this.state.activeTab[1] === '3'}
-                  onClick={() => { this.toggle('3'); }}
+                  onClick={() => { this.toggle(1, '3'); }}
                 >
                   <i className="icon-pie-chart"></i>
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
+            <TabContent activeTab={this.state.activeTab[1]}>
-              <TabPane tabId="1">
+              {this.tabPane()}
-                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' })}
+                  active={this.state.activeTab[2] === '1'}
-                  onClick={() => { this.toggle('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' })}
+                  active={this.state.activeTab[2] === '2'}
-                  onClick={() => { this.toggle('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' })}
+                  className={classnames({ active: this.state.activeTab[2] === '3' })}
-                  onClick={() => { this.toggle('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}>
+            <TabContent activeTab={this.state.activeTab[2]}>
-              <TabPane tabId="1">
+              {this.tabPane()}
-                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' })}
+                  active={this.state.activeTab[3] === '1'}
-                  onClick={() => { this.toggle('1'); }}
+                  onClick={() => { this.toggle(3, '1'); }}
                 >
-                  <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
+                  <i className="icon-calculator"></i>
-                  color="success">New</Badge>
+                  <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' })}
+                  active={this.state.activeTab[3] === '2'}
-                  onClick={() => { this.toggle('2'); }}
+                  onClick={() => { this.toggle(3, '2'); }}
                 >
-                  <i className="icon-basket-loaded"></i> <span
+                  <i className="icon-basket-loaded"></i>
-                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
+                  <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' })}
+                  active={this.state.activeTab[3] === '3'}
-                  onClick={() => { this.toggle('3'); }}
+                  onClick={() => { this.toggle(3, '3'); }} >
-                >
+                    <i className="icon-pie-chart"></i>
-                  <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
+                    <span className={this.state.activeTab[3] === '3' ? '' : 'd-none'}> Charts</span>
                 </NavLink>
               </NavItem>
             </Nav>
-            <TabContent activeTab={this.state.activeTab}>
+            <TabContent activeTab={this.state.activeTab[3]}>
-              <TabPane tabId="1">
+              {this.tabPane()}
-                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>
         </Row>

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()
+});

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>

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()
+});
+

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>

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()
+});

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);
 });

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 />);
 });

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()
+});

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);
 });