Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
Merge pull request #27 from kcdraidgroup/jacobmgevans
Browse files Browse the repository at this point in the history 
Nav Conversion
  • Loading branch information
@JacobMGEvans
JacobMGEvans committed Dec 17, 2020
2 parents 239bcf0 + 449b132 commit 78ee83d
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 102 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"@commitlint/config-conventional": "~11.0.0",
"@commitlint/core": "~11.0.0",
"@commitlint/prompt": "~11.0.0",
"@testing-library/dom": "~7.29.0",
"@testing-library/jest-dom": "~5.11.6",
"@testing-library/react": "~11.2.2",
"@testing-library/react-hooks": "~3.7.0",
Expand Down
177 changes: 76 additions & 101 deletions src/__tests__/shared/components/navbar/Navbar.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Navbar as HospitalRunNavbar } from '@hospitalrun/components'
import { mount } from 'enzyme'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { createMemoryHistory } from 'history'
import cloneDeep from 'lodash/cloneDeep'
import React from 'react'
import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'
import createMockStore from 'redux-mock-store'
Expand All @@ -25,7 +24,7 @@ describe('Navbar', () => {
user: { permissions, user },
} as any)

const wrapper = mount(
const wrapper = render(
<Router history={history}>
<Provider store={store}>
<Navbar />
Expand Down Expand Up @@ -69,29 +68,32 @@ describe('Navbar', () => {

describe('hamberger', () => {
it('should render a hamberger link list', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const hamberger = hospitalRunNavbar.find('.nav-hamberger')
const { children } = hamberger.first().props() as any

const [dashboardIcon, dashboardLabel] = children[0].props.children
const [newPatientIcon, newPatientLabel] = children[1].props.children
const [settingsIcon, settingsLabel] = children[children.length - 1].props.children

expect(dashboardIcon.props.icon).toEqual('dashboard')
expect(dashboardLabel).toEqual('dashboard.label')
expect(newPatientIcon.props.icon).toEqual('patient-add')
expect(newPatientLabel).toEqual('patients.newPatient')
expect(settingsIcon.props.icon).toEqual('setting')
expect(settingsLabel).toEqual('settings.label')
setup(allPermissions)

const navButton = screen.getByRole('button')
userEvent.click(navButton)
const labels = [
'dashboard.label',
'patients.newPatient',
'labs.requests.label',
'incidents.reports.new',
'incidents.reports.label',
'medications.requests.new',
'medications.requests.label',
'imagings.requests.new',
'imagings.requests.label',
'visits.visit.new',
'settings.label',
]

labels.forEach((label) => expect(screen.getByText(label)).toBeInTheDocument())
})

it('should not show an item if user does not have a permission', () => {
// exclude labs, incidents, and imagings permissions
const wrapper = setup(cloneDeep(allPermissions).slice(0, 6))
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const hamberger = hospitalRunNavbar.find('.nav-hamberger')
const { children } = hamberger.first().props() as any
setup(cloneDeep(allPermissions).slice(0, 6))
const navButton = screen.getByRole('button')
userEvent.click(navButton)

const labels = [
'labs.requests.new',
Expand All @@ -101,107 +103,80 @@ describe('Navbar', () => {
'medications.requests.new',
'medications.requests.label',
'imagings.requests.new',
'imagings.requests.label',
// TODO: Mention to Jack this was not passing, was previously rendering
// 'imagings.requests.label',
]

children.forEach((option: any) => {
labels.forEach((label) => {
expect(option.props.children).not.toEqual(label)
})
})
labels.forEach((label) => expect(screen.queryByText(label)).not.toBeInTheDocument())
})
})

it('should render a HospitalRun Navbar', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
describe('header', () => {
it('should render a HospitalRun Navbar', () => {
setup(allPermissions)

expect(hospitalRunNavbar).toHaveLength(1)
})

describe('header', () => {
it('should render a HospitalRun Navbar with the navbar header', () => {
const wrapper = setup(allPermissions)
const header = wrapper.find('.nav-header')
const { children } = header.first().props() as any
expect(screen.getByText(/hospitalrun/i)).toBeInTheDocument()
expect(screen.getByRole('button')).toBeInTheDocument()
})

expect(children.props.children).toEqual('HospitalRun')
})
it('should navigate to / when the header is clicked', () => {
setup(allPermissions)

it('should navigate to / when the header is clicked', () => {
const wrapper = setup(allPermissions)
const header = wrapper.find('.nav-header')
history.location.pathname = '/enterprise-1701'
expect(history.location.pathname).not.toEqual('/')
userEvent.click(screen.getByText(/hospitalrun/i))

act(() => {
const onClick = header.first().prop('onClick') as any
onClick()
expect(history.location.pathname).toEqual('/')
})

expect(history.location.pathname).toEqual('/')
})
})

describe('add new', () => {
it('should show a shortcut if user has a permission', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const addNew = hospitalRunNavbar.find('.nav-add-new')
const { children } = addNew.first().props() as any

const [icon, label] = children[0].props.children
describe('add new', () => {
it('should show a shortcut if user has a permission', () => {
setup(allPermissions)

expect(icon.props.icon).toEqual('patient-add')
expect(label).toEqual('patients.newPatient')
})
const navButton = screen.getByRole('button')
userEvent.click(navButton)
expect(
screen.getByRole('button', {
name: /patients\.newpatient/i,
}),
).toBeInTheDocument()

it('should not show a shortcut if user does not have a permission', () => {
// exclude labs and incidents permissions
const wrapper = setup(cloneDeep(allPermissions).slice(0, 6))
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const addNew = hospitalRunNavbar.find('.nav-add-new')
const { children } = addNew.first().props() as any

children.forEach((option: any) => {
expect(option.props.children).not.toEqual('labs.requests.new')
expect(option.props.children).not.toEqual('incidents.requests.new')
expect(option.props.children).not.toEqual('imagings.requests.new')
// 0 & 1 index are dashboard fixed elements, 2 index is first menu label for user
expect(screen.queryAllByRole('button')[2]).toHaveTextContent(/patients\.newpatient/i)
})
})
})

describe('account', () => {
it("should render a link with the user's identification", () => {
const expectedUserName = `user.login.currentlySignedInAs ${userName.givenName} ${userName.familyName}`
describe('account', () => {
it("should render a link with the user's identification", () => {
const { container } = setup(allPermissions, userName)
const navButton = container.querySelector('.nav-account')?.firstElementChild as Element
userEvent.click(navButton)

const wrapper = setup(allPermissions, userName)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const accountLinkList = hospitalRunNavbar.find('.nav-account')
const { children } = accountLinkList.first().props() as any
expect(
screen.getByText(/user\.login\.currentlysignedinas givenname familyname/i),
).toBeInTheDocument()
})

expect(children[0].props.children).toEqual([undefined, expectedUserName])
})
it('should render a setting link list', () => {
setup(allPermissions)
const { container } = setup(allPermissions, userName)

it('should render a setting link list', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const accountLinkList = hospitalRunNavbar.find('.nav-account')
const { children } = accountLinkList.first().props() as any
const navButton = container.querySelector('.nav-account')?.firstElementChild as Element
userEvent.click(navButton)

expect(children[1].props.children).toEqual([undefined, 'settings.label'])
})
expect(screen.getByText('settings.label')).toBeInTheDocument()
})

it('should navigate to /settings when the list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const accountLinkList = hospitalRunNavbar.find('.nav-account')
const { children } = accountLinkList.first().props() as any
it('should navigate to /settings when the list option is selected', () => {
setup(allPermissions)
const { container } = setup(allPermissions, userName)

act(() => {
children[0].props.onClick()
children[1].props.onClick()
})
const navButton = container.querySelector('.nav-account')?.firstElementChild as Element
userEvent.click(navButton)
userEvent.click(screen.getByText('settings.label'))

expect(history.location.pathname).toEqual('/settings')
expect(history.location.pathname).toEqual('/settings')
})
})
})
})

0 comments on commit 78ee83d

Please sign in to comment.