npm - fhir-react - Versions diffs - 0.3.7 → 0.3.8 - Mend

fhir-react 0.3.7 → 0.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/src/components/resources/Location/Location.js CHANGED Viewed

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
-import { Root, Header, Title, Badge, Body, Value } from '../../ui';
+import { Root, Header, Badge, Body } from '../../ui';
 import Address from '../../datatypes/Address';
 import Telecom from '../../datatypes/Telecom';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Reference from '../../datatypes/Reference';
+import Accordion from '../../containers/Accordion';
-const Location = props => {
-  const { fhirResource } = props;
+const Location = ({ fhirResource, fhirIcons, onClick }) => {
   const name = _get(fhirResource, 'name');
   const status = _get(fhirResource, 'status');
   const description = _get(fhirResource, 'description');
@@ -19,52 +19,70 @@ const Location = props => {
   const physicalType = _get(fhirResource, 'physicalType');
   const mode = _get(fhirResource, 'mode');
   const managingOrganization = _get(fhirResource, 'managingOrganization');
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data: type && <CodeableConcept fhirData={type} isCursive />,
+      status: type,
+    },
+    {
+      label: 'Physical type',
+      testId: 'physicalType',
+      data: physicalType && (
+        <CodeableConcept fhirData={physicalType} isCursive />
+      ),
+      status: physicalType,
+    },
+    {
+      label: 'Location mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description,
+      status: description,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telecom',
+      testId: 'telecom',
+      data: telecom && <Telecom fhirData={telecom} noSystemData />,
+      status: telecom,
+    },
+    {
+      label: 'Managing organization',
+      testId: 'managingOrganization',
+      data: managingOrganization && (
+        <Reference fhirData={managingOrganization} />
+      ),
+      status: managingOrganization,
+    },
+  ];
   return (
     <Root name="Location">
-      <Header>
-        {name && <Title>{name}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {type && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={type} />
-          </Value>
-        )}
-        {physicalType && (
-          <Value label="Physical type" data-testid="physicalType">
-            <CodeableConcept fhirData={physicalType} />
-          </Value>
-        )}
-        {mode && (
-          <Value label="Location mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {address && (
-          <Value label="Address" data-testid="address">
-            <Address fhirData={address} />
-          </Value>
-        )}
-        {telecom && (
-          <Value label="Telecom" data-testid="telecom">
-            <Telecom fhirData={telecom} />
-          </Value>
-        )}
-        {managingOrganization && (
-          <Value
-            label="Managing organization"
-            data-testid="managingOrganization"
-          >
-            <Reference fhirData={managingOrganization} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Location"
+            title={name}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -7,6 +7,8 @@ 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',
@@ -14,20 +16,25 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
-  return <Location fhirResource={fhirResource} />;
+  return (
+    <Location
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Location/location.svg')}
+    />
+  );
 };
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={LocationIcon} />;
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={false} />;
 };

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

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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'}
     />
   );
 };