fhir-react 0.3.5 → 0.3.8

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { nbspRegex } from '../../../testUtils';
 import fhirVersions from '../fhirResourceVersions';
@@ -8,8 +8,79 @@ import DocumentReference from './DocumentReference';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/documentReference/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/documentReference/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render the DocumentReference component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DocumentReference/document-reference.svg')}
+          alt="document reference"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    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: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const { getByTestId } = render(
       <DocumentReference
@@ -197,4 +268,45 @@ describe('should render the DocumentReference component properly', () => {
     const urls = getAllByTestId('content.url').map(node => node.textContent);
     expect(urls).toEqual(['Binary/07a6483f-732b-461e-86b6-edb665c45510']);
   });
+
+  it('should fire custom onClick function', () => {
+    const resource = JSON.parse(JSON.stringify(r4Example1));
+    resource.content[0].attachment.url =
+      'http://example.org/xds/mhd/Binary/07a6483f-732b-461e-86b6-edb665c45510';
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <DocumentReference
+        fhirResource={resource}
+        fhirVersion={fhirVersions.R4}
+        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 resource = JSON.parse(JSON.stringify(r4Example1));
+    resource.content[0].attachment.url =
+      'http://example.org/xds/mhd/Binary/07a6483f-732b-461e-86b6-edb665c45510';
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <DocumentReference
+        fhirResource={resource}
+        fhirVersion={fhirVersions.R4}
+        onClick={onClick}
+      />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/Encounter/Encounter.js

@@ -160,7 +160,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Encounter = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -229,6 +229,7 @@ const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Encounter from './Encounter';
 import fhirVersions from '../fhirResourceVersions';
 import example1 from '../../../fixtures/dstu2/resources/encounter/example.json';
@@ -198,4 +198,39 @@ describe('should render component correctly', () => {
     );
     jest.restoreAllMocks();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2_STU3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Encounter {...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: example2_STU3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Encounter {...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/ExplanationOfBenefit/ExplanationOfBenefit.js

@@ -233,6 +233,7 @@ const ExplanationOfBenefit = ({
   fhirVersion,
   withCarinBBProfile = false,
   fhirIcons,
+  onClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -546,6 +547,7 @@ const ExplanationOfBenefit = ({
             {hasCareTeam && <CareTeam fhirData={careTeam} />}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -8,7 +8,7 @@ import exampleC4BB from '../../../fixtures/r4/resources/explanationOfBenefit/c4b
 import exampleC4BBExtendedDiagnosis from '../../../fixtures/r4/resources/explanationOfBenefit/c4bbExtendedDiagnosis.json';
 import fhirVersions from '../fhirResourceVersions';
 import { nbspRegex } from '../../../testUtils';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render ExplanationOfBenefit component properly', () => {
@@ -331,4 +331,41 @@ describe('should render ExplanationOfBenefit component properly', () => {
     expect(getByTestId('diagnosisOnAdmission').textContent).toContain('?');
     expect(queryByTestId('diagnosisPackageCode')).toBeNull();
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: exampleC4BBExtendedDiagnosis,
+      fhirVersion: fhirVersions.R4,
+      withCarinBBProfile: true,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <ExplanationOfBenefit {...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: exampleC4BBExtendedDiagnosis,
+      fhirVersion: fhirVersions.R4,
+      withCarinBBProfile: true,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <ExplanationOfBenefit {...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/FamilyMemberHistory/FamilyMemberHistory.js

@@ -70,8 +70,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const FamilyMemberHistory = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const FamilyMemberHistory = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -135,6 +139,7 @@ const FamilyMemberHistory = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -9,6 +9,7 @@ import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
 import example2STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example2.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import FamilyMemberHistoryIcon from '../../../assets/containers/FamilyMemberHistory/family-member-history.svg';
 
 export default {
   title: 'FamilyMemberHistory',
@@ -20,7 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg')}
     />
   );
 };
@@ -31,7 +32,7 @@ export const Example1OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={FamilyMemberHistoryIcon}
     />
   );
 };

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

@@ -1,12 +1,84 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import FamilyMemberHistory from './FamilyMemberHistory';
 import fhirVersions from '../fhirResourceVersions';
 
 import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory/example1.json';
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render FamilyMemberHistory component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
+          alt="family member history"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    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: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2', () => {
     const defaultProps = {
       fhirResource: example1DSTU2,
@@ -38,4 +110,39 @@ describe('should render FamilyMemberHistory component correctly', () => {
     expect(getByTestId('hasRelationship').textContent).toContain('father');
     expect(getByTestId('noteText').textContent).toContain('Was fishing at');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example1STU3,
+      fhirVersion: fhirVersions.STU3,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <FamilyMemberHistory {...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: example1STU3,
+      fhirVersion: fhirVersions.STU3,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <FamilyMemberHistory {...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/Generic/Generic.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import _get from 'lodash/get';
 
-import { Root, Header, Title, Body } from '../../ui';
+import { Root, Header } from '../../ui';
+import Accordion from '../../containers/Accordion';
 
-const Generic = props => {
-  const { fhirResource } = props;
+const Generic = ({ fhirResource, fhirIcons, onClick }) => {
   const title = fhirResource
     ? `${fhirResource.resourceType}/${fhirResource.id}`
     : `Unknown Resource`;
@@ -14,10 +14,23 @@ const Generic = props => {
 
   return (
     <Root>
-      <Header>
-        <Title>{title}</Title>
-      </Header>
-      {code && <Body>{code && <p>{code}</p>}</Body>}
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'Generic'}
+            title={title}
+            icon={fhirIcons}
+            additionalContent={
+              code && (
+                <span className="text-secondary" data-testid="code">
+                  {code}
+                </span>
+              )
+            }
+          />
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { object } from '@storybook/addon-knobs';
 
 import Generic from './Generic';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'Generic' };
 
@@ -14,5 +15,5 @@ export const DefaultVisualization = () => {
     },
   };
   const fhirResource = object('Resource', exampleResource);
-  return <Generic fhirResource={fhirResource} />;
+  return <Generic fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

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

@@ -1,8 +1,9 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Generic from './Generic';
+import fhirIcons from '../../../fixtures/example-icons';
 
-it('should render component correctly', () => {
+describe('should render the Generic component properly', () => {
   const exampleResource = {
     resourceType: 'UnknownResource',
     id: '12345',
@@ -10,10 +11,28 @@ it('should render component correctly', () => {
       text: 'Resource code text',
     },
   };
-  const { container, getByTestId } = render(
-    <Generic fhirResource={exampleResource} />,
-  );
 
-  expect(getByTestId('title').textContent).toEqual('UnknownResource/12345');
-  expect(container.textContent).toContain('Resource code text');
+  it('should render component correctly', () => {
+    const { container, getByTestId, getByAltText } = render(
+      <Generic fhirResource={exampleResource} fhirIcons={fhirIcons} />,
+    );
+    const headerIcon = getByAltText('generic');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+    expect(getByTestId('title').textContent).toEqual('UnknownResource/12345');
+    expect(container.textContent).toContain('Resource code text');
+  });
+
+  it('should fire custom onClick function', () => {
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Generic fhirResource={exampleResource} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
 });

package/src/components/resources/Goal/Goal.js

@@ -99,10 +99,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Goal = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Goal'];
-
+const Goal = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -225,11 +222,12 @@ const Goal = props => {
               )
             }
             badges={hasStatus && <Badge data-testid="status">{status}</Badge>}
-            icon={headerIcon}
+            icon={fhirIcons}
             title={title}
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -9,6 +9,7 @@ import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/goal/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/goal/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import GoalIcon from '../../../assets/containers/Goal/goal.svg';
 
 export default {
   title: 'Goal',
@@ -20,7 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Goal
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/Goal/goal.svg')}
     />
   );
 };
@@ -31,7 +32,7 @@ export const Example2OfDSTU2 = () => {
     <Goal
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={GoalIcon}
     />
   );
 };
@@ -53,7 +54,7 @@ export const Example1OfR4 = () => {
     <Goal
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -64,7 +65,7 @@ export const Example2OfR4 = () => {
     <Goal
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };