fhir-react 0.3.5 → 0.3.8

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Coverage from './Coverage';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -8,8 +8,80 @@ import exampleCoverage from '../../../fixtures/dstu2/resources/coverage/example1
 import exampleCoverageStu3 from '../../../fixtures/stu3/resources/coverage/example1.json';
 import example2CoverageStu3 from '../../../fixtures/stu3/resources/coverage/example2.json';
 import exampleCoverageR4 from '../../../fixtures/r4/resources/coverage/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.DSTU2,
+      fhirResource: exampleCoverage,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Coverage {...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: exampleCoverage,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Coverage/coverage.svg')}
+          alt="coverage"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('coverage');
+
+    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: exampleCoverage,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Coverage {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleCoverage,
@@ -18,7 +90,7 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Coverage {...defaultProps} />);
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(getByTestId('planId').textContent).toContain('CBI35');
@@ -35,7 +107,7 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Coverage {...defaultProps} />);
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(getByTestId('planId').textContent).toContain('B37FC');
@@ -70,7 +142,7 @@ describe('should render component correctly', () => {
     );
 
     expect(getByTestId('title').textContent.replace(nbspRegex, ' ')).toContain(
-      'Coverage Identifier: 12345',
+      'Coverage',
     );
     expect(getByTestId('issuer').textContent).toContain('Organization/2');
     expect(queryAllByTestId('planId').length).toEqual(0);
@@ -79,4 +151,39 @@ describe('should render component correctly', () => {
     expect(getByTestId('type').textContent).toContain('extended healthcare');
     expect(queryAllByTestId('details').length).toEqual(0);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: exampleCoverageR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Coverage {...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: exampleCoverageR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Coverage {...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/Device/Device.js

@@ -102,7 +102,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Device = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Device = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -178,6 +178,7 @@ const Device = ({ fhirResource, fhirVersion, fhirIcons }) => {
               ))}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -10,6 +10,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/device/example2.json'
 import r4Example1 from '../../../fixtures/r4/resources/device/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/device/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import DeviceIcon from '../../../assets/containers/Device/device.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Device',
@@ -18,29 +20,55 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Device/device.svg')}
+    />
   );
 };
 
 export const ExampleOfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={DeviceIcon}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const Example2OfR4 = () => {

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

@@ -1,13 +1,85 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Device from './Device';
 import fhirVersions from '../fhirResourceVersions';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/device/example.json';
 import stu3Example2 from '../../../fixtures/stu3/resources/device/example2.json';
 import r4Example2 from '../../../fixtures/r4/resources/device/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Device component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Device {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Device/device.svg')}
+          alt="device"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    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: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -65,4 +137,39 @@ describe('should render Device component properly', () => {
 
     expect(getByTestId('uniqueId').textContent).toEqual('-');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Device {...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 fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Device {...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/DiagnosticReport/DiagnosticReport.js

@@ -93,8 +93,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const DiagnosticReport = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const DiagnosticReport = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,6 +169,7 @@ const DiagnosticReport = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -10,6 +10,7 @@ import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnostic
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.json';
 import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
 
 export default { title: 'DiagnosticReport' };
 
@@ -19,7 +20,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
     />
   );
 };
@@ -30,7 +31,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={DiagnosticReportIcon}
     />
   );
 };
@@ -52,7 +53,7 @@ export const Example2DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -63,7 +64,7 @@ export const Example3DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import DiagnosticReport from './DiagnosticReport';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -7,8 +7,79 @@ import exampleDiagnosticReportDSTU2 from '../../../fixtures/dstu2/resources/diag
 import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagnosticReport/example1.json';
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.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: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+          alt="diagnostic report"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    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: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleDiagnosticReportDSTU2,
@@ -81,4 +152,39 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('performer').textContent).toContain('Todd Ashby');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2DiagnosticReportR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <DiagnosticReport {...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: example2DiagnosticReportR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <DiagnosticReport {...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/DocumentReference/DocumentReference.js

@@ -216,8 +216,12 @@ const Content = props => {
   );
 };
 
-const DocumentReference = props => {
-  const { fhirVersion, fhirResource, fhirIcons } = props;
+const DocumentReference = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -337,6 +341,7 @@ const DocumentReference = props => {
             {hasContent && <Content content={content} />}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -8,6 +8,7 @@ import exampleDocumentReference from '../../../fixtures/dstu2/resources/document
 import exampleDocumentReferenceSTU3 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import example1DocumentReferenceR4 from '../../../fixtures/r4/resources/documentReference/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import DocumentReferenceIcon from '../../../assets/containers/DocumentReference/document-reference.svg';
 
 export default { title: 'Document Reference' };
 
@@ -17,7 +18,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/DocumentReference/document-reference.svg')}
     />
   );
 };
@@ -28,7 +29,7 @@ export const ExampleSTU3 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={DocumentReferenceIcon}
     />
   );
 };