Display login/signup navbar links only when a user is not signed in

Author: mattwr18

src/components/App.js

@@ -24,7 +24,7 @@ class App extends Component {
   render () {
     return (
       <Fragment>
-        <Navbar />
+        <Navbar cookies={this.props.cookies} />
         <Switch>
           <Route path='/' exact component={Homepage} />
           <Route exact path='/about' component={About} />

src/components/navbar/Navbar.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import { Menu, Container, Image } from 'semantic-ui-react'
 import { Link } from 'react-router-dom'
 import { withRouter } from 'react-router'
@@ -16,7 +16,7 @@ export class Navbar extends Component {
 
   render () {
     const activeItem = this.currentPath()
-
+    const { cookies } = this.props
     return (
       <Menu stackable borderless inverted as='div' className='navbar'>
         <Container>
@@ -65,19 +65,23 @@ export class Navbar extends Component {
                 Getting Started
               </Link>
             </Menu.Item>
-            <Menu.Item
-              name='login'
-              active={activeItem === 'login'}
-            >
-              <Link to='/login'>Login</Link>
-            </Menu.Item>
+            {!cookies.get('_WebsiteOne_session')
+              ? <Fragment>
+                <Menu.Item
+                  name='login'
+                  active={activeItem === 'login'}
+                >
+                  <Link to='/login'>Login</Link>
+                </Menu.Item>
 
-            <Menu.Item
-              name='signup'
-              active={activeItem === 'signup'}
-            >
-              <Link to='/signup'>Sign up</Link>
-            </Menu.Item>
+                <Menu.Item
+                  name='signup'
+                  active={activeItem === 'signup'}
+                >
+                  <Link to='/signup'>Sign up</Link>
+                </Menu.Item>
+              </Fragment>
+              : null}
           </Menu.Menu>
         </Container>
       </Menu>

src/tests/components/Navbar.test.js

@@ -4,18 +4,67 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { Navbar } from '../../components/navbar/Navbar'
 
 describe('Navbar', () => {
-  const props = { location: { pathname: '/users' } }
-  const homepage = (props) => mount(<Router><Navbar {...props} /></Router>)
+  let wrapper
+  const props = {
+    location: { pathname: '/users' },
+    cookies: { get: jest.fn() }
+  }
+
+  beforeEach(() => {
+    wrapper = mount(
+      <Router>
+        <Navbar {...props} />
+      </Router>
+    )
+  })
 
   describe('renders the Navbar component', () => {
     it('renders without errors', () => {
-      const wrapper = homepage(props)
       expect(wrapper.find('Navbar').length).toEqual(1)
     })
 
     it('renders 1 active Link element', () => {
-      const wrapper = homepage(props)
       expect(wrapper.find('.active').find('Link').length).toEqual(1)
     })
   })
+
+  describe('renders links based on if a user is signed in or not', () => {
+    it('renders a login link if a user in not signed in', () => {
+      const wrapper = mount(
+        <Router>
+          <Navbar {...props} />
+        </Router>
+      )
+      const loginLink = wrapper.find('a').filterWhere(item => {
+        return item.prop('href') === '/login'
+      })
+      expect(loginLink.text()).toEqual('Login')
+    })
+
+    it('renders a sign up link if a user in not signed in', () => {
+      const wrapper = mount(
+        <Router>
+          <Navbar {...props} />
+        </Router>
+      )
+      const loginLink = wrapper.find('a').filterWhere(item => {
+        return item.prop('href') === '/signup'
+      })
+      expect(loginLink.text()).toEqual('Sign up')
+    })
+
+    it('renders 9 menu items if a user is not signed in', () => {
+      expect(wrapper.find('MenuItem').length).toEqual(9)
+    })
+
+    it('renders 7 menu items if a user is signed in', () => {
+      props.cookies.get.mockReturnValue(true)
+      const wrapper = mount(
+        <Router>
+          <Navbar {...props} />
+        </Router>
+      )
+      expect(wrapper.find('MenuItem').length).toEqual(7)
+    })
+  })
 })