fhir-react 0.3.7 → 0.3.8

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

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

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

package/src/components/resources/ResearchStudy/ResearchStudy.js

@@ -13,16 +13,8 @@ import _get from 'lodash/get';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 
-import {
-  Badge,
-  BadgeSecondary,
-  Body,
-  Header,
-  MissingValue,
-  Root,
-  Title,
-  Value,
-} from '../../ui';
+import { Badge, Body, Header, MissingValue, Root, Value } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const title = _get(fhirResource, 'title', 'Research Study');
@@ -102,8 +94,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const ResearchStudy = props => {
-  const { fhirResource, fhirVersion } = props;
+const ResearchStudy = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -140,126 +131,165 @@ const ResearchStudy = props => {
   const hasComments = comments.length > 0;
   const hasArms = arms.length > 0;
 
+  const tableData = [
+    {
+      label: 'Part of another study',
+      testId: 'partOf',
+      data: partOfReference && <Reference fhirData={partOfReference} />,
+      status: partOfReference,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data: categoryCoding && <Coding fhirData={categoryCoding} />,
+      status: categoryCoding,
+    },
+    {
+      label: 'Keywords',
+      testId: 'keywords',
+      data: hasKeywords && <CodeableConcept fhirData={keywordConcepts} />,
+      status: hasKeywords,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description && <Markdown fhirData={description} />,
+      status: description,
+    },
+    {
+      label: 'Focus',
+      testId: 'focus',
+      data: focusCoding && <Coding fhirData={focusCoding} />,
+      status: focusCoding,
+    },
+    {
+      label: 'Enrollment',
+      testId: 'enrollment',
+      data:
+        hasEnrollment &&
+        enrollmentReferences.map((enrollmentReference, idx) => (
+          <div key={idx} data-testid="enrollmentReference">
+            <Reference fhirData={enrollmentReference} />
+          </div>
+        )),
+      status: hasEnrollment,
+    },
+    {
+      label: 'Protocol',
+      testId: 'protocol',
+      data: protocolReference && <Reference fhirData={protocolReference} />,
+      status: protocolReference,
+    },
+    {
+      label: 'Study paths',
+      testId: 'arms',
+      data: hasArms && (
+        <ul>
+          {arms.map((arm, idx) => (
+            <li key={idx}>
+              <div data-testid="arms.name">{arm.name}</div>
+              <Coding fhirData={arm.coding} />
+              <div data-testid="arms.description">{arm.description}</div>
+            </li>
+          ))}
+        </ul>
+      ),
+      status: hasArms,
+    },
+    {
+      label: 'Comments',
+      testId: 'comments',
+      data: hasComments && <Annotation fhirData={comments} />,
+      status: hasComments,
+    },
+    {
+      label: 'Contacts',
+      testId: 'contacts',
+      data:
+        hasContacts &&
+        contacts.map((contact, idx) => (
+          <div key={idx}>
+            <div data-testid="contactsName">{contact.name}</div>
+            <div data-testid="contactsTelecom">
+              <Telecom fhirData={contact.telecoms} />
+            </div>
+          </div>
+        )),
+      status: hasContacts,
+    },
+    {
+      label: 'Principal investigator',
+      testId: 'principalInvestigator',
+      data: principalInvestigatorReference && (
+        <Reference fhirData={principalInvestigatorReference} />
+      ),
+      status: principalInvestigatorReference,
+    },
+    {
+      label: 'Sponsor',
+      testId: 'sponsor',
+      data: sponsorReference && <Reference fhirData={sponsorReference} />,
+      status: sponsorReference,
+    },
+    {
+      label: 'Sites',
+      testId: 'sites',
+      data:
+        hasSites &&
+        siteReferences.map((siteReference, idx) => (
+          <div key={idx} data-testid="siteReference">
+            <Reference fhirData={siteReference} />
+          </div>
+        )),
+      status: hasSites,
+    },
+    {
+      label: 'Location',
+      testId: 'location',
+      data: location && <CodeableConcept fhirData={location} />,
+      status: location,
+    },
+    {
+      label: 'Primary Purpose Type',
+      testId: 'primaryPurposeType',
+      data: primaryPurposeType && (
+        <CodeableConcept fhirData={primaryPurposeType} />
+      ),
+      status: primaryPurposeType,
+    },
+  ];
+
   return (
     <Root name="ResearchStudy">
-      <Header>
-        {title && <Title data-testid="title">{title}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasPeriod && (
-          <BadgeSecondary data-testid="period">
-            {period.start ? (
-              <DateType fhirData={period.start} />
-            ) : (
-              <MissingValue />
-            )}
-            {' - '}
-            {period.end ? <DateType fhirData={period.end} /> : <MissingValue />}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {partOfReference && (
-          <Value label="Part of another study" data-testid="partOf">
-            <Reference fhirData={partOfReference} />
-          </Value>
-        )}
-        {categoryCoding && (
-          <Value label="Category" data-testid="category">
-            <Coding fhirData={categoryCoding} />
-          </Value>
-        )}
-        {hasKeywords && (
-          <Value label="Keywords" data-testid="keywords">
-            <CodeableConcept fhirData={keywordConcepts} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            <Markdown fhirData={description} />
-          </Value>
-        )}
-        {focusCoding && (
-          <Value label="Focus" data-testid="focus">
-            <Coding fhirData={focusCoding} />
-          </Value>
-        )}
-        {hasEnrollment && (
-          <Value label="Enrollment" data-testid="enrollment">
-            {enrollmentReferences.map((enrollmentReference, idx) => (
-              <div key={idx} data-testid="enrollmentReference">
-                <Reference fhirData={enrollmentReference} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {protocolReference && (
-          <Value label="Protocol" data-testid="protocol">
-            <Reference fhirData={protocolReference} />
-          </Value>
-        )}
-        {hasArms && (
-          <Value label="Study paths" data-testid="arms">
-            <ul>
-              {arms.map((arm, idx) => (
-                <li key={idx}>
-                  <div data-testid="arms.name">{arm.name}</div>
-                  <Coding fhirData={arm.coding} />
-                  <div data-testid="arms.description">{arm.description}</div>
-                </li>
-              ))}
-            </ul>
-          </Value>
-        )}
-        {hasComments && (
-          <Value label="Comments" data-testid="comments">
-            <Annotation fhirData={comments} />
-          </Value>
-        )}
-        {hasContacts && (
-          <Value label="Contacts" data-testid="contacts">
-            {contacts.map((contact, idx) => (
-              <div key={idx}>
-                <div data-testid="contactsName">{contact.name}</div>
-                <div data-testid="contactsTelecom">
-                  <Telecom fhirData={contact.telecoms} />
-                </div>
-              </div>
-            ))}
-          </Value>
-        )}
-        {principalInvestigatorReference && (
-          <Value
-            label="Principal investigator"
-            data-testid="principalInvestigator"
-          >
-            <Reference fhirData={principalInvestigatorReference} />
-          </Value>
-        )}
-        {sponsorReference && (
-          <Value label="Sponsor" data-testid="sponsor">
-            <Reference fhirData={sponsorReference} />
-          </Value>
-        )}
-        {hasSites && (
-          <Value label="Sites" data-testid="sites">
-            {siteReferences.map((siteReference, idx) => (
-              <div key={idx} data-testid="siteReference">
-                <Reference fhirData={siteReference} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {location && (
-          <Value label="Location" data-testid="location">
-            <CodeableConcept fhirData={location} />
-          </Value>
-        )}
-        {primaryPurposeType && (
-          <Value label="Primary Purpose Type" data-testid="primaryPurposeType">
-            <CodeableConcept fhirData={primaryPurposeType} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="ResearchStudy"
+            title={title}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              hasPeriod && (
+                <Value data-testid="period">
+                  {period.start ? (
+                    <DateType fhirData={period.start} isBlack />
+                  ) : (
+                    <MissingValue />
+                  )}
+                  {' - '}
+                  {period.end ? (
+                    <DateType fhirData={period.end} isBlack />
+                  ) : (
+                    <MissingValue />
+                  )}
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -6,6 +6,7 @@ import fhirVersions from '../fhirResourceVersions';
 
 import stu3Example1 from '../../../fixtures/stu3/resources/researchStudy/example-1.json';
 import r4Example1 from '../../../fixtures/r4/resources/researchStudy/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'ResearchStudy',
@@ -17,6 +18,7 @@ export const ExampleOfSTU3 = () => {
     <ResearchStudy
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import ResearchStudy from './ResearchStudy';
 import fhirVersions from '../fhirResourceVersions';
@@ -7,8 +7,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/researchStudy/example
 import r4Example1 from '../../../fixtures/r4/resources/researchStudy/example1.json';
 
 import { nbspRegex } from '../../../testUtils';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render ResearchStudy component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('research study');
+
+    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(<ResearchStudy {...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/ResearchStudy/research-study.svg')}
+          alt="finger pointing something in a book"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('finger pointing something in a book');
+
+    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(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('finger pointing something in a book');
+
+    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(<ResearchStudy {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -82,4 +154,39 @@ describe('should render ResearchStudy component properly', () => {
     const status = getByTestId('status').textContent;
     expect(status).toEqual('completed');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirVersion: fhirVersions.STU3,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <ResearchStudy {...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(
+      <ResearchStudy {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/ui/index.js

@@ -15,6 +15,8 @@ export const Header = ({
   additionalContent,
   rightAdditionalContent,
   children,
+  capitalize = false,
+  isNoIcon = false,
 }) => {
   const rightItemsClass = 'align-items-center flex-fill d-flex';
 
@@ -31,15 +33,20 @@ export const Header = ({
             } d-flex w-100 flex-column flex-sm-row`}
           >
             <div className="d-flex">
-              <div
-                className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
-              >
-                <HeaderIcon headerIcon={icon} resourceName={resourceName} />
-              </div>
+              {!isNoIcon && (
+                <div
+                  className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
+                >
+                  <HeaderIcon headerIcon={icon} resourceName={resourceName} />
+                </div>
+              )}
               <div
                 className={`fhir-ui__${resourceName}-Header__title flex-fill text-start`}
               >
-                <Title data-testid={titleTestID || 'title'}>
+                <Title
+                  data-testid={titleTestID || 'title'}
+                  capitalize={capitalize}
+                >
                   {title || ''}
                 </Title>
               </div>
@@ -77,7 +84,9 @@ export const Header = ({
 
 export const Title = props => (
   <h4
-    className="fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm"
+    className={`fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm ${
+      props.capitalize ? 'text-capitalize' : ''
+    }`}
     data-testid={props['data-testid'] || 'title'}
   >
     {props.children}
@@ -175,7 +184,9 @@ export const Data = props => (
 );
 
 export const Root = props => (
-  <div className={`fhir-resource__${props.name}`}>{props.children}</div>
+  <div className={`fhir-resource__${props.name} ${props.className}`}>
+    {props.children}
+  </div>
 );
 
 export const Table = props => (
@@ -206,7 +217,9 @@ export const TableRow = props => {
 
 export const TableCell = props => (
   <td
-    className={`align-middle border-0 ${props.className || ''}`}
+    className={`${
+      props.isAlignTop ? '' : 'align-middle'
+    } border-0 ${props.className || ''}`}
     data-testid={props['data-testid']}
     style={props.style}
   >