feat(breadcrumb): add Breadcrumbs unit tests (component/slice/hook)

fix #1770

src/__tests__/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,5 +1,48 @@
 import '../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router-dom'
+import configureMockStore from 'redux-mock-store'
+import { BreadcrumbItem } from '@hospitalrun/components'
 
-it('should return true', () => {
-  expect(true).toBeTruthy()
+import Breadcrumbs from 'breadcrumbs/Breadcrumbs'
+import Breadcrumb from 'model/Breadcrumb'
+
+const mockStore = configureMockStore()
+
+describe('Breadcrumbs', () => {
+  const setup = (breadcrumbs: Breadcrumb[]) => {
+    const history = createMemoryHistory()
+    const store = mockStore({
+      breadcrumbs: { breadcrumbs },
+    })
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <Breadcrumbs />
+        </Router>
+      </Provider>,
+    )
+
+    return wrapper
+  }
+
+  it('should render breadcrumbs items', () => {
+    const breadcrumbs = [
+      { text: 'Edit Patient', location: '/patient/1/edit' },
+      { i18nKey: 'patient.label', location: '/patient' },
+      { text: 'Bob', location: '/patient/1' },
+    ]
+    const wrapper = setup(breadcrumbs)
+
+    const items = wrapper.find(BreadcrumbItem)
+
+    expect(items).toHaveLength(3)
+    expect(items.at(0).text()).toEqual('patient.label')
+    expect(items.at(1).text()).toEqual('Bob')
+    expect(items.at(2).text()).toEqual('Edit Patient')
+  })
 })

src/__tests__/breadcrumbs/breadcrumbs-slice.test.ts

@@ -1,5 +1,60 @@
 import '../../__mocks__/matchMediaMock'
+import { AnyAction } from 'redux'
+import breadcrumbs, { addBreadcrumbs, removeBreadcrumbs } from '../../breadcrumbs/breadcrumbs-slice'
 
-it('should return true', () => {
-  expect(true).toBeTruthy()
+describe('breadcrumbs slice', () => {
+  describe('breadcrumbs reducer', () => {
+    it('should create the proper initial state with empty patients array', () => {
+      const breadcrumbsStore = breadcrumbs(undefined, {} as AnyAction)
+
+      expect(breadcrumbsStore.breadcrumbs).toEqual([])
+    })
+
+    it('should handle the ADD_BREADCRUMBS action', () => {
+      const breadcrumbsToAdd = [
+        { text: 'user', location: '/user' },
+        { text: 'Bob', location: '/user/1' },
+      ]
+
+      const breadcrumbsStore = breadcrumbs(undefined, {
+        type: addBreadcrumbs.type,
+        payload: breadcrumbsToAdd,
+      })
+
+      expect(breadcrumbsStore.breadcrumbs).toEqual(breadcrumbsToAdd)
+    })
+
+    it('should handle the ADD_BREADCRUMBS action with existing breadcreumbs', () => {
+      const breadcrumbsToAdd = [{ text: 'Bob', location: '/user/1' }]
+
+      const state = {
+        breadcrumbs: [{ text: 'user', location: '/user' }],
+      }
+
+      const breadcrumbsStore = breadcrumbs(state, {
+        type: addBreadcrumbs.type,
+        payload: breadcrumbsToAdd,
+      })
+
+      expect(breadcrumbsStore.breadcrumbs).toEqual([...state.breadcrumbs, ...breadcrumbsToAdd])
+    })
+
+    it('should handle the REMOVE_BREADCRUMBS action', () => {
+      const breadcrumbsToRemove = [{ text: 'Bob', location: '/user/1' }]
+
+      const state = {
+        breadcrumbs: [
+          { text: 'user', location: '/user' },
+          { text: 'Bob', location: '/user/1' },
+        ],
+      }
+
+      const breadcrumbsStore = breadcrumbs(state, {
+        type: removeBreadcrumbs.type,
+        payload: breadcrumbsToRemove,
+      })
+
+      expect(breadcrumbsStore.breadcrumbs).toEqual([{ text: 'user', location: '/user' }])
+    })
+  })
 })

src/__tests__/breadcrumbs/useAddBreadcrumbs.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import configureMockStore from 'redux-mock-store'
+import { Provider } from 'react-redux'
+import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
+import * as breadcrumbsSlice from '../../breadcrumbs/breadcrumbs-slice'
+
+const store = configureMockStore()
+
+describe('useAddBreadcrumbs', () => {
+  beforeEach(() => jest.clearAllMocks())
+
+  it('should call addBreadcrumbs with the correct data', () => {
+    const wrapper = ({ children }: any) => <Provider store={store({})}>{children}</Provider>
+
+    jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
+    const breadcrumbs = [
+      {
+        text: 'Patients',
+        location: '/patients',
+      },
+    ]
+
+    renderHook(() => useAddBreadcrumbs(breadcrumbs), { wrapper } as any)
+    expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledTimes(1)
+    expect(breadcrumbsSlice.addBreadcrumbs).toHaveBeenCalledWith(breadcrumbs)
+  })
+
+  it('should call removeBreadcrumbs with the correct data after unmount', () => {
+    const wrapper = ({ children }: any) => <Provider store={store({})}>{children}</Provider>
+
+    jest.spyOn(breadcrumbsSlice, 'addBreadcrumbs')
+    jest.spyOn(breadcrumbsSlice, 'removeBreadcrumbs')
+    const breadcrumbs = [
+      {
+        text: 'Patients',
+        location: '/patients',
+      },
+    ]
+
+    const { unmount } = renderHook(() => useAddBreadcrumbs(breadcrumbs), { wrapper } as any)
+    unmount()
+    expect(breadcrumbsSlice.removeBreadcrumbs).toHaveBeenCalledTimes(1)
+    expect(breadcrumbsSlice.removeBreadcrumbs).toHaveBeenCalledWith(breadcrumbs)
+  })
+})

src/breadcrumbs/Breadcrumbs.tsx

@@ -2,10 +2,7 @@ import React from 'react'
 import { useHistory } from 'react-router'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import {
-  Breadcrumb as HrBreadcrumb,
-  BreadcrumbItem as HrBreadcrumbItem,
-} from '@hospitalrun/components'
+import { Breadcrumb, BreadcrumbItem } from '@hospitalrun/components'
 import { RootState } from '../store'
 
 const Breadcrumbs = () => {
@@ -14,7 +11,7 @@ const Breadcrumbs = () => {
   const { breadcrumbs } = useSelector((state: RootState) => state.breadcrumbs)
 
   return (
-    <HrBreadcrumb>
+    <Breadcrumb>
       {breadcrumbs
         .slice()
         .sort((b1, b2) => b1.location.length - b2.location.length)
@@ -23,12 +20,12 @@ const Breadcrumbs = () => {
           const onClick = !isLast ? () => history.push(location) : undefined
 
           return (
-            <HrBreadcrumbItem key={location} active={isLast} onClick={onClick}>
+            <BreadcrumbItem key={location} active={isLast} onClick={onClick}>
               {i18nKey ? t(i18nKey) : text}
-            </HrBreadcrumbItem>
+            </BreadcrumbItem>
           )
         })}
-    </HrBreadcrumb>
+    </Breadcrumb>
   )
 }
 

src/breadcrumbs/useAddBreadcrumbs.ts

@@ -5,12 +5,14 @@ import { addBreadcrumbs, removeBreadcrumbs } from './breadcrumbs-slice'
 
 export default function useAddBreadcrumbs(breadcrumbs: Breadcrumb[]): void {
   const dispatch = useDispatch()
+  const breadcrumbsStringified = JSON.stringify(breadcrumbs)
 
   useEffect(() => {
-    dispatch(addBreadcrumbs(breadcrumbs))
+    const breadcrumbsParsed = JSON.parse(breadcrumbsStringified)
+    dispatch(addBreadcrumbs(breadcrumbsParsed))
 
     return () => {
-      dispatch(removeBreadcrumbs(breadcrumbs))
+      dispatch(removeBreadcrumbs(breadcrumbsParsed))
     }
-  }, [breadcrumbs, dispatch, JSON.stringify(breadcrumbs)])
+  }, [breadcrumbsStringified, dispatch])
 }