Merge pull request #3 from coreui/dev-tests

test: add more coverage

Author: xidedix

package.json

@@ -32,9 +32,12 @@
     "react": "16.x"
   },
   "devDependencies": {
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "nwb": "0.21.x",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "sinon": "^4.4.9"
   },
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -47,10 +50,10 @@
     "url": "https://github.com/coreui/coreui-react/issues"
   },
   "keywords": [
-  "coreui", 
-  "react", 
-  "bootstrap",
-  "framework", 
-  "responsive"
+    "coreui",
+    "react",
+    "bootstrap",
+    "framework",
+    "responsive"
   ]
 }

tests/Aside.test.js

@@ -2,11 +2,23 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import { spy } from 'sinon'
+
 import AppAside from 'src/Aside'
 
+configure({ adapter: new Adapter() });
+
 describe('AppAside', () => {
   it('renders aside with class="aside-menu"', () => {
-    expect(render(<AppAside />))
-    .toContain('<aside class="aside-menu"></aside>')
-  })
+    expect(render(<AppAside fixed hidden display="lg">aside</AppAside>))
+    .toContain('<aside class="aside-menu">aside</aside>')
+  });
+  it('calls componentDidMount', () => {
+    spy(AppAside.prototype, 'componentDidMount');
+
+    const wrapper = mount(<AppAside fixed hidden display="lg" />);
+    expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true);
+  });
 })

tests/Footer.test.js

@@ -2,11 +2,23 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import { spy } from 'sinon'
+
 import AppFooter from 'src/Footer'
 
+configure({ adapter: new Adapter() });
+
 describe('AppFooter', () => {
   it('renders footer with class="app-footer"', () => {
     expect(render(<AppFooter />))
     .toContain('<footer class="app-footer"></footer>')
-  })
+  });
+  it('calls componentDidMount', () => {
+    spy(AppFooter.prototype, 'componentDidMount');
+
+    const wrapper = mount(<AppFooter fixed display="lg" />);
+    expect(AppFooter.prototype.componentDidMount.calledOnce).toEqual(true);
+  });
 })

tests/Header.test.js

@@ -2,11 +2,23 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import { spy } from 'sinon'
+
 import AppHeader from 'src/Header'
 
+configure({ adapter: new Adapter() });
+
 describe('AppHeader', () => {
   it('renders header with class="app-header"', () => {
-    expect(render(<AppHeader />))
+    expect(render(<AppHeader fixed />))
     .toContain('<header class="app-header navbar"></header>')
-  })
+  });
+  it('calls componentDidMount', () => {
+    spy(AppHeader.prototype, 'componentDidMount');
+
+    const wrapper = mount(<AppHeader fixed/>);
+    expect(AppHeader.prototype.componentDidMount.calledOnce).toEqual(true);
+  });
 })

tests/NavbarBrand.test.js

@@ -1,12 +1,17 @@
-import expect from 'expect'
-import React from 'react'
-import {renderToStaticMarkup as render} from 'react-dom/server'
+import expect from 'expect';
+import React from 'react';
+import { renderToStaticMarkup as render } from 'react-dom/server';
 
-import AppNavbarBrand from 'src/NavbarBrand'
+import logo from '../demo/src/assets/img/brand/logo.svg'
+import sygnet from '../demo/src/assets/img/brand/sygnet.svg'
+
+import AppNavbarBrand from 'src/NavbarBrand';
 
 describe('AppNavbarBrand', () => {
   it('renders anchor with class="navbar-brand"', () => {
-    expect(render(<AppNavbarBrand />))
-    .toContain('<a class="navbar-brand"></a>')
-  })
-})
+    expect(render(<AppNavbarBrand
+      full={{ src: logo, width: 89, height: 25, alt: 'CoreUI Logo' }}
+      minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Logo' }}
+    />)).toContain('class="navbar-brand"');
+  });
+});

tests/Sidebar.test.js

@@ -2,11 +2,23 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import { spy } from 'sinon'
+
 import AppSidebar from 'src/Sidebar'
 
+configure({ adapter: new Adapter() });
+
 describe('AppSidebar', () => {
   it('renders sidebar with class="sidebar"', () => {
-    expect(render(<AppSidebar />))
+    expect(render(<AppSidebar fixed display="lg" />))
     .toContain('<div class="sidebar"></div>')
-  })
+  });
+  it('calls componentDidMount', () => {
+    spy(AppSidebar.prototype, 'componentDidMount');
+
+    const wrapper = mount(<AppSidebar fixed display="lg" />);
+    expect(AppSidebar.prototype.componentDidMount.calledOnce).toEqual(true);
+  });
 })

tests/SidebarToggler.test.js

@@ -6,7 +6,7 @@ import AppSidebarToggler from 'src/SidebarToggler';
 
 describe('AppSidebarToggler', () => {
   it('renders button with class="navbar-toggler"', () => {
-    expect(render(<AppSidebarToggler />))
-    .toContain('<button type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>')
+    expect(render(<AppSidebarToggler className="d-lg-none" display="md" mobile />))
+    .toContain('<button type="button" class="d-lg-none navbar-toggler"><span class="navbar-toggler-icon"></span></button>')
   })
 })