fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationAdministration from './MedicationAdministration';
 
@@ -9,57 +9,50 @@ 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',
+  component: MedicationAdministration,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <MedicationAdministration
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+const Template = args => <MedicationAdministration {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/MedicationAdministration/medication-administration.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationAdministration
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: MedicationAdministrationIcon,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <MedicationAdministration
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <MedicationAdministration
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: false,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <MedicationAdministration
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
+  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;

package/src/components/resources/MedicationDispense/MedicationDispense.js

@@ -9,37 +9,14 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Body,
-  Value,
   ValueSection,
   Table,
   TableHeader,
-  TableCell,
   TableRow,
-  MissingValue,
 } from '../../ui';
-import CodeableConcept from '../../datatypes/CodeableConcept/CodeableConcept';
-
-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>
-  );
-};
+import Accordion from '../../containers/Accordion';
+import DosageInstruction from './DosageInstruction';
 
 const commonDTO = fhirResource => {
   const typeCoding = _get(fhirResource, 'type.coding.0');
@@ -182,8 +159,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const MedicationDispense = props => {
-  const { fhirResource, fhirVersion } = props;
+const MedicationDispense = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -201,49 +183,69 @@ const MedicationDispense = props => {
     whenPrepared,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medicationCoding',
+      data: medicationCoding && <Coding fhirData={medicationCoding} />,
+      status: medicationCoding,
+    },
+    {
+      label: 'Prepared',
+      testId: 'whenPrepared',
+      data: whenPrepared && <Date fhirData={whenPrepared} isBlack />,
+      status: whenPrepared,
+    },
+    {
+      label: 'Type',
+      testId: 'typeCoding',
+      data: typeCoding && <Coding fhirData={typeCoding} />,
+      status: typeCoding,
+    },
+  ];
+
   return (
     <Root name="MedicationDispense">
-      {medicationTitle && (
-        <Header>
-          <Title>{medicationTitle}</Title>
-        </Header>
-      )}
-      <Body>
-        {medicationCoding && (
-          <Value label="Medication" data-testid="medicationCoding">
-            <Coding fhirData={medicationCoding} />
-          </Value>
-        )}
-        {whenPrepared && (
-          <Value label="Prepared" data-testid="whenPrepared">
-            <Date fhirData={whenPrepared} />
-          </Value>
-        )}
-        {typeCoding && (
-          <Value label="Type" data-testid="typeCoding">
-            <Coding fhirData={typeCoding} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <ValueSection label="Dosage instruction">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableHeader>Timing</TableHeader>
-                  <TableHeader>Route</TableHeader>
-                  <TableHeader>Dose quantity</TableHeader>
-                  <TableHeader>Additional instructions</TableHeader>
-                </TableRow>
-              </thead>
-              <tbody data-testid="hasDosageInstruction">
-                {dosageInstructionData.map((item, i) => (
-                  <DosageInstruction key={`item-${i}`} item={item} />
-                ))}
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="MedicationDispense"
+            title={medicationTitle}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasDosageInstruction && (
+              <ValueSection
+                label="Dosage instruction"
+                marginTop={medicationCoding || whenPrepared || typeCoding}
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Timing</TableHeader>
+                      <TableHeader>Route</TableHeader>
+                      <TableHeader>Dose quantity</TableHeader>
+                      <TableHeader>Additional instructions</TableHeader>
+                    </TableRow>
+                  </thead>
+                  <tbody
+                    data-testid="hasDosageInstruction"
+                    className="border-top-0"
+                  >
+                    {dosageInstructionData.map((item, i) => (
+                      <DosageInstruction key={`item-${i}`} item={item} />
+                    ))}
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationDispense from './MedicationDispense';
 import fhirVersions from '../fhirResourceVersions';
@@ -10,72 +10,61 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medicationDispense/ex
 import stu3Example2 from '../../../fixtures/stu3/resources/medicationDispense/example2.json';
 import R4Example1 from '../../../fixtures/r4/resources/medicationDispense/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationDispense/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationDispenseIcon from '../../../assets/containers/MedicationDispense/medication-dispense.svg';
 
 export default {
   title: 'MedicationDispense',
+  component: MedicationDispense,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+const Template = args => <MedicationDispense {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/MedicationDispense/medication-dispense.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: MedicationDispenseIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', R4Example1);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: R4Example1,
+  fhirIcons: 'random text',
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', R4Example2);
-  return (
-    <MedicationDispense
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: R4Example2,
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <MedicationDispense fhirResource={fhirResource} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: stu3Example1,
 };

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

@@ -1,13 +1,85 @@
 import React from 'react';
-import { render, within } from '@testing-library/react';
+import { fireEvent, render, within } from '@testing-library/react';
 import MedicationDispense from './MedicationDispense';
 import fhirVersions from '../fhirResourceVersions';
 
 import dstu2Example1 from '../../../fixtures/dstu2/resources/medicationDispense/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/medicationDispense/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationDispense/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 = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+
+    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(<MedicationDispense {...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/MedicationDispense/medication-dispense.svg')}
+          alt="medication dispense"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+
+    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(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+
+    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(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -84,4 +156,39 @@ describe('should render Device component properly', () => {
         ),
     ).toEqual(['Ordered(ordered)', 'Ordered(ordered)', 'Ordered(ordered)']);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: R4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationDispense {...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(
+      <MedicationDispense {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });