-
Notifications
You must be signed in to change notification settings - Fork 214
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(refactor) Refactor reusable patient banner components (#1209)
This PR refactors the reusable patient banner components as follows: ### PatientBannerPatientIdentifier - Renames the component export from `PatientBannerPatientIdentifier` to `PatientBannerPatientInfoIdentifiers` to better describe its purpose. The pluralized name is more representative of the fact that it renders a list of identifiers. - Renames the `identifiers` array prop from `identifier` to `identifiers` to better describe its purpose. - Fixes incorrect usage of the `showIdentifierLabel` prop. Per its description, it should toggle the display of the identifier label, not the entire identifier. - Removes the `title` prop from the Carbon `Tag` component which has since been deprecated. - Adds a test for the component. ### PatientBannerPatientInfo - Adds a default export. - Adds a test for the component. ### Misc - Adds a stub for `usePrimaryIdentifierCode` to the `esm-react-utils` mock. I'm not sure why we have a stub for the resource file, instead of just one for the function it exports. I'll look into this more closely.
- Loading branch information
1 parent
4286482
commit a0b090d
Showing
8 changed files
with
176 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 0 additions & 19 deletions
19
packages/framework/esm-framework/docs/interfaces/PatientBannerPatientInfoProps.md
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
...sm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { useConfig, usePrimaryIdentifierCode } from '@openmrs/esm-react-utils'; | ||
| import PatientBannerPatientIdentifiers from './patient-banner-patient-identifiers.component'; | ||
|
|
||
| const mockUsePrimaryIdentifierCode = jest.mocked(usePrimaryIdentifierCode); | ||
| const mockUseConfig = jest.mocked(useConfig); | ||
|
|
||
| describe('PatientBannerPatientIdentifiers', () => { | ||
| const mockIdentifiers = [ | ||
| { | ||
| use: 'official', | ||
| type: { | ||
| coding: [{ code: '05a29f94-c0ed-11e2-94be-8c13b969e334' }], | ||
| text: 'OpenMRS ID', | ||
| }, | ||
| value: '100GEJ', | ||
| }, | ||
| { | ||
| use: 'official', | ||
| type: { | ||
| coding: [{ code: '4281ec43-388b-4c25-8bb2-deaff0867b2c' }], | ||
| text: 'National ID', | ||
| }, | ||
| value: '123456789', | ||
| }, | ||
| ]; | ||
|
|
||
| beforeEach(() => { | ||
| mockUsePrimaryIdentifierCode.mockReturnValue({ | ||
| primaryIdentifierCode: '05a29f94-c0ed-11e2-94be-8c13b969e334', | ||
| isLoading: false, | ||
| error: undefined, | ||
| }); | ||
| mockUseConfig.mockReturnValue({ | ||
| excludePatientIdentifierCodeTypes: { uuids: [] }, | ||
| }); | ||
| }); | ||
|
|
||
| it('renders the patient identifiers', async () => { | ||
| render(<PatientBannerPatientIdentifiers identifiers={mockIdentifiers} showIdentifierLabel />); | ||
|
|
||
| expect(screen.getByText(/openmrs id/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/100gej/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/national id/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/123456789/i)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('does not render identifier labels if showIdentifierLabel is false', () => { | ||
| render(<PatientBannerPatientIdentifiers identifiers={mockIdentifiers} showIdentifierLabel={false} />); | ||
|
|
||
| expect(screen.queryByText(/openmrs id/i)).not.toBeInTheDocument(); | ||
| expect(screen.getByText(/100gej/i)).toBeInTheDocument(); | ||
| expect(screen.queryByText(/national id/i)).not.toBeInTheDocument(); | ||
| expect(screen.getByText(/123456789/i)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders nothing if identifiers are not provided', () => { | ||
| const { container } = render(<PatientBannerPatientIdentifiers identifiers={[]} showIdentifierLabel />); | ||
|
|
||
| expect(container).toBeEmptyDOMElement(); | ||
| }); | ||
|
|
||
| it('filters out excluded identifier types', () => { | ||
| mockUseConfig.mockReturnValue({ | ||
| excludePatientIdentifierCodeTypes: { uuids: ['4281ec43-388b-4c25-8bb2-deaff0867b2c'] }, | ||
| }); | ||
|
|
||
| render(<PatientBannerPatientIdentifiers identifiers={mockIdentifiers} showIdentifierLabel />); | ||
|
|
||
| expect(screen.queryByText(/openmrs id/i)).toBeInTheDocument(); | ||
| expect(screen.queryByText(/national id/i)).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -81,7 +81,7 @@ | |
| align-items: center; | ||
| } | ||
|
|
||
| .identifierTag { | ||
| .identifier { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
77 changes: 77 additions & 0 deletions
77
...ework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react'; | ||
| import { type i18n } from 'i18next'; | ||
| import { screen, render } from '@testing-library/react'; | ||
| import { usePrimaryIdentifierCode } from '@openmrs/esm-react-utils'; | ||
| import PatientBannerPatientInfo from './patient-banner-patient-info.component'; | ||
|
|
||
| window.i18next = { language: 'en' } as i18n; | ||
| const mockUsePrimaryIdentifierCode = jest.mocked(usePrimaryIdentifierCode); | ||
|
|
||
| const nameWithFormat = { | ||
| id: 'efdb246f-4142-4c12-a27a-9be60b9592e9', | ||
| family: 'Wilson', | ||
| given: ['John'], | ||
| text: 'Wilson, John', | ||
| }; | ||
|
|
||
| const mockPatient = { | ||
| resourceType: 'Patient', | ||
| id: '8673ee4f-e2ab-4077-ba55-4980f408773e', | ||
| extension: [ | ||
| { | ||
| url: 'http://fhir-es.transcendinsights.com/stu3/StructureDefinition/resource-date-created', | ||
| valueDateTime: '2017-01-18T09:42:40+00:00', | ||
| }, | ||
| { | ||
| url: 'https://purl.org/elab/fhir/StructureDefinition/Creator-crew-version1', | ||
| valueString: 'daemon', | ||
| }, | ||
| ], | ||
| identifier: [ | ||
| { | ||
| use: 'official', | ||
| type: { | ||
| coding: [{ code: '05a29f94-c0ed-11e2-94be-8c13b969e334' }], | ||
| text: 'OpenMRS ID', | ||
| }, | ||
| value: '100GEJ', | ||
| }, | ||
| { | ||
| use: 'official', | ||
| type: { | ||
| coding: [{ code: '4281ec43-388b-4c25-8bb2-deaff0867b2c' }], | ||
| text: 'National ID', | ||
| }, | ||
| value: '123456789', | ||
| }, | ||
| ], | ||
| active: true, | ||
| name: [nameWithFormat], | ||
| gender: 'male', | ||
| birthDate: '1972-04-04', | ||
| deceasedBoolean: false, | ||
| address: [], | ||
| }; | ||
|
|
||
| describe('PatientBannerPatientInfo', () => { | ||
| beforeEach(() => { | ||
| mockUsePrimaryIdentifierCode.mockReturnValue({ | ||
| primaryIdentifierCode: '05a29f94-c0ed-11e2-94be-8c13b969e334', | ||
| isLoading: false, | ||
| error: undefined, | ||
| }); | ||
| }); | ||
|
|
||
| it("renders the patient's name, demographics, and identifier details in the banner", () => { | ||
| render(<PatientBannerPatientInfo patient={mockPatient} />); | ||
|
|
||
| expect(screen.getByText(/john wilson/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/male/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/52 yrs/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/04-Apr-1972/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/openmrs id/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/100gej/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/national id/i)).toBeInTheDocument(); | ||
| expect(screen.getByText(/123456789/i)).toBeInTheDocument(); | ||
| }); | ||
| }); |