diff --git a/src/__tests__/shared/components/navbar/Navbar.test.tsx b/src/__tests__/shared/components/navbar/Navbar.test.tsx index d3c7b78d5d..6e550be95f 100644 --- a/src/__tests__/shared/components/navbar/Navbar.test.tsx +++ b/src/__tests__/shared/components/navbar/Navbar.test.tsx @@ -11,6 +11,7 @@ import thunk from 'redux-thunk' import Navbar from '../../../../shared/components/navbar/Navbar' import Permissions from '../../../../shared/model/Permissions' +import User from '../../../../shared/model/User' import { RootState } from '../../../../shared/store' const mockStore = createMockStore([thunk]) @@ -18,10 +19,10 @@ const mockStore = createMockStore([thunk]) describe('Navbar', () => { const history = createMemoryHistory() - const setup = (permissions: Permissions[]) => { + const setup = (permissions: Permissions[], user?: User) => { const store = mockStore({ title: '', - user: { permissions }, + user: { permissions, user }, } as any) const wrapper = mount( @@ -34,6 +35,11 @@ describe('Navbar', () => { return wrapper } + const userName = { + givenName: 'givenName', + familyName: 'familyName', + } as User + const allPermissions = [ Permissions.ReadPatients, Permissions.WritePatients, @@ -170,13 +176,24 @@ describe('Navbar', () => { }) describe('account', () => { - it('should render an account link list', () => { + it("should render a link with the user's identification", () => { + const expectedUserName = `user.login.currentlySignedInAs ${userName.givenName} ${userName.familyName}` + + const wrapper = setup(allPermissions, userName) + const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) + const accountLinkList = hospitalRunNavbar.find('.nav-account') + const { children } = accountLinkList.first().props() as any + + expect(children[0].props.children).toEqual([undefined, expectedUserName]) + }) + + 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 - expect(children[0].props.children).toEqual([undefined, 'settings.label']) + expect(children[1].props.children).toEqual([undefined, 'settings.label']) }) it('should navigate to /settings when the list option is selected', () => { @@ -187,6 +204,7 @@ describe('Navbar', () => { act(() => { children[0].props.onClick() + children[1].props.onClick() }) expect(history.location.pathname).toEqual('/settings') diff --git a/src/shared/components/navbar/Navbar.tsx b/src/shared/components/navbar/Navbar.tsx index e77262ce25..fb6107bd35 100644 --- a/src/shared/components/navbar/Navbar.tsx +++ b/src/shared/components/navbar/Navbar.tsx @@ -12,7 +12,7 @@ const Navbar = () => { const dispatch = useDispatch() const history = useHistory() const { t } = useTranslator() - const { permissions } = useSelector((state: RootState) => state.user) + const { permissions, user } = useSelector((state: RootState) => state.user) const navigateTo = (location: string) => { history.push(location) @@ -98,6 +98,15 @@ const Navbar = () => { type: 'link-list-icon', alignRight: true, children: [ + { + type: 'link', + label: `${t('user.login.currentlySignedInAs')} ${user?.givenName} ${ + user?.familyName + }`, + onClick: () => { + navigateTo('/settings') + }, + }, { type: 'link', label: t('settings.label'), diff --git a/src/shared/locales/enUs/translations/user/index.ts b/src/shared/locales/enUs/translations/user/index.ts index 0d3ea73660..4911c39b66 100644 --- a/src/shared/locales/enUs/translations/user/index.ts +++ b/src/shared/locales/enUs/translations/user/index.ts @@ -13,6 +13,7 @@ export default { required: 'Password is required.', }, }, + currentlySignedInAs: 'Currently signed in as', }, }, }