fhir-react 0.3.2 → 0.3.6

package/src/components/resources/MedicationStatement/MedicationStatement.stories.js

@@ -9,6 +9,8 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medicationStatement/e
 import stu3Example2 from '../../../fixtures/stu3/resources/medicationStatement/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/medicationStatement/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationStatement/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationStatementIcon from '../../../assets/containers/MedicationStatement/medication-statement.svg';
 
 export default {
   title: 'MedicationStatement',
@@ -20,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
     />
   );
 };
@@ -30,6 +33,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={MedicationStatementIcon}
     />
   );
 };
@@ -40,6 +44,7 @@ export const Example2OfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +55,7 @@ export const Example1OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -60,6 +66,7 @@ export const Example2OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

package/src/components/resources/MedicationStatement/MedicationStatement.test.js

@@ -5,8 +5,80 @@ import fhirVersions from '../fhirResourceVersions';
 import example1MedicationStatement from '../../../fixtures/dstu2/resources/medicationStatement/example1.json';
 import stu3Example from '../../../fixtures/stu3/resources/medicationStatement/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/medicationStatement/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationStatement component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationStatement/medication-statement.svg')}
+          alt="medication statement"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('medication statement');
+
+    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: example1MedicationStatement,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationStatement {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example1MedicationStatement,
@@ -19,7 +91,7 @@ describe('should render MedicationStatement component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'amphetamine-dextroamphetamine',
     );
-    expect(getByTestId('hasEffectivePeriod').textContent).toContain('from');
+    expect(getByTestId('startDate').textContent).toContain('4/19/2016');
     expect(queryByTestId('medicationReference')).toBeNull();
 
     expect(getByTestId('dosageInstruction').textContent).toContain(
@@ -32,19 +104,35 @@ describe('should render MedicationStatement component correctly', () => {
       fhirResource: stu3Example,
       fhirVersion: fhirVersions.STU3,
     };
-    const { getByTestId, queryAllByTestId } = render(
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
       <MedicationStatement {...defaultProps} />,
     );
 
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
 
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
 
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
+
+    expect(getByTestId('dosageInstruction').textContent).toContain(
+      '1-2 tablets once daily at bedtime as needed for restless legs',
+    );
 
+    expect(queryByTestId('medicationReference').textContent).toContain(
+      '#med0309',
+    );
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
   });
 
@@ -58,14 +146,23 @@ describe('should render MedicationStatement component correctly', () => {
     );
 
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
 
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
 
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
 
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
     expect(getByTestId('medicationReference').textContent).toContain(
       '#med0309',

package/src/components/resources/Observation/Observation.js

@@ -18,8 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = props => {
-  const { fhirResource } = props;
+const Observation = ({ fhirResource, fhirIcons }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -72,7 +71,7 @@ const Observation = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName={fhirResource.resourceType}
+            resourceName="Observation"
             additionalContent={
               issued && (
                 <Value label="Start date" data-testid="headerStartDate">
@@ -104,6 +103,7 @@ const Observation = props => {
                 small
               />
             }
+            icon={fhirIcons}
           />
         }
         bodyContent={

package/src/components/resources/Observation/Observation.stories.js

@@ -12,32 +12,41 @@ import example3ObservationExcessSTU3 from '../../../fixtures/stu3/resources/obse
 import example1ObservationExcessR4 from '../../../fixtures/r4/resources/observation/example1.json';
 import example2ObservationExcessR4 from '../../../fixtures/r4/resources/observation/example2.json';
 import example3ObservationExcessR4 from '../../../fixtures/r4/resources/observation/example3.json';
+import ObservationIcon from '../../../assets/containers/Observation/observation.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'Observation' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleObservationIssued);
-  return <Observation fhirResource={fhirResource} />;
+  return (
+    <Observation
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Observation/observation.svg')}
+    />
+  );
 };
 
 export const ExampleWithoutIssuedDSTU2 = () => {
   const fhirResource = object('Resource', exampleObservation);
-  return <Observation fhirResource={fhirResource} />;
+  return (
+    <Observation fhirResource={fhirResource} fhirIcons={ObservationIcon} />
+  );
 };
 
 export const ExampleWithIssuedSTU3 = () => {
   const fhirResource = object('Resource', exampleObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} />;
+  return <Observation fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const ExampleWithoutIssuedSTU3 = () => {
   const fhirResource = object('Resource', exampleObservationSTU3);
-  return <Observation fhirResource={fhirResource} />;
+  return <Observation fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', example3ObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} />;
+  return <Observation fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const Example1OfR4 = () => {

package/src/components/resources/Observation/Observation.test.js

@@ -11,8 +11,75 @@ import exampleObservationExcessSTU3 from '../../../fixtures/stu3/resources/obser
 
 import example1ObservationExcessR4 from '../../../fixtures/r4/resources/observation/example2.json';
 import example2ObservationExcessR4 from '../../../fixtures/r4/resources/observation/example3.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: exampleObservationIssued,
+    };
+
+    const { getByAltText } = render(<Observation {...defaultProps} />);
+    const headerIcon = getByAltText('observation');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleObservationIssued,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Observation {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleObservationIssued,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
+          alt="observation"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Observation {...defaultProps} />);
+    const headerIcon = getByAltText('observation');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleObservationIssued,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Observation {...defaultProps} />);
+    const headerIcon = getByAltText('observation');
+
+    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: exampleObservationIssued,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Observation {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   test('DSTU2 renders properly', () => {
     const defaultProps = {
       fhirResource: exampleObservationIssued,

package/src/components/resources/Patient/Patient.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import _isEmpty from 'lodash/isEmpty';
-import md5 from 'md5';
 
 import HumanName from '../../datatypes/HumanName';
 import Telecom from '../../datatypes/Telecom';
@@ -41,11 +40,15 @@ export function getGender(fhirResource) {
 }
 
 function Patient(props) {
-  const { fhirResource, fhirVersion, renderName, patientSimple } = props;
+  const {
+    fhirResource,
+    fhirVersion,
+    renderName,
+    patientSimple,
+    fhirIcons,
+  } = props;
 
   const id = getId(fhirResource);
-  const idHash = md5(id || '');
-  const avatarSrc = `http://www.gravatar.com/avatar/${idHash}?s=50&r=any&default=identicon&forcedefault=1`;
   const patientName = getNames(fhirResource);
   const patientBirthDate = getBirthDate(fhirResource);
   const patientGender = getGender(fhirResource);
@@ -118,7 +121,7 @@ function Patient(props) {
       <Accordion
         headerContent={
           <Header
-            resourceName={fhirResource.resourceType}
+            resourceName="Patient"
             additionalContent={
               patientBirthDate && (
                 <span className="text-gray-600">
@@ -130,7 +133,7 @@ function Patient(props) {
                 </span>
               )
             }
-            icon={avatarSrc}
+            icon={fhirIcons}
             badges={
               active && <Badge data-testid="activeStatus">{activeStatus}</Badge>
             }

package/src/components/resources/Patient/Patient.stories.js

@@ -12,32 +12,39 @@ import example2PatientSTU3 from '../../../fixtures/stu3/resources/patient/exampl
 import example1PatientR4 from '../../../fixtures/r4/resources/patient/example1.json';
 import example2PatientR4 from '../../../fixtures/r4/resources/patient/example2.json';
 import example3PatientR4 from '../../../fixtures/r4/resources/patient/example3.json';
+import PatientIcon from '../../../assets/containers/Patient/patient.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'Patient' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', examplePatient);
-  return <Patient fhirResource={fhirResource} />;
+  return (
+    <Patient
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Patient/patient.svg')}
+    />
+  );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', example2PatientDSTU2);
-  return <Patient fhirResource={fhirResource} />;
+  return <Patient fhirResource={fhirResource} fhirIcons={PatientIcon} />;
 };
 
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', examplePatientSTU3);
-  return <Patient fhirResource={fhirResource} />;
+  return <Patient fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2STU3 = () => {
   const fhirResource = object('Resource', example2PatientSTU3);
-  return <Patient fhirResource={fhirResource} />;
+  return <Patient fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example1R4 = () => {
   const fhirResource = object('Resource', example1PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+  return <Patient fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const Example2R4 = () => {

package/src/components/resources/Patient/Patient.test.js

@@ -7,8 +7,75 @@ import examplePatientSTU3 from '../../../fixtures/stu3/resources/patient/example
 import example2PatientSTU3 from '../../../fixtures/stu3/resources/patient/example2.json';
 import example1PatientR4 from '../../../fixtures/r4/resources/patient/example1.json';
 import example3PatientR4 from '../../../fixtures/r4/resources/patient/example3.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: examplePatient,
+    };
+
+    const { getByAltText } = render(<Patient {...defaultProps} />);
+    const headerIcon = getByAltText('patient');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: examplePatient,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Patient {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplePatient,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg.svg')}
+          alt="patient"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Patient {...defaultProps} />);
+    const headerIcon = getByAltText('patient');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplePatient,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Patient {...defaultProps} />);
+    const headerIcon = getByAltText('patient');
+
+    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: examplePatient,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Patient {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2', () => {
     const defaultProps = {
       fhirResource: examplePatient,

package/src/components/resources/Practitioner/Practitioner.js

@@ -15,7 +15,6 @@ import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
-import md5 from 'md5';
 
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id', '');
@@ -83,8 +82,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Practitioner = props => {
-  const { fhirResource, fhirVersion } = props;
+const Practitioner = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -93,7 +91,6 @@ const Practitioner = props => {
     return <UnhandledResourceDataStructure resourceName="Practitioner" />;
   }
   const {
-    id,
     identifier,
     name,
     gender,
@@ -155,17 +152,10 @@ const Practitioner = props => {
       <Accordion
         headerContent={
           <Header
+            resourceName="Practitioner"
             additionalContent={<p className="mb-0">{`(${use})`}</p>}
             badges={status && <Badge data-testid="status">{status}</Badge>}
-            icon={
-              <img
-                className="header-icon__practitioner-avatar rounded-1"
-                src={`http://www.gravatar.com/avatar/${md5(
-                  id,
-                )}?s=30&r=any&default=identicon&forcedefault=1`}
-                alt=""
-              />
-            }
+            icon={fhirIcons}
             title={<HumanName fhirData={name} isTitle />}
           />
         }

package/src/components/resources/Practitioner/Practitioner.stories.js

@@ -11,6 +11,8 @@ import stu3Example1 from '../../../fixtures/stu3/resources/practitioner/example-
 import r4Example1 from '../../../fixtures/r4/resources/practitioner/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/practitioner/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/practitioner/example3.json';
+import PractitionerIcon from '../../../assets/containers/Practitioner/practitioner.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'Practitioner' };
 
@@ -20,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Practitioner
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Practitioner/practitioner.svg')}
     />
   );
 };
@@ -30,6 +33,7 @@ export const Example2OfDSTU2 = () => {
     <Practitioner
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={PractitionerIcon}
     />
   );
 };
@@ -37,21 +41,33 @@ export const Example2OfDSTU2 = () => {
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <Practitioner fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Practitioner
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <Practitioner fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Practitioner
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
   );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
   return (
-    <Practitioner fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Practitioner
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
   );
 };