#24 added rendering tests for Header and Footer

jest.config.js

@@ -3,5 +3,8 @@ module.exports = {
     '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
     '\\.(gif|png|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js'
   },
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  globals: {
+    APP_VERSION: '0.0.0'
+  }
 }

src/components/footer/footer.js

@@ -4,29 +4,29 @@ import './footer.css'
 const Footer = () => {
   const version = APP_VERSION || null
   return (
-    <footer className="footer">
+    <footer className="footer" data-test="component-footer">
       <div className="container-fluid">
         <div className="row">
           <div className="col-lg">
             <nav className="float-lg-left">
               <ul>
                 <li>
-                  <a href="https://github.com/owlbeardm/equipment">GitHub</a>
+                  <a href="https://github.com/owlbeardm/equipment" data-test="social-link">GitHub</a>
                 </li>
                 <li>
-                  <a href="https://twitter.com/OwlbearDm">Twitter</a>
+                  <a href="https://twitter.com/OwlbearDm" data-test="social-link">Twitter</a>
                 </li>
                 <li>
-                  <a href="mailto:[email protected]?subject=Scrollbear: ">Email Me</a>
+                  <a href="mailto:[email protected]?subject=Scrollbear: " data-test="social-link">Email Me</a>
                 </li>
                 <li>
-                  <a href="https://c7d5a6.com/">Contacts</a>
+                  <a href="https://c7d5a6.com/" data-test="social-link">Contacts</a>
                 </li>
               </ul>
             </nav>
           </div>
           <div className="col-lg-auto">
-            <div className="copyright float-lg-right">
+            <div className="copyright float-lg-right" data-test="project-credits">
               <div className="row">
                 <div className="col-lg-auto pr-1">
                   <span>© Nadzeya Ivashchanka & Mikita Kukavenka,</span>

src/components/footer/footer.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Footer from './footer'
+
+const setup = () => shallow(<Footer />)
+
+describe('rendering testing', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = setup()
+  })
+
+  test('renders without error', () => {
+    const appComponent = wrapper.find("[data-test='component-footer']")
+    expect(appComponent.length).toBe(1)
+  })
+
+  test('contains four social media links', () => {
+    const appComponent = wrapper.find("a[data-test='social-link']")
+    expect(appComponent.length).toBe(4)
+  })
+
+  test('contains credits', () => {
+    const appComponent = wrapper.find("[data-test='project-credits']")
+    expect(appComponent.length).toBe(1)
+  })
+})

src/components/header/header.js

@@ -3,13 +3,13 @@ import logo from '../../images/logo.png'
 
 const Header = () => {
   return (
-    <nav className="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
+    <nav className="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top" data-test="component-header">
       <div className="container-fluid">
         <div className="navbar-wrapper">
           <a href="/">
-            <img src={logo} className="img-fluid float-left" alt="Logo" />
+            <img src={logo} className="img-fluid float-left" alt="Logo" data-test="app-logo" />
           </a>
-          <div className="ml-4 container">
+          <div className="ml-4 container" data-test="project-name">
             <div className="row">
               <h3 className="text-light mt-1 mb-1">
                 Equipment

src/components/header/header.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import Header from './header'
+
+const setup = () => shallow(<Header />)
+
+describe('rendering testing', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = setup()
+  })
+
+  test('renders without error', () => {
+    const appComponent = wrapper.find("[data-test='component-header']")
+    expect(appComponent.length).toBe(1)
+  })
+
+  test('contains app logo', () => {
+    const appComponent = wrapper.find("[data-test='app-logo']")
+    expect(appComponent.length).toBe(1)
+  })
+
+  test('contains project name', () => {
+    const appComponent = wrapper.find("[data-test='project-name']")
+    expect(appComponent.length).toBe(1)
+  })
+})