fhir-react 0.3.5 → 0.3.8

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { fhirVersions } from '../../../index';
 
@@ -7,8 +7,80 @@ import MedicationKnowledge from './MedicationKnowledge';
 
 import example1R4 from '../../../fixtures/r4/resources/medicationKnowledge/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/medicationKnowledge/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationKnowledge component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: example1R4,
+    };
+
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('medication knowledge');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: example1R4,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationKnowledge {...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.R4,
+      fhirResource: example1R4,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
+          alt="pill database"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('pill database');
+
+    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.R4,
+      fhirResource: example1R4,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('pill database');
+
+    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.R4,
+      fhirResource: example1R4,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with R4 source data', () => {
     const defaultProps = {
       fhirResource: example1R4,
@@ -66,4 +138,41 @@ describe('should render MedicationKnowledge component properly', () => {
       '(preferred-generic)',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationKnowledge {...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: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationKnowledge {...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/MedicationOrder/MedicationOrder.js

@@ -8,9 +8,7 @@ import Coding from '../../datatypes/Coding';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationOrder = props => {
-  const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Medication'];
+const MedicationOrder = ({ fhirResource, fhirIcons, onClick }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -56,7 +54,7 @@ const MedicationOrder = props => {
       <Accordion
         headerContent={
           <Header
-            icon={headerIcon}
+            icon={fhirIcons}
             resourceName="MedicationOrder"
             title={
               medicationReference && (
@@ -66,6 +64,7 @@ const MedicationOrder = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -4,7 +4,6 @@ import { object } from '@storybook/addon-knobs';
 import MedicationOrder from './MedicationOrder';
 
 import dstu2Example from '../../../fixtures/dstu2/resources/medicationOrder/example.json';
-import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'MedicationOrder',
@@ -12,5 +11,5 @@ export default {
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example);
-  return <MedicationOrder fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <MedicationOrder fhirResource={fhirResource} />;
 };

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

@@ -1,11 +1,78 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import MedicationOrder from './MedicationOrder';
 
 import example from '../../../fixtures/dstu2/resources/medicationOrder/example.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationOrder component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-order.svg')}
+          alt="medication order"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    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: example,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example,
@@ -13,12 +80,43 @@ describe('should render MedicationOrder component properly', () => {
 
     const { getByTestId } = render(<MedicationOrder {...defaultProps} />);
 
-    expect(getByTestId('title').textContent).toContain(
-      'Medication/MedicationExample2',
-    );
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain('Otitis Media');
     expect(getByTestId('hasDosageInstruction').textContent).toContain(
       'Take 5ml three times daily',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationOrder {...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: example,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationOrder {...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/MedicationRequest/MedicationRequest.js

@@ -9,9 +9,7 @@ import Date from '../../datatypes/Date';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationRequest = props => {
-  const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Medication'];
+const MedicationRequest = ({ fhirResource, fhirIcons, onClick }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -77,7 +75,7 @@ const MedicationRequest = props => {
       <Accordion
         headerContent={
           <Header
-            icon={headerIcon}
+            icon={fhirIcons}
             resourceName="MedicationRequest"
             title={
               medicationReference ? (
@@ -89,6 +87,7 @@ const MedicationRequest = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -9,6 +9,7 @@ import R4Example1 from '../../../fixtures/r4/resources/medicationRequest/example
 import R4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import R4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import MedicationRequestIcon from '../../../assets/containers/MedicationRequest/medication-request.svg';
 
 export default {
   title: 'MedicationRequest',
@@ -17,14 +18,20 @@ export default {
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={MedicationRequestIcon}
+    />
   );
 };
 
@@ -37,14 +44,12 @@ export const Example1OfR4 = () => {
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', R4Example2);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', R4Example3);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import MedicationRequest from './MedicationRequest';
 
@@ -8,8 +8,75 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import r4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationRequest component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-request.svg')}
+          alt="medication request"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    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: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -20,7 +87,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -51,7 +118,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -93,7 +160,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('#med0304');
+    expect(getByTestId('title').textContent).toContain('Myleran 2mg tablet');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Chronic myeloid Leukemia',
     );
@@ -104,4 +171,33 @@ describe('should render MedicationRequest component properly', () => {
     expect(getByTestId('created').textContent).toEqual('1/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationRequest {...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 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationRequest {...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/MedicationStatement/MedicationDosage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import _get from 'lodash/get';
 
 const MedicationDosage = props => {
-  const { dosage, hasNote, note, key } = props;
+  const { dosage, hasNote, note, itemNumber } = props;
 
   const instructions = _get(dosage, 'text');
   const additionalInstructionText = _get(
@@ -16,7 +16,7 @@ const MedicationDosage = props => {
   const hasRoute = route.trim() !== '';
 
   return (
-    <ValueSection label="Dosage" key={key}>
+    <ValueSection label="Dosage" key={itemNumber}>
       <ValueSectionItem label="Instructions" data-testid="dosageInstruction">
         {instructions}
       </ValueSectionItem>

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

@@ -107,8 +107,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const MedicationStatement = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const MedicationStatement = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -172,6 +176,7 @@ const MedicationStatement = props => {
                   return (
                     <MedicationDetails
                       key={`item-${i}`}
+                      itemNumber={`item-${i}`}
                       medication={_get(medication, 'code.coding[0].display')}
                       expiration={_get(
                         medication,
@@ -199,6 +204,7 @@ const MedicationStatement = props => {
               })}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -10,6 +10,7 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationStatement/e
 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',
@@ -21,7 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
     />
   );
 };
@@ -32,7 +33,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={MedicationStatementIcon}
     />
   );
 };
@@ -54,7 +55,7 @@ export const Example1OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -65,7 +66,7 @@ export const Example2OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };