diff --git a/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.test.tsx b/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.test.tsx new file mode 100644 index 000000000..ae047bf3c --- /dev/null +++ b/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.test.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { render, act, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { PatientStatusBannerTag } from './patient-status-tag.component'; +import { isPatientHivPositive } from './patientHivStatus'; + +const mockIsPatientHivPositive = isPatientHivPositive as jest.Mock; +jest.mock('./patientHivStatus'); + +describe('PatientStatusBannerTag', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + const hivPositiveSampleUuid = '703AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; + + describe('PatientStatusBannerTag', () => { + it('renders red tag when patient is HIV positive', async () => { + mockIsPatientHivPositive.mockResolvedValue(true); + await act(async () => { + render(); + }); + + expect(screen.getByText(/HIV Positive/i)).toBeInTheDocument(); + }); + }); + + it('does not render red tag when patient is not HIV positive', async () => { + await act(async () => { + (isPatientHivPositive as jest.Mock).mockResolvedValue(false); + render(); + }); + + expect(screen.queryByText('HIV Positive')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx b/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx index ae047bf3c..8c6a6368b 100644 --- a/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx +++ b/packages/esm-commons-lib/src/components/banner-tags/patient-status-tag.component.tsx @@ -1,36 +1,18 @@ -import React from 'react'; -import { render, act, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; -import { PatientStatusBannerTag } from './patient-status-tag.component'; +import React, { useEffect, useState } from 'react'; +import { Tag } from '@carbon/react'; +import { useTranslation } from 'react-i18next'; import { isPatientHivPositive } from './patientHivStatus'; -const mockIsPatientHivPositive = isPatientHivPositive as jest.Mock; -jest.mock('./patientHivStatus'); +export function PatientStatusBannerTag({ patientUuid }) { + const { t } = useTranslation(); + const [hivPositive, setHivPositive] = useState(false); -describe('PatientStatusBannerTag', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); + useEffect(() => { + isPatientHivPositive(patientUuid).then((result) => setHivPositive(result)); + }, [hivPositive, patientUuid]); - const hivPositiveSampleUuid = '703AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'; + //TODO: Improve refresh time + // forceRerender(); - describe('PatientStatusBannerTag', () => { - it('renders red tag when patient is HIV positive', async () => { - mockIsPatientHivPositive.mockResolvedValue(true); - await act(async () => { - render(); - }); - - expect(screen.getByText(/HIV Positive/i)).toBeInTheDocument(); - }); - }); - - it('does not render red tag when patient is not HIV positive', async () => { - await act(async () => { - (isPatientHivPositive as jest.Mock).mockResolvedValue(false); - render(); - }); - - expect(screen.queryByText('HIV Positive')).not.toBeInTheDocument(); - }); -}); + return <>{hivPositive && {t('hivPositive', 'HIV Positive')}}; +}