fhir-react 0.3.5 → 0.3.8

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

@@ -1,12 +1,84 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import MedicationStatement from './MedicationStatement';
 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,
@@ -96,4 +168,39 @@ describe('should render MedicationStatement component correctly', () => {
       '#med0309',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationStatement {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationStatement {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons }) => {
+const Observation = ({ fhirResource, fhirIcons, onClick }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -114,6 +114,7 @@ const Observation = ({ fhirResource, fhirIcons }) => {
             />
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -2,7 +2,7 @@
 // NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Observation from './Observation';
 
 import exampleObservationIssued from '../../../fixtures/dstu2/resources/observation/example-issued.json';
@@ -148,4 +148,33 @@ describe('should render component correctly', () => {
     expect(getByTestId('valueQuantityUnit')).not.toBeNull();
     expect(getByTestId('valueQuantityUnit').textContent).toEqual('mmol/l');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example1ObservationExcessR4 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Observation {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example1ObservationExcessR4 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Observation {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/Organization/Organization.js

@@ -8,7 +8,8 @@ import Telecom from '../../datatypes/Telecom';
 import Identifier from '../../datatypes/Identifier';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value, NotEnoughData } from '../../ui';
+import { Root, Header, Body, NotEnoughData } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const identifier = _get(fhirResource, 'identifier', '');
@@ -54,8 +55,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Organization = props => {
-  const { fhirResource, fhirVersion } = props;
+const Organization = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -74,42 +74,61 @@ const Organization = props => {
   const hasTelecom = Array.isArray(telecom) && telecom.length > 0;
   const hasTypes = Array.isArray(typeCodings) && typeCodings.length > 0;
   const notEnoughData = !hasAddresses && !hasTelecom && !hasTypes;
+
+  const tableData = [
+    {
+      label: 'Identifiers',
+      testId: 'identifier',
+      data: identifier && <Identifier fhirData={identifier} />,
+      status: identifier,
+    },
+    {
+      label: 'Addresses',
+      testId: 'address',
+      data:
+        hasAddresses &&
+        addresses.map((item, i) => (
+          <Address key={`item-${i}`} fhirData={item} />
+        )),
+      status: hasAddresses,
+    },
+    {
+      label: 'Contacts',
+      testId: 'contact',
+      data:
+        hasTelecom &&
+        telecom.map((item, i) => <Telecom key={`item-${i}`} fhirData={item} />),
+      status: hasTelecom,
+    },
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        hasTypes &&
+        typeCodings.map((typeCoding, idx) => (
+          <Coding key={idx} fhirData={typeCoding} />
+        )),
+      status: hasTypes,
+    },
+    {
+      label: '',
+      testId: '',
+      data: notEnoughData && <NotEnoughData data-testid="NotEnoughData" />,
+      status: notEnoughData,
+    },
+  ];
+
   return (
     <Root name="Organization">
-      {name && (
-        <Header>
-          <Title>{name}</Title>
-        </Header>
-      )}
-      <Body>
-        {identifier && (
-          <Value label="Identifiers" data-testid="identifier">
-            <Identifier fhirData={identifier} />
-          </Value>
-        )}
-        {hasAddresses && (
-          <Value label="Addresses" data-testid="address">
-            {addresses.map((item, i) => (
-              <Address key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasTelecom && (
-          <Value label="Contacts" data-testid="contact">
-            {telecom.map((item, i) => (
-              <Telecom key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {hasTypes && (
-          <Value label="Type" data-testid="type">
-            {typeCodings.map((typeCoding, idx) => (
-              <Coding key={idx} fhirData={typeCoding} />
-            ))}
-          </Value>
-        )}
-        {notEnoughData && <NotEnoughData data-testid="NotEnoughData" />}
-      </Body>
+      <Accordion
+        headerContent={
+          name && (
+            <Header resourceName="Organization" title={name} icon={fhirIcons} />
+          )
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -14,6 +14,9 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import OrganizationIcon from '../../../assets/containers/Organization/organization.svg';
+
 export default {
   title: 'Organization',
 };
@@ -24,6 +27,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Organization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={OrganizationIcon}
     />
   );
 };
@@ -34,6 +38,7 @@ export const Example2OfDSTU2 = () => {
     <Organization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -41,14 +46,22 @@ export const Example2OfDSTU2 = () => {
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Organization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
   return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Organization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
+    />
   );
 };
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Organization from './Organization';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,7 +14,80 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('should render Organization component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Organization/organization.svg')}
+          alt="organization"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    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 = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -128,4 +201,39 @@ describe('should render Organization component properly', () => {
       'No additional data',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Organization {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Organization {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -46,6 +46,7 @@ function Patient(props) {
     renderName,
     patientSimple,
     fhirIcons,
+    onClick,
   } = props;
 
   const id = getId(fhirResource);
@@ -146,6 +147,7 @@ function Patient(props) {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Patient from './Patient';
 
 import examplePatient from '../../../fixtures/dstu2/resources/patient/example.json';
@@ -38,7 +38,7 @@ describe('should render component correctly', () => {
       fhirResource: examplePatient,
       fhirIcons: (
         <img
-          src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg.svg')}
+          src={require('../assets/containers/Patient/patient.svg')}
           alt="patient"
         />
       ),
@@ -156,4 +156,33 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Patient {...defaultProps} />);
     expect(getByTestId('deceasedInfo').textContent).toEqual('2/14/2015');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example3PatientR4 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Patient {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example3PatientR4 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Patient {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -82,7 +82,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Practitioner = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Practitioner = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -160,6 +160,7 @@ const Practitioner = ({ fhirResource, fhirVersion, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Practitioner from './Practitioner';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -170,4 +170,39 @@ describe('Practitioner should render component correctly', () => {
     );
     jest.restoreAllMocks();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Practitioner {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Practitioner {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });