fhir-react 0.3.5 → 0.3.8

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

@@ -1,12 +1,84 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AdverseEvent from './AdverseEvent';
 import fhirVersions from '../fhirResourceVersions';
 
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.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 = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<AdverseEvent {...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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/AdverseEvent/adverse-event.svg')}
+          alt="adverse event"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -18,7 +90,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
-    expect(getByTestId('type').textContent).toContain('304386008');
+    expect(getByTestId('event').textContent).toContain('304386008');
 
     expect(getByTestId('description').textContent).toContain(
       'This was a mild rash',
@@ -44,4 +116,39 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('actuality').textContent).toEqual('actual');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AdverseEvent {...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(
+      <AdverseEvent {...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/AllergyIntolerance/AllergyIntolerance.js

@@ -123,9 +123,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AllergyIntolerance = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['AllergyIntolerance'];
+const AllergyIntolerance = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -219,10 +222,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">
@@ -233,6 +236,7 @@ const AllergyIntolerance = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AllergyIntolerance from './AllergyIntolerance';
 
 import exampleAllergyIntoleranceDSTU2 from '../../../fixtures/dstu2/resources/allergyIntolerance/example1.json';
@@ -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,
@@ -130,4 +201,39 @@ describe('should render component correctly', () => {
 
     expect(queryByTestId('asserter')).toBeNull();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AllergyIntolerance {...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: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <AllergyIntolerance {...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/Appointment/Appointment.js

@@ -144,7 +144,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Appointment = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   const {
     description,
     status,
@@ -253,6 +253,7 @@ const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Appointment from './Appointment';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -231,4 +231,39 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('reason').textContent).toContain('Clinical Review');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example3AppointmentR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Appointment {...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: example3AppointmentR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Appointment {...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/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>}

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

@@ -9,6 +9,7 @@ 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',
@@ -16,22 +17,27 @@ export default {
 
 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 = () => {

package/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);

package/src/components/resources/Bundle/Bundle.css

@@ -1,3 +1,10 @@
 .fhir-resource__Bundle__item {
   margin-top: 10px;
 }
+
+.fhir-resource__Bundle__rootPadding:first-of-type {
+  padding: 8px;
+  background: white;
+  border-radius: 0.2rem;
+  border: 1px solid #dee2e6;
+}

package/src/components/resources/Bundle/Bundle.js

@@ -4,12 +4,12 @@ import _get from 'lodash/get';
 
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import { Root, Header, Title, Badge, Body, BadgeSecondary } from '../../ui';
+import { Root, Header, Badge, Body, BadgeSecondary } from '../../ui';
 import * as FhirResourceTypes from '../../supportedFhirResourceList';
 
 import './Bundle.css';
 
-export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
+export default function Bundle({ fhirResource, fhirVersion }) {
   const commonDTO = fhirResource => {
     const type = _get(fhirResource, 'type', null);
     const total = _get(fhirResource, 'total');
@@ -51,11 +51,14 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
     .filter(Boolean);
 
   return (
-    <Root name="Bundle">
-      <Header>
-        {type && <Title data-testid="title">{type}</Title>}
-        {total && <Badge data-testid="total">{total}</Badge>}
-      </Header>
+    <Root name="Bundle" className="fhir-resource__Bundle__rootPadding">
+      <Header
+        resourceName="Bundle"
+        title={type}
+        badges={!isNaN(total) && <Badge data-testid="total">{total}</Badge>}
+        capitalize
+        isNoIcon
+      />
       <Body>
         {resources.length > 0 &&
           resources.map((resource, index) => {
@@ -71,14 +74,15 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
                 key={`${resource.id}-${index}`}
               >
                 {resourceType && (
-                  <BadgeSecondary data-testid="resourceType">
-                    {resourceType}
-                  </BadgeSecondary>
+                  <div className="mx-20">
+                    <BadgeSecondary data-testid="resourceType">
+                      {resourceType}
+                    </BadgeSecondary>
+                  </div>
                 )}
                 <FhirComponent
                   fhirResource={resource}
                   fhirVersion={fhirVersion}
-                  fhirIcons={fhirIcons}
                 />
               </div>
             );