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')}}>;
+}