fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Location from './Location';
 
@@ -7,27 +7,39 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/location/example1.j
 import stu3Example1 from '../../../fixtures/stu3/resources/location/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/location/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/location/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import LocationIcon from '../../../assets/containers/Location/location.svg';
 
 export default {
   title: 'Location',
+  component: Location,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return <Location fhirResource={fhirResource} />;
+const Template = args => <Location {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Location/location.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <Location fhirResource={fhirResource} />;
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirResource: stu3Example1,
+  fhirIcons: LocationIcon,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return <Location fhirResource={fhirResource} />;
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: r4Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return <Location fhirResource={fhirResource} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: r4Example2,
+  fhirIcons: false,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Location from './Location';
 
@@ -7,8 +7,81 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/location/example1.j
 import stu3Example1 from '../../../fixtures/stu3/resources/location/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/location/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/location/example2.json';
+import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Location component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location');
+
+    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(<Location {...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/Location/location.svg')}
+          alt="location marker"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location marker');
+
+    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(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location marker');
+
+    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(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -31,7 +104,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -66,7 +139,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -101,7 +174,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -146,4 +219,33 @@ describe('should render Location component properly', () => {
       'Organization/f001',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example1 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Location {...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 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Location {...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/Medication/Medication.js

@@ -162,7 +162,13 @@ const Ingredient = props => {
   );
 };
 
-const Medication = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Medication = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -273,6 +279,8 @@ const Medication = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Medication from './Medication';
 import fhirVersions from '../fhirResourceVersions';
@@ -16,79 +16,57 @@ import MedicationIcon from '../../../assets/containers/Medication/medication.svg
 
 export default {
   title: 'Medication',
+  component: Medication,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Medication/medication.svg')}
-    />
-  );
+const Template = args => <Medication {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Medication/medication.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={MedicationIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: MedicationIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: 'random text',
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Medication
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

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';
@@ -188,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,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const MedicationAdministration = props => {
-  const { fhirResource, fhirVersion } = props;
+const MedicationAdministration = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -130,66 +135,87 @@ 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}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };