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

fhir-react 0.3.5 → 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 (173) hide show

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

@@ -9,13 +9,15 @@ import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import {
   Root,
   Body,
-  Value,
   Table,
   TableRow,
   TableHeader,
   TableCell,
   MissingValue,
+  Header,
+  ValueSection,
 } from '../../ui';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const typeCoding = _get(fhirResource, 'type.coding.0');
@@ -68,8 +70,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const ReferralRequest = props => {
-  const { fhirResource, fhirVersion } = props;
+const ReferralRequest = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -87,45 +88,69 @@ const ReferralRequest = props => {
     description,
   } = fhirResourceData;
+  const tableData = [
+    {
+      testId: 'dateSent',
+      data: <Date fhirData={dateSent} isBlack />,
+      status: dateSent,
+    },
+    {
+      testId: 'subject',
+      data: <span>{subject}</span>,
+      status: subject,
+    },
+    {
+      testId: 'requester',
+      data: <span>{requester}</span>,
+      status: requester,
+    },
+    {
+      testId: 'status',
+      data: <span>{status}</span>,
+      status: status,
+    },
+  ];
   return (
     <Root name="ReferralRequest">
-      <Body>
-        {typeCoding && (
-          <Value label="Type" data-testid="typeCoding">
-            <Coding fhirData={typeCoding} />
-          </Value>
-        )}
-        <div className="overflow-auto">
-          <Table>
-            <thead>
-              <TableRow>
-                <TableHeader>Request sent</TableHeader>
-                <TableHeader>Patient</TableHeader>
-                <TableHeader>Requester</TableHeader>
-                <TableHeader>status</TableHeader>
-              </TableRow>
-            </thead>
-            <tbody>
-              <TableRow>
-                <TableCell data-testid="dateSent">
-                  {dateSent ? <Date fhirData={dateSent} /> : <MissingValue />}
-                </TableCell>
-                <TableCell data-testid="subject">
-                  {subject ? <span>{subject}</span> : <MissingValue />}
-                </TableCell>
-                <TableCell data-testid="requester">
-                  {requester ? <span>{requester}</span> : <MissingValue />}
-                </TableCell>
-                <TableCell data-testid="status">
-                  {status ? <span>{status}</span> : <MissingValue />}
-                </TableCell>
-              </TableRow>
-            </tbody>
-          </Table>
-        </div>
-        {reason && <div data-testid="reason">{reason}</div>}
-        {description && <small data-testid="description">{description}</small>}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ReferralRequest"
+            title={typeCoding && <Coding fhirData={typeCoding} />}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body>
+            <Table>
+              <thead>
+                <TableRow>
+                  <TableHeader>Request sent</TableHeader>
+                  <TableHeader>Patient</TableHeader>
+                  <TableHeader>Requester</TableHeader>
+                  <TableHeader>Status</TableHeader>
+                </TableRow>
+              </thead>
+              <tbody className="border-top-0">
+                <TableRow>
+                  {tableData.map((element, index) => (
+                    <TableCell key={index} data-testid={element.testId}>
+                      {element.status ? element.data : <MissingValue />}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              </tbody>
+            </Table>
+            {description && (
+              <ValueSection label={reason} data-testid="reason" marginTop>
+                <small className="text-secondary">{description}</small>
+              </ValueSection>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -1,12 +1,85 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import ReferralRequest from './ReferralRequest';
 import fhirVersions from '../fhirResourceVersions';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/referralRequest/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/referralRequest/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render ReferralRequest component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+    const { getByAltText } = render(<ReferralRequest {...defaultProps} />);
+    const headerIcon = getByAltText('referral request');
+    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(<ReferralRequest {...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/ReferralRequest/referral-request.svg')}
+          alt="referral request"
+        />
+      ),
+    };
+    const { getByAltText } = render(<ReferralRequest {...defaultProps} />);
+    const headerIcon = getByAltText('referral request');
+    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(<ReferralRequest {...defaultProps} />);
+    const headerIcon = getByAltText('referral 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 = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<ReferralRequest {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -18,16 +91,11 @@ describe('should render ReferralRequest component properly', () => {
     );
     expect(container).not.toBeNull();
-    expect(getByTestId('typeCoding').textContent).toContain(
-      'Referral for service',
-    );
+    expect(getByTestId('title').textContent).toContain('Referral for service');
     expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );
-    expect(getByTestId('description').textContent).toContain(
-      'In the past 2 years Beverly',
-    );
     expect(getByTestId('subject').textContent).toContain('Beverly Weaver');
     expect(getByTestId('requester').textContent).toEqual('Serena Shrink');
   });
@@ -43,17 +111,49 @@ describe('should render ReferralRequest component properly', () => {
     );
     expect(container).not.toBeNull();
-    expect(getByTestId('typeCoding').textContent).toContain(
+    expect(getByTestId('title').textContent).toContain(
       'Patient referral to specialist',
     );
     expect(getByTestId('dateSent').textContent).toContain('2/14/2014');
     expect(getByTestId('reason').textContent).toContain(
       'For consideration of Grommets',
     );
-    expect(getByTestId('description').textContent).toContain(
-      'In the past 2 years Beverly',
-    );
     expect(getByTestId('subject').textContent).toContain('Beverly Weaver');
     expect(getByTestId('requester').textContent).toEqual('Serena Shrink');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirVersion: fhirVersions.STU3,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <ReferralRequest {...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: stu3Example1,
+      fhirVersion: fhirVersions.STU3,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <ReferralRequest {...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/RelatedPerson/RelatedPerson.js ADDED Viewed

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _get from 'lodash/get';
+import Telecom from '../../datatypes/Telecom';
+import Address from '../../datatypes/Address';
+import Accordion from '../../containers/Accordion';
+import { Root, Header, MissingValue, Body } from '../../ui';
+import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import Reference from '../../datatypes/Reference';
+import fhirVersions from '../fhirResourceVersions';
+import HumanName from '../../datatypes/HumanName';
+const commonDTO = fhirResource => {
+  const patient = _get(fhirResource, 'patient');
+  const birthDate = _get(fhirResource, 'birthDate');
+  const gender = _get(fhirResource, 'gender');
+  const address = _get(fhirResource, 'address[0]');
+  const relatedPersonTelecom = _get(fhirResource, 'telecom', []).filter(
+    telecom => telecom.system === 'phone',
+  );
+  return {
+    patient,
+    birthDate,
+    gender,
+    address,
+    relatedPersonTelecom,
+  };
+};
+const dstu2DTO = fhirResource => {
+  const name = _get(fhirResource, 'name');
+  return {
+    name,
+  };
+};
+const stu3r4DTO = fhirResource => {
+  const name = _get(fhirResource, 'name')[0];
+  return {
+    name,
+  };
+};
+const resourceDTO = (fhirVersion, fhirResource) => {
+  switch (fhirVersion) {
+    case fhirVersions.DSTU2: {
+      return {
+        ...commonDTO(fhirResource),
+        ...dstu2DTO(fhirResource),
+      };
+    }
+    case fhirVersions.STU3:
+    case fhirVersions.R4: {
+      return {
+        ...commonDTO(fhirResource),
+        ...stu3r4DTO(fhirResource),
+      };
+    }
+    default:
+      throw Error('Unrecognized the fhir version property type.');
+  }
+};
+const RelatedPerson = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+  let fhirResourceData = {};
+  try {
+    fhirResourceData = resourceDTO(fhirVersion, fhirResource);
+  } catch (error) {
+    console.warn(error.message);
+    return <UnhandledResourceDataStructure resourceName="RelatedPerson" />;
+  }
+  const {
+    patient,
+    name,
+    birthDate,
+    gender,
+    address,
+    relatedPersonTelecom,
+  } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: patient && <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telephone',
+      testId: 'telephone',
+      data: !relatedPersonTelecom ? (
+        <MissingValue />
+      ) : (
+        relatedPersonTelecom.map((telecom, index) => (
+          <Telecom key={index} fhirData={telecom} />
+        ))
+      ),
+      status: relatedPersonTelecom,
+    },
+  ];
+  return (
+    <Root name="RelatedPerson">
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="RelatedPerson"
+            additionalContent={
+              (birthDate || gender) && (
+                <span className="text-gray-600">
+                  {gender && (
+                    <span data-testid="gender" className="text-capitalize">
+                      {gender || 'unknown'}
+                    </span>
+                  )}
+                  {gender && birthDate && ', '}
+                  {birthDate && (
+                    <span data-testid="birthDate">{birthDate}</span>
+                  )}
+                </span>
+              )
+            }
+            icon={fhirIcons}
+            title={<HumanName fhirData={name} isTitle />}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
+    </Root>
+  );
+};
+RelatedPerson.propTypes = {
+  fhirResource: PropTypes.shape({}).isRequired,
+};
+export default RelatedPerson;

package/src/components/resources/RelatedPerson/RelatedPerson.stories.js ADDED Viewed

@@ -0,0 +1,46 @@
+import React from 'react';
+import { object } from '@storybook/addon-knobs';
+import RelatedPerson from './RelatedPerson';
+import fhirVersions from '../fhirResourceVersions';
+import exampleDSTU2 from '../../../fixtures/dstu2/resources/relatedPerson/example1.json';
+import exampleSTU3 from '../../../fixtures/stu3/resources/relatedPerson/example1.json';
+import exampleR4 from '../../../fixtures/r4/resources/relatedPerson/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
+export default { title: 'RelatedPerson' };
+export const ExampleDSTU2 = () => {
+  const fhirResource = object('Resource', exampleDSTU2);
+  return (
+    <RelatedPerson
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
+  );
+};
+export const ExampleSTU3 = () => {
+  const fhirResource = object('Resource', exampleSTU3);
+  return (
+    <RelatedPerson
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
+  );
+};
+export const ExampleR4 = () => {
+  const fhirResource = object('Resource', exampleR4);
+  return (
+    <RelatedPerson
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
+};

package/src/components/resources/RelatedPerson/RelatedPerson.test.js ADDED Viewed

@@ -0,0 +1,156 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import RelatedPerson from './RelatedPerson';
+import fhirVersions from '../fhirResourceVersions';
+import example1 from '../../../fixtures/dstu2/resources/relatedPerson/example1.json';
+import example2 from '../../../fixtures/stu3/resources/relatedPerson/example1.json';
+import example3 from '../../../fixtures/r4/resources/relatedPerson/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
+describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+    const { getByAltText } = render(<RelatedPerson {...defaultProps} />);
+    const headerIcon = getByAltText('related person');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<RelatedPerson {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+    expect(headerIcon).toBeTruthy();
+  });
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/RelatedPerson/related-person.svg')}
+          alt="related person"
+        />
+      ),
+    };
+    const { getByAltText } = render(<RelatedPerson {...defaultProps} />);
+    const headerIcon = getByAltText('related person');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<RelatedPerson {...defaultProps} />);
+    const headerIcon = getByAltText('related person');
+    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: example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<RelatedPerson {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+  it('should render with DSTU2 source data', () => {
+    const defaultProps = {
+      fhirResource: example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+    const { getByTestId } = render(<RelatedPerson {...defaultProps} />);
+    expect(getByTestId('gender').textContent).toEqual('female');
+    expect(getByTestId('address').textContent).toEqual(
+      '43, Place du Marché Sainte CatherineParis,  75004 FRA',
+    );
+    expect(getByTestId('telephone').textContent).toEqual('+33 (237) 998327');
+  });
+  it('should render with STU3 source data', () => {
+    const defaultProps = {
+      fhirResource: example2,
+      fhirVersion: fhirVersions.STU3,
+    };
+    const { getByTestId } = render(<RelatedPerson {...defaultProps} />);
+    expect(getByTestId('gender').textContent).toEqual('female');
+    expect(getByTestId('birthDate').textContent).toEqual('1963');
+    expect(getByTestId('telephone').textContent).toEqual('+31201234567');
+  });
+  it('should render with R4 source data', () => {
+    const defaultProps = {
+      fhirResource: example3,
+      fhirVersion: fhirVersions.R4,
+    };
+    const { getByTestId } = render(<RelatedPerson {...defaultProps} />);
+    expect(getByTestId('gender').textContent).toEqual('female');
+    expect(getByTestId('birthDate').textContent).toEqual('1973-05-31');
+    expect(getByTestId('address').textContent).toEqual('2222 Home Street   ');
+    expect(getByTestId('telephone').textContent).toEqual('555-555-2003');
+  });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example3,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <RelatedPerson {...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: example3,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <RelatedPerson {...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/RelatedPerson/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import RelatedPerson from './RelatedPerson';
+export default RelatedPerson;