fhir-react 0.3.5 → 0.3.8

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

@@ -11,6 +11,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.j
 import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medication/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationIcon from '../../../assets/containers/Medication/medication.svg';
 
 export default {
   title: 'Medication',
@@ -19,46 +21,74 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Medication fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Medication/medication.svg')}
+    />
   );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Medication fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={MedicationIcon}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <Medication fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
   return (
-    <Medication fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
   );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <Medication fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
   );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
   return (
-    <Medication fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
   return (
-    <Medication fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Medication
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Medication from './Medication';
 import fhirVersions from '../fhirResourceVersions';
@@ -9,8 +9,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medication/example1.j
 import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Medication component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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(<Medication {...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/Medication/medication.svg')}
+          alt="medication"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -41,7 +113,9 @@ describe('should render Medication component properly', () => {
       fhirVersion: fhirVersions.STU3,
     };
 
-    const { container, getByTestId } = render(<Medication {...defaultProps} />);
+    const { container, getByTestId, getByAltText } = render(
+      <Medication {...defaultProps} />,
+    );
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain(
@@ -56,8 +130,8 @@ describe('should render Medication component properly', () => {
     );
     expect(getByTestId('package-container').textContent).toContain('Vial');
 
-    expect(getByTestId('product-images').textContent).toContain(
-      'Vancomycin Image',
+    expect(getByAltText('Vancomycin Image').src).toContain(
+      'https://www.drugs.com/images/pills/fio/AKN07410.JPG',
     );
   });
 
@@ -114,4 +188,39 @@ describe('should render Medication component properly', () => {
     expect(queryByTestId('product-images')).toBeNull();
     expect(getByTestId('product-ingredient').textContent).toContain('#sub04');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Medication {...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: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Medication {...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/MedicationAdministration/MedicationAdministration.js

@@ -9,16 +9,16 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Badge,
   Body,
-  Value,
   MissingValue,
   TableHeader,
   Table,
   TableCell,
   TableRow,
+  ValueSection,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const medicationReference = _get(fhirResource, 'medicationReference');
@@ -110,8 +110,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const MedicationAdministration = props => {
-  const { fhirResource, fhirVersion } = props;
+const MedicationAdministration = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -130,66 +134,86 @@ const MedicationAdministration = props => {
     status,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Practitioner',
+      testId: 'practitioner',
+      data: practitioner && <Reference fhirData={practitioner} />,
+      status: practitioner,
+    },
+  ];
+
+  const tableContentData = [
+    {
+      testId: 'periodTimeStart',
+      data: periodTimeStart ? (
+        <Date fhirData={periodTimeStart} />
+      ) : (
+        <MissingValue />
+      ),
+    },
+    {
+      testId: 'periodTimeEnd',
+      data: periodTimeEnd ? (
+        <Date fhirData={periodTimeEnd} />
+      ) : (
+        <MissingValue />
+      ),
+    },
+    {
+      testId: 'dosageRoute',
+      data: dosageRoute ? <Coding fhirData={dosageRoute} /> : <MissingValue />,
+    },
+    {
+      testId: 'dosageQuantity',
+      data: dosageQuantity ? dosageQuantity : <MissingValue />,
+    },
+  ];
+
   return (
     <Root name="MedicationAdministration">
-      <Header>
-        <Title>
-          <Reference fhirData={medicationReference} />
-        </Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {subject && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {practitioner && (
-          <Value label="Practitioner" data-testid="practitioner">
-            <Reference fhirData={practitioner} />
-          </Value>
-        )}
-        <div className="overflow-auto">
-          <Table>
-            <thead>
-              <TableRow>
-                <TableHeader>Period start</TableHeader>
-                <TableHeader>Period end</TableHeader>
-                <TableHeader>Dosage route</TableHeader>
-                <TableHeader>Dosage quantity</TableHeader>
-              </TableRow>
-            </thead>
-            <tbody>
-              <TableRow>
-                <TableCell data-testid="periodTimeStart">
-                  {periodTimeStart ? (
-                    <Date fhirData={periodTimeStart} />
-                  ) : (
-                    <MissingValue />
-                  )}
-                </TableCell>
-                <TableCell data-testid="periodTimeEnd">
-                  {periodTimeEnd ? (
-                    <Date fhirData={periodTimeEnd} />
-                  ) : (
-                    <MissingValue />
-                  )}
-                </TableCell>
-                <TableCell data-testid="dosageRoute">
-                  {dosageRoute ? (
-                    <Coding fhirData={dosageRoute} />
-                  ) : (
-                    <MissingValue />
-                  )}
-                </TableCell>
-                <TableCell data-testid="dosageQuantity">
-                  {dosageQuantity ? dosageQuantity : <MissingValue />}
-                </TableCell>
-              </TableRow>
-            </tbody>
-          </Table>
-        </div>
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="MedicationAdministration"
+            title={<Reference fhirData={medicationReference} />}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            <ValueSection className="overflow-auto">
+              <Table>
+                <thead>
+                  <TableRow>
+                    <TableHeader>Period start</TableHeader>
+                    <TableHeader>Period end</TableHeader>
+                    <TableHeader>Dosage route</TableHeader>
+                    <TableHeader>Dosage quantity</TableHeader>
+                  </TableRow>
+                </thead>
+                <tbody className="border-top-0">
+                  <TableRow>
+                    {tableContentData.map((element, index) => (
+                      <TableCell key={index} data-testid={element.testId}>
+                        {element.data}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                </tbody>
+              </Table>
+            </ValueSection>
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -9,6 +9,8 @@ import r4Example1 from '../../../fixtures/r4/resources/medicationAdministration/
 import r4Example2 from '../../../fixtures/r4/resources/medicationAdministration/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medicationAdministration/example3.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationAdministrationIcon from '../../../assets/containers/MedicationAdministration/medication-administration.svg';
 
 export default {
   title: 'MedicationAdministration',
@@ -20,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationAdministration
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationAdministration/medication-administration.svg')}
     />
   );
 };
@@ -30,6 +33,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationAdministration
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={MedicationAdministrationIcon}
     />
   );
 };
@@ -40,6 +44,7 @@ export const Example1OfR4 = () => {
     <MedicationAdministration
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +55,7 @@ export const Example2OfR4 = () => {
     <MedicationAdministration
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -60,6 +66,7 @@ export const Example3OfR4 = () => {
     <MedicationAdministration
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import MedicationAdministration from './MedicationAdministration';
 import fhirVersions from '../fhirResourceVersions';
@@ -7,8 +7,89 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/medicationAdministr
 import stu3Example1 from '../../../fixtures/stu3/resources/medicationAdministration/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/medicationAdministration/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationAdministration/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationAdministration component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(
+      <MedicationAdministration {...defaultProps} />,
+    );
+    const headerIcon = getByAltText('medication administration');
+
+    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(
+      <MedicationAdministration {...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/MedicationAdministration/medication-administration.svg')}
+          alt="pill gets swallowed"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(
+      <MedicationAdministration {...defaultProps} />,
+    );
+    const headerIcon = getByAltText('pill gets swallowed');
+
+    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(
+      <MedicationAdministration {...defaultProps} />,
+    );
+    const headerIcon = getByAltText('pill gets swallowed');
+
+    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(
+      <MedicationAdministration {...defaultProps} />,
+    );
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -108,4 +189,39 @@ describe('should render MedicationAdministration component properly', () => {
     expect(getByTestId('dosageRoute').textContent).toContain('Oral Route');
     expect(getByTestId('dosageQuantity').textContent).toEqual('2 TAB');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationAdministration {...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: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationAdministration {...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/MedicationDispense/DosageInstruction.js

@@ -0,0 +1,25 @@
+import { MissingValue, TableCell, TableRow } from '../../ui';
+import CodeableConcept from '../../datatypes/CodeableConcept';
+import React from 'react';
+
+const DosageInstruction = props => {
+  const empty = <MissingValue />;
+  const {
+    timing = empty,
+    route = empty,
+    doseQuantity = empty,
+    additionalInstructions = empty,
+  } = props.item;
+  return (
+    <TableRow>
+      <TableCell data-testid="dosageTiming">{timing}</TableCell>
+      <TableCell data-testid="dosageRoute">{route}</TableCell>
+      <TableCell data-testid="dosageQuantity">{doseQuantity}</TableCell>
+      <TableCell data-testid="dosageAdditionalInstructions">
+        <CodeableConcept fhirData={additionalInstructions} />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default DosageInstruction;