[PATIENTAPP-109]check icons implementation at the fhir react componen…

…ts (#323) * Refactor icons at the AllergyIntolerance component * Refactor icons at the Binary component * Refactor icons at the CarePlan component * Refactor icons at the Device component * Refactor icons at the DiagnosticReport component * Refactor icons at the DocumentReference component * Refactor icons at the FamilyMemberHistory component * Refactor icons at the Goal component * Refactor icons at the MedicationOrder component * Refactor icons at the MedicationRequest component * Refactor icons at the MedicationStatement component * Refactor icons at the ResourceCategory component * Upgrade a library version to 0.3.6 * Upgrade a storybook link
1uphealth · Feb 9, 2022 · 92031b3 · 92031b3
1 parent 3ac2079
commit 92031b3
Show file tree

Hide file tree

Showing 40 changed files with 1,021 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 [![CircleCI](https://circleci.com/gh/1uphealth/fhir-react/tree/master.svg?style=svg)](https://circleci.com/gh/1uphealth/fhir-react/tree/master)
-[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-4/index.html)
+[![Storybook](https://github.com/storybookjs/brand/raw/master/badge/badge-storybook.svg?sanitize=true)](https://fhir-react-lib-test-storybook.s3.amazonaws.com/branch/release-0-3-6/index.html)
 
 # fhir-react
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

diff --git a/...sets/containers/Medication/medication.svg → ...ners/MedicationOrder/medication-order.svg b/...sets/containers/Medication/medication.svg → ...ners/MedicationOrder/medication-order.svg
diff --git a/src/assets/containers/MedicationRequest/medication-request.svg b/src/assets/containers/MedicationRequest/medication-request.svg
diff --git a/...ResourceCategory/resource-placeholder.svg → ...rs/ResourceCategory/resource-category.svg b/...ResourceCategory/resource-placeholder.svg → ...rs/ResourceCategory/resource-category.svg
diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
@@ -123,9 +123,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AllergyIntolerance = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['AllergyIntolerance'];
+const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -219,10 +217,10 @@ const AllergyIntolerance = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName="AllergyIntollerance"
+            resourceName="AllergyIntolerance"
             badges={status && <Badge data-testid="status">{status}</Badge>}
             title={title}
-            icon={headerIcon}
+            icon={fhirIcons}
             rightAdditionalContent={
               recordedDate && (
                 <BadgeSecondary data-testid="recordedDate">

diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.stories.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.stories.js
@@ -12,6 +12,7 @@ import example2AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergy
 import example3AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
+import AllergyIntoleranceIcon from '../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg';
 
 export default { title: 'AllergyIntolerance' };
 
@@ -21,7 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
     />
   );
 };
@@ -32,7 +33,7 @@ export const Example2ofDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={AllergyIntoleranceIcon}
     />
   );
 };
@@ -54,7 +55,7 @@ export const Example2DiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -65,7 +66,7 @@ export const Example1R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };

diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.test.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.test.js
@@ -7,8 +7,79 @@ import exampleAllergyIntoleranceSTU3 from '../../../fixtures/stu3/resources/alle
 import exampleAllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example1.json';
 import example2AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example3.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
+          alt="allergy intolerance"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleAllergyIntoleranceDSTU2,

diff --git a/src/components/resources/Binary/Binary.js b/src/components/resources/Binary/Binary.js
@@ -7,7 +7,6 @@ import { Body, Header } from '../../ui';
 
 const Binary = props => {
   const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Binary'];
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -34,7 +33,7 @@ const Binary = props => {
           <Header
             resourceName="Binary"
             title={`Binary file: ${fhirResource.contentType}`}
-            icon={headerIcon}
+            icon={fhirIcons}
           />
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}

diff --git a/src/components/resources/Binary/Binary.stories.js b/src/components/resources/Binary/Binary.stories.js
@@ -9,29 +9,35 @@ import stu3ExamplePdf from '../../../fixtures/stu3/resources/binary/example-pdf.
 import stu3ExampleJpeg from '../../../fixtures/stu3/resources/binary/example-jpeg.json';
 import stu3ExampleJson from '../../../fixtures/stu3/resources/binary/example-json.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import BinaryIcon from '../../../assets/containers/Binary/binary.svg';
 
 export default {
   title: 'Binary',
 };
 
 export const PdfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExamplePdf);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return (
+    <Binary
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Binary/binary.svg')}
+    />
+  );
 };
 
 export const JpegDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={BinaryIcon} />;
 };
 
 export const PdfSTU3 = () => {
   const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const JpegSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const JsonSTU3 = () => {

diff --git a/src/components/resources/Binary/Binary.test.js b/src/components/resources/Binary/Binary.test.js
@@ -5,8 +5,75 @@ import Binary from './Binary';
 import stu3ExamplePdf from '../../../fixtures/stu3/resources/binary/example-pdf.json';
 import stu3ExampleJpeg from '../../../fixtures/stu3/resources/binary/example-jpeg.json';
 import stu3ExampleJson from '../../../fixtures/stu3/resources/binary/example-json.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Binary/binary.svg')}
+          alt="binary"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('PDF binary file', () => {
     const { container } = render(<Binary fhirResource={stu3ExamplePdf} />);
     expect(container).not.toBe(null);

diff --git a/src/components/resources/CarePlan/CarePlan.stories.js b/src/components/resources/CarePlan/CarePlan.stories.js
@@ -10,38 +10,64 @@ import weightLossCarePlanR4 from '../../../fixtures/r4/resources/carePlan/weight
 import pregnancyCarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.json';
 import heartOperationCarePlanR4 from '../../../fixtures/r4/resources/carePlan/heartOperationPlan.json';
 import fhirVersions from '../fhirResourceVersions';
+import CarePlanIcon from '../../../assets/containers/CarePlan/care-plan.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'CarePlan' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleCarePlanDSTU2);
   return (
-    <CarePlan fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/CarePlan/care-plan.svg')}
+    />
   );
 };
 
 export const ExampleCarePlanSTU3 = () => {
   const fhirResource = object('Resource', exampleCarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={CarePlanIcon}
+    />
   );
 };
 
 export const Example2CarePlanSTU3 = () => {
   const fhirResource = object('Resource', example2CarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const WeightLossCarePlanR4 = () => {
   const fhirResource = object('Resource', weightLossCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const PregnancyCarePlanR4 = () => {
   const fhirResource = object('Resource', pregnancyCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const HeartOperatioCarePlanR4 = () => {