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

fix(navbar): Make Navbar mobile-friendly #2118

Merged
merged 8 commits into from Jun 8, 2020
Merged

fix(navbar): Make Navbar mobile-friendly #2118

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ebefe1a
fix(navbar): make navbar mobile friendly with hamberger
Jun 5, 2020
a18610c
test(navbar): add hamberger and account tests
Jun 5, 2020
cf04467
Merge branch 'master' into mobile-navbar
Jun 5, 2020
4c9482e
Merge branch 'master' into mobile-navbar
Jun 7, 2020
67aa82e
Merge branch 'master' into mobile-navbar
matteovivona Jun 7, 2020
66953ea
Merge branch 'master' into mobile-navbar
Jun 7, 2020
99b464d
Merge branch 'master' into mobile-navbar
Jun 8, 2020
ccdc526
Merge branch 'master' into mobile-navbar
Jun 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 60 additions & 121 deletions src/__tests__/components/Navbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,40 @@ describe('Navbar', () => {
Permissions.ReportIncident,
]

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

expect(children[0].props.children).toEqual('dashboard.label')
expect(children[1].props.children).toEqual('patients.newPatient')
expect(children[children.length - 1].props.children).toEqual('settings.label')
})

it('should not show an item 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 hamberger = hospitalRunNavbar.find('.nav-hamberger')
const { children } = hamberger.first().props() as any

const labels = [
'labs.requests.new',
'labs.requests.label',
'incidents.reports.new',
'incidents.reports.label',
]

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

it('should render a HospitalRun Navbar', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
Expand Down Expand Up @@ -83,125 +117,6 @@ describe('Navbar', () => {
})
})

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

expect(patientsLinkList.first().props().title).toEqual('patients.label')
expect(children[0].props.children).toEqual('actions.list')
expect(children[1].props.children).toEqual('actions.new')
})

it('should navigate to /patients when the list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const patientsLinkList = hospitalRunNavbar.find('.patients-link-list')
const { children } = patientsLinkList.first().props() as any

act(() => {
children[0].props.onClick()
})

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

it('should navigate to /patients/new when the list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const patientsLinkList = hospitalRunNavbar.find('.patients-link-list')
const { children } = patientsLinkList.first().props() as any

act(() => {
children[1].props.onClick()
})

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

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

expect(scheduleLinkList.first().props().title).toEqual('scheduling.label')
if (scheduleLinkList.first().props().children) {
expect(children[0].props.children).toEqual('scheduling.appointments.label')
expect(children[1].props.children).toEqual('scheduling.appointments.new')
}
})

it('should navigate to to /appointments when the appointment list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const scheduleLinkList = hospitalRunNavbar.find('.scheduling-link-list')
const { children } = scheduleLinkList.first().props() as any

act(() => {
children[0].props.onClick()
})

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

it('should navigate to /appointments/new when the new appointment list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const scheduleLinkList = hospitalRunNavbar.find('.scheduling-link-list')
const { children } = scheduleLinkList.first().props() as any

act(() => {
children[1].props.onClick()
})

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

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

expect(labsLinkList.first().props().title).toEqual('labs.label')
expect(children[0].props.children).toEqual('labs.label')
expect(children[1].props.children).toEqual('labs.requests.new')
})

it('should navigate to to /labs when the labs list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const labsLinkList = hospitalRunNavbar.find('.labs-link-list')
const { children } = labsLinkList.first().props() as any

act(() => {
children[0].props.onClick()
})

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

it('should navigate to /labs/new when the new labs list option is selected', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const labsLinkList = hospitalRunNavbar.find('.labs-link-list')
const { children } = labsLinkList.first().props() as any

act(() => {
children[1].props.onClick()
})

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

describe('search', () => {
it('should render Search as the search box placeholder', () => {
const wrapper = setup(allPermissions)
Expand All @@ -226,7 +141,7 @@ describe('Navbar', () => {
it('should show a shortcut if user has a permission', () => {
const wrapper = setup(allPermissions)
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const addNew = hospitalRunNavbar.find('.add-new')
const addNew = hospitalRunNavbar.find('.nav-add-new')
const { children } = addNew.first().props() as any

expect(children[0].props.children).toEqual('patients.newPatient')
Expand All @@ -236,7 +151,7 @@ describe('Navbar', () => {
// exclude labs and incidents permissions
const wrapper = setup(cloneDeep(allPermissions).slice(0, 6))
const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
const addNew = hospitalRunNavbar.find('.add-new')
const addNew = hospitalRunNavbar.find('.nav-add-new')
const { children } = addNew.first().props() as any

children.forEach((option: any) => {
Expand All @@ -245,4 +160,28 @@ describe('Navbar', () => {
})
})
})

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

expect(children[0].props.children).toEqual('settings.label')
})

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

act(() => {
children[0].props.onClick()
})

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