diff --git a/package.json b/package.json index 64d9ee7b26..0ac4903f7b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": false, "license": "MIT", "dependencies": { - "@hospitalrun/components": "~0.31.0", + "@hospitalrun/components": "^0.32.2", "@reduxjs/toolkit": "~1.2.1", "@semantic-release/changelog": "~5.0.0", "@semantic-release/git": "~7.0.16", diff --git a/src/__tests__/components/Navbar.test.tsx b/src/__tests__/components/Navbar.test.tsx index b56f3ca6a0..c087581ab2 100644 --- a/src/__tests__/components/Navbar.test.tsx +++ b/src/__tests__/components/Navbar.test.tsx @@ -16,115 +16,103 @@ describe('Navbar', () => { , ) + const wrapper = setup() + const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) + it('should render a HospitalRun Navbar', () => { - const wrapper = setup() - expect(wrapper.find(HospitalRunNavbar)).toHaveLength(1) + expect(hospitalRunNavbar).toHaveLength(1) }) - describe('brand', () => { - it('should render a HospitalRun Navbar with the navbar brand', () => { - const wrapper = setup() - - expect(wrapper.find(HospitalRunNavbar).prop('brand').label).toEqual('HospitalRun') + describe('header', () => { + const header = wrapper.find('.nav-header') + it('should render a HospitalRun Navbar with the navbar header', () => { + expect(header.first().props().children.props.children).toEqual('HospitalRun') }) - - it('should navigate to / when the brand is clicked', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - + it('should navigate to / when the header is clicked', () => { act(() => { - ;(hospitalRunNavbar.prop('brand') as any).onClick() + header + .first() + .props() + .onClick() }) - expect(history.location.pathname).toEqual('/') }) }) describe('patients', () => { - it('should render a patients dropdown', () => { - const wrapper = setup() - - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - - expect(hospitalRunNavbar.prop('navLinks')[0].label).toEqual('patients.label') - expect(hospitalRunNavbar.prop('navLinks')[0].children[0].label).toEqual('actions.list') - expect(hospitalRunNavbar.prop('navLinks')[0].children[1].label).toEqual('actions.new') + const patientsLinkList = hospitalRunNavbar.find('.patients-link-list') + it('should render a patients link list', () => { + expect(patientsLinkList.first().props().title).toEqual('patients.label') + expect(patientsLinkList.first().props().children[0].props.children).toEqual('actions.list') + expect(patientsLinkList.first().props().children[1].props.children).toEqual('actions.new') }) - it('should navigate to /patients when the list option is selected', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - act(() => { - ;(hospitalRunNavbar.prop('navLinks')[0].children[0] as any).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', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - act(() => { - ;(hospitalRunNavbar.prop('navLinks')[0].children[1] as any).onClick() + patientsLinkList + .first() + .props() + .children[1].props.onClick() }) - expect(history.location.pathname).toEqual('/patients/new') }) }) describe('scheduling', () => { - it('should render a scheduling dropdown', () => { - const wrapper = setup() + const scheduleLinkList = hospitalRunNavbar.find('.scheduling-link-list') - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - - expect(hospitalRunNavbar.prop('navLinks')[1].label).toEqual('scheduling.label') - expect(hospitalRunNavbar.prop('navLinks')[1].children[0].label).toEqual( + it('should render a scheduling dropdown', () => { + expect(scheduleLinkList.first().props().title).toEqual('scheduling.label') + expect(scheduleLinkList.first().props().children[0].props.children).toEqual( 'scheduling.appointments.label', ) - expect(hospitalRunNavbar.prop('navLinks')[1].children[1].label).toEqual( + expect(scheduleLinkList.first().props().children[1].props.children).toEqual( 'scheduling.appointments.new', ) }) it('should navigate to to /appointments when the appointment list option is selected', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - act(() => { - ;(hospitalRunNavbar.prop('navLinks')[1].children[0] as any).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', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - act(() => { - ;(hospitalRunNavbar.prop('navLinks')[1].children[1] as any).onClick() + scheduleLinkList + .first() + .props() + .children[1].props.onClick() }) - expect(history.location.pathname).toEqual('/appointments/new') }) }) describe('search', () => { - it('should render Search as the search button label', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) - - expect(hospitalRunNavbar.prop('search').buttonText).toEqual('actions.search') - }) + const navSearch = hospitalRunNavbar.find('.nav-search') it('should render Search as the search box placeholder', () => { - const wrapper = setup() - const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) + expect(navSearch.at(2).props().children.props.children[0].props.placeholder).toEqual( + 'actions.search', + ) + }) - expect(hospitalRunNavbar.prop('search').placeholderText).toEqual('actions.search') + it('should render Search as the search button label', () => { + expect(navSearch.at(2).props().children.props.children[1].props.children).toEqual( + 'actions.search', + ) }) }) }) diff --git a/src/__tests__/scheduling/appointments-slice.test.ts b/src/__tests__/scheduling/appointments-slice.test.ts index 09410d3e6d..664863d016 100644 --- a/src/__tests__/scheduling/appointments-slice.test.ts +++ b/src/__tests__/scheduling/appointments-slice.test.ts @@ -2,11 +2,11 @@ import { AnyAction } from 'redux' import Appointment from 'model/Appointment' import { createMemoryHistory } from 'history' import AppointmentRepository from 'clients/db/AppointmentsRepository' +import { mocked } from 'ts-jest/utils' import appointments, { createAppointmentStart, createAppointment, } from '../../scheduling/appointments/appointments-slice' -import { mocked } from 'ts-jest/utils' describe('appointments slice', () => { describe('appointments reducer', () => { diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 310b8e6a1d..6c2cdc7363 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -9,36 +9,40 @@ const Navbar = () => { return ( { - history.push('/') - }, - }} - search={{ - onClickButton: () => { - // no oop - }, - onChangeInput: () => { - // no oop + bg="dark" + variant="dark" + navItems={[ + { + type: 'icon', + src: + 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53%0D%0AMy5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5r%0D%0AIiB2aWV3Qm94PSIwIDAgMjk5IDI5OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOnVybCgjbGlu%0D%0AZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVu%0D%0AdCIgeDE9IjcyLjU4IiB5MT0iMTYuMDQiIHgyPSIyMjcuMzEiIHkyPSIyODQuMDIiIGdyYWRpZW50%0D%0AVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMDEiIHN0b3AtY29sb3I9IiM2%0D%0AMGQxYmIiLz48c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0iIzFhYmM5YyIvPjxzdG9wIG9m%0D%0AZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwOWI5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjx0%0D%0AaXRsZT5jcm9zcy1pY29uPC90aXRsZT48cGF0aCBpZD0iY3Jvc3MiIGNsYXNzPSJjbHMtMSIgZD0i%0D%0ATTI5Mi45NCw5Ny40NkgyMDUuM1Y3LjA2QTYuNTYsNi41NiwwLDAsMCwxOTguNzQuNUgxMDEuMjZB%0D%0ANi41Niw2LjU2LDAsMCwwLDk0LjcsNy4wNnY5MC40SDcuMDZBNi41OCw2LjU4LDAsMCwwLC41LDEw%0D%0ANFYxOTYuM2E2LjIzLDYuMjMsMCwwLDAsNi4yMyw2LjI0aDg4djkwLjRhNi41Niw2LjU2LDAsMCww%0D%0ALDYuNTYsNi41Nmg5Ny40OGE2LjU2LDYuNTYsMCwwLDAsNi41Ni02LjU2di05MC40aDg4YTYuMjMs%0D%0ANi4yMywwLDAsMCw2LjIzLTYuMjRWMTA0QTYuNTgsNi41OCwwLDAsMCwyOTIuOTQsOTcuNDZaIiB0%0D%0AcmFuc2Zvcm09InRyYW5zbGF0ZSgtMC41IC0wLjUpIi8+PC9zdmc+', + onClick: () => { + history.push('/') + }, + className: 'nav-icon', }, - placeholderText: t('actions.search'), - buttonText: t('actions.search'), - }} - navLinks={[ { - label: t('patients.label'), + type: 'header', + label: 'HospitalRun', onClick: () => { - // no oop + history.push('/') }, + className: 'nav-header', + }, + { + type: 'link-list', + label: t('patients.label'), + className: 'patients-link-list', children: [ { + type: 'link', label: t('actions.list'), onClick: () => { history.push('/patients') }, }, { + type: 'link', label: t('actions.new'), onClick: () => { history.push('/patients/new') @@ -47,18 +51,19 @@ const Navbar = () => { ], }, { + type: 'link-list', label: t('scheduling.label'), - onClick: () => { - // no oop - }, + className: 'scheduling-link-list', children: [ { + type: 'link', label: t('scheduling.appointments.label'), onClick: () => { history.push('/appointments') }, }, { + type: 'link', label: t('scheduling.appointments.new'), onClick: () => { history.push('/appointments/new') @@ -66,6 +71,15 @@ const Navbar = () => { }, ], }, + { + type: 'search', + placeholderText: t('actions.search'), + className: 'ml-auto nav-search', + buttonText: t('actions.search'), + buttonColor: 'secondary', + onClickButton: () => undefined, + onChangeInput: () => undefined, + }, ]} /> )