fhir-react 0.3.6 → 0.3.9

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Organization from './Organization';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,7 +14,80 @@ import r4Example1 from '../../../fixtures/r4/resources/organization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/organization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/organization/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('should render Organization component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    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(<Organization {...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/Organization/organization.svg')}
+          alt="organization"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    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(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('organization');
+
+    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(<Organization {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -128,4 +201,39 @@ describe('should render Organization component properly', () => {
       'No additional data',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Organization {...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: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Organization {...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/Patient/Patient.js

@@ -46,6 +46,8 @@ function Patient(props) {
     renderName,
     patientSimple,
     fhirIcons,
+    onClick,
+    rawOnClick,
   } = props;
 
   const id = getId(fhirResource);
@@ -146,6 +148,8 @@ function Patient(props) {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Patient from './Patient';
 
 import examplePatient from '../../../fixtures/dstu2/resources/patient/example.json';
@@ -38,7 +38,7 @@ describe('should render component correctly', () => {
       fhirResource: examplePatient,
       fhirIcons: (
         <img
-          src={require('../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg.svg')}
+          src={require('../assets/containers/Patient/patient.svg')}
           alt="patient"
         />
       ),
@@ -156,4 +156,33 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<Patient {...defaultProps} />);
     expect(getByTestId('deceasedInfo').textContent).toEqual('2/14/2015');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example3PatientR4 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Patient {...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: example3PatientR4 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Patient {...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/Practitioner/Practitioner.js

@@ -82,7 +82,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Practitioner = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Practitioner = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -160,6 +166,8 @@ const Practitioner = ({ fhirResource, fhirVersion, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Practitioner from './Practitioner';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -170,4 +170,39 @@ describe('Practitioner should render component correctly', () => {
     );
     jest.restoreAllMocks();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Practitioner {...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 = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Practitioner {...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/PractitionerRole/PractitionerRole.js

@@ -5,8 +5,9 @@ import _get from 'lodash/get';
 import Reference from '../../datatypes/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import { Root, Header, Title, Body, Value, Badge } from '../../ui';
+import { Root, Header, Body, Badge } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'active') === true ? 'active' : '';
@@ -42,8 +43,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const PractitionerRole = props => {
-  const { fhirResource, fhirVersion } = props;
+const PractitionerRole = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -58,34 +64,51 @@ const PractitionerRole = props => {
     organization,
     practitioner,
   } = fhirResourceData;
+
+  const tableData = [
+    {
+      label: 'Practitioner',
+      testId: 'practitioner',
+      data: practitioner && <Reference fhirData={practitioner} />,
+      status: practitioner,
+    },
+    {
+      label: 'Organization',
+      testId: 'organization',
+      data: organization && <Reference fhirData={organization} />,
+      status: organization,
+    },
+    {
+      label: 'Specialties',
+      testId: 'specialties',
+      data: specialties.length > 0 && (
+        <CodeableConcept fhirData={specialties} isCursive />
+      ),
+      status: specialties.length > 0,
+    },
+    {
+      label: 'Roles',
+      testId: 'roles',
+      data: codes.length > 0 && <CodeableConcept fhirData={codes} isCursive />,
+      status: codes.length > 0,
+    },
+  ];
+
   return (
     <Root name="PractitionerRole">
-      <Header>
-        <Title>Practitioner roles and specialties</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {practitioner && (
-          <Value label="Practitioner" data-testid="practitioner">
-            <Reference fhirData={practitioner} />
-          </Value>
-        )}
-        {organization && (
-          <Value label="Organization" data-testid="organization">
-            <Reference fhirData={organization} />
-          </Value>
-        )}
-        {specialties.length > 0 && (
-          <Value label="Specialties" data-testid="specialties">
-            <CodeableConcept fhirData={specialties} />
-          </Value>
-        )}
-        {codes.length > 0 && (
-          <Value label="Roles" data-testid="roles">
-            <CodeableConcept fhirData={codes} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="PractitionerRole"
+            title="Practitioner roles and specialties"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -12,6 +12,8 @@ import r4Example1 from '../../../fixtures/r4/resources/practitionerRole/example1
 import r4Example2 from '../../../fixtures/r4/resources/practitionerRole/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/practitionerRole/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/practitionerRole/example4.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import PractitionerRoleIcon from '../../../assets/containers/PractitionerRole/practitioner-role.svg';
 
 export default { title: 'PractitionerRole' };
 
@@ -21,6 +23,7 @@ export const ExampleOfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/PractitionerRole/practitioner-role.svg')}
     />
   );
 };
@@ -31,6 +34,7 @@ export const Example2OfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={PractitionerRoleIcon}
     />
   );
 };
@@ -41,6 +45,7 @@ export const Example3OfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -61,6 +66,7 @@ export const Example2OfR4 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -71,6 +77,7 @@ export const Example3OfR4 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,13 +1,85 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import PractitionerRole from './PractitionerRole';
 import fhirVersions from '../fhirResourceVersions';
 
 import stu3Example1 from '../../../fixtures/stu3/resources/practitionerRole/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/practitionerRole/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/practitionerRole/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('PractitionerRole should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<PractitionerRole {...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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/PractitionerRole/practitioner-role.svg')}
+          alt="practitioner role"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render component correctly with STU3 source data', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.STU3,
@@ -100,4 +172,39 @@ describe('PractitionerRole should render component correctly', () => {
     );
     jest.restoreAllMocks();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <PractitionerRole {...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 = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <PractitionerRole {...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/Procedure/Procedure.js

@@ -14,8 +14,7 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
 
-const Procedure = props => {
-  const { fhirResource, fhirIcons } = props;
+const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -125,6 +124,8 @@ const Procedure = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -3,7 +3,7 @@ import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
@@ -168,4 +168,33 @@ describe('Procedure should render component correctly', () => {
       'Eerste neo-adjuvante',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Procedure {...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: r4Example3 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Procedure {...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/Questionnaire/Group.js

@@ -0,0 +1,53 @@
+import _get from 'lodash/get';
+import { MissingValue } from '../../ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Questions from './Questions';
+import { getQuestionText } from './getQuestionText';
+
+const Group = ({ data, prepareItems, isChild = false }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+
+  return data.map(prepareItems).map((item, i) => {
+    const text = getQuestionText(item);
+    let nestedItems = _get(item, 'item', []);
+    nestedItems = nestedItems.map(prepareItems);
+    const isGroup = _get(item, 'isGroup');
+    return (
+      <ul
+        key={`questionnaire-item-${i}`}
+        className="fhir-resource__Questionnaire-list"
+      >
+        <li
+          className={
+            isChild
+              ? 'fhir-resource__Questionnaire-list-title-question'
+              : 'fhir-resource__Questionnaire-list-title'
+          }
+          data-testid={`linkId-${item.linkId}`}
+        >
+          {text ? text : <MissingValue />}
+        </li>
+        {!isGroup && (
+          <li>
+            <Questions questions={nestedItems} prepareItems={prepareItems} />
+          </li>
+        )}
+        {isGroup && (
+          <li>
+            <Group data={nestedItems} prepareItems={prepareItems} isChild />
+          </li>
+        )}
+      </ul>
+    );
+  });
+};
+
+Group.propTypes = {
+  data: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Group;