feat: modified sidebar and nav components

HospitalRun#1857
sotous · Apr 1, 2020 · 829ec89 · 829ec89
1 parent 0afeee1
commit 829ec89
Show file tree

Hide file tree

Showing 6 changed files with 312 additions and 25 deletions.
diff --git a/src/__tests__/components/Navbar.test.tsx b/src/__tests__/components/Navbar.test.tsx
@@ -30,7 +30,10 @@ describe('Navbar', () => {
     })
     it('should navigate to / when the header is clicked', () => {
       act(() => {
-        header.first().props().onClick()
+        header
+          .first()
+          .props()
+          .onClick()
       })
       expect(history.location.pathname).toEqual('/')
     })
@@ -45,13 +48,19 @@ describe('Navbar', () => {
     })
     it('should navigate to /patients when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[0].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients')
     })
     it('should navigate to /patients/new when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[1].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients/new')
     })
@@ -72,14 +81,20 @@ describe('Navbar', () => {
 
     it('should navigate to to /appointments when the appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[0].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments')
     })
 
     it('should navigate to /appointments/new when the new appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[1].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments/new')
     })

diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx
@@ -35,7 +35,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(1).text().trim()).toEqual('dashboard.label')
+      expect(
+        listItems
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('dashboard.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -65,7 +70,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(2).text().trim()).toEqual('patients.label')
+      expect(
+        listItems
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('patients.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -89,13 +99,88 @@ describe('Sidebar', () => {
     })
   })
 
+  describe('patients_list link', () => {
+    it('should render the patients_list link', () => {
+      const wrapper = setup('/patients')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('patients.patientsList')
+    })
+
+    it('should be active when the current path is /patients', () => {
+      const wrapper = setup('/patients')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(listItems.at(4).prop('active')).toBeTruthy()
+    })
+
+    it('should navigate to /patients when the patients link is clicked', () => {
+      const wrapper = setup('/patients')
+
+      const listItems = wrapper.find(ListItem)
+
+      act(() => {
+        ;(listItems.at(4).prop('onClick') as any)()
+      })
+
+      expect(history.location.pathname).toEqual('/patients')
+    })
+  })
+
+  describe('new_patient link', () => {
+    it('should render the new_patient link', () => {
+      const wrapper = setup('/patients')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('patients.newPatient')
+    })
+
+    it('should be active when the current path is /patients/new', () => {
+      const wrapper = setup('/patients/new')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(listItems.at(3).prop('active')).toBeTruthy()
+    })
+
+    it('should navigate to /patients/new when the patients link is clicked', () => {
+      const wrapper = setup('/patients')
+
+      const listItems = wrapper.find(ListItem)
+
+      act(() => {
+        ;(listItems.at(3).prop('onClick') as any)()
+      })
+
+      expect(history.location.pathname).toEqual('/patients/new')
+    })
+  })
+
   describe('appointments link', () => {
     it('should render the scheduling link', () => {
       const wrapper = setup('/appointments')
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('scheduling.label')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.label')
     })
 
     it('should be active when the current path is /appointments', () => {
@@ -118,4 +203,74 @@ describe('Sidebar', () => {
       expect(history.location.pathname).toEqual('/appointments')
     })
   })
+
+  describe('appointment_schedule link', () => {
+    it('should render the appointment_schedule link', () => {
+      const wrapper = setup('/appointments')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.schedule')
+    })
+
+    it('should be active when the current path is /appointments', () => {
+      const wrapper = setup('/appointments')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(listItems.at(5).prop('active')).toBeTruthy()
+    })
+
+    it('should navigate to /appointments when the appointments_schedule link is clicked', () => {
+      const wrapper = setup('/appointments')
+
+      const listItems = wrapper.find(ListItem)
+
+      act(() => {
+        ;(listItems.at(5).prop('onClick') as any)()
+      })
+
+      expect(history.location.pathname).toEqual('/appointments')
+    })
+  })
+
+  describe('new_appointment link', () => {
+    it('should render the new_appointment link', () => {
+      const wrapper = setup('/appointments/new')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.new')
+    })
+
+    it('should be active when the current path is /appointments/new', () => {
+      const wrapper = setup('/appointments/new')
+
+      const listItems = wrapper.find(ListItem)
+
+      expect(listItems.at(4).prop('active')).toBeTruthy()
+    })
+
+    it('should navigate to /appointments/new when the new_appointment link is clicked', () => {
+      const wrapper = setup('/appointments')
+
+      const listItems = wrapper.find(ListItem)
+
+      act(() => {
+        ;(listItems.at(4).prop('onClick') as any)()
+      })
+
+      expect(history.location.pathname).toEqual('/appointments/new')
+    })
+  })
 })
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -31,7 +31,7 @@ const Navbar = () => {
         {
           type: 'link-list',
           label: t('patients.label'),
-          className: 'patients-link-list',
+          className: 'patients-link-list d-md-none d-block',
           children: [
             {
               type: 'link',
@@ -52,7 +52,7 @@ const Navbar = () => {
         {
           type: 'link-list',
           label: t('scheduling.label'),
-          className: 'scheduling-link-list',
+          className: 'scheduling-link-list d-md-none d-block',
           children: [
             {
               type: 'link',