fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import fhirVersions from '../fhirResourceVersions';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import CarePlan from './CarePlan';
 
@@ -9,73 +10,62 @@ import example2CarePlanSTU3 from '../../../fixtures/stu3/resources/carePlan/exam
 import weightLossCarePlanR4 from '../../../fixtures/r4/resources/carePlan/weightLossPlan.json';
 import pregnancyCarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.json';
 import heartOperationCarePlanR4 from '../../../fixtures/r4/resources/carePlan/heartOperationPlan.json';
-import fhirVersions from '../fhirResourceVersions';
+
 import CarePlanIcon from '../../../assets/containers/CarePlan/care-plan.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'CarePlan' };
+export default {
+  title: 'CarePlan',
+  component: CarePlan,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <CarePlan {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleCarePlanDSTU2);
-  return (
-    <CarePlan
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/CarePlan/care-plan.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleCarePlanDSTU2,
+  fhirIcons: require('../../../assets/containers/CarePlan/care-plan.svg'),
 };
 
-export const ExampleCarePlanSTU3 = () => {
-  const fhirResource = object('Resource', exampleCarePlanSTU3);
-  return (
-    <CarePlan
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={CarePlanIcon}
-    />
-  );
+export const ExampleCarePlanSTU3 = Template.bind({});
+ExampleCarePlanSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleCarePlanSTU3,
+  fhirIcons: CarePlanIcon,
 };
 
-export const Example2CarePlanSTU3 = () => {
-  const fhirResource = object('Resource', example2CarePlanSTU3);
-  return (
-    <CarePlan
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2CarePlanSTU3 = Template.bind({});
+Example2CarePlanSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2CarePlanSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const WeightLossCarePlanR4 = () => {
-  const fhirResource = object('Resource', weightLossCarePlanR4);
-  return (
-    <CarePlan
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const WeightLossCarePlanR4 = Template.bind({});
+WeightLossCarePlanR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: weightLossCarePlanR4,
+  fhirIcons: false,
 };
 
-export const PregnancyCarePlanR4 = () => {
-  const fhirResource = object('Resource', pregnancyCarePlanR4);
-  return (
-    <CarePlan
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const PregnancyCarePlanR4 = Template.bind({});
+PregnancyCarePlanR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: pregnancyCarePlanR4,
+  fhirIcons: 'random text',
 };
 
-export const HeartOperatioCarePlanR4 = () => {
-  const fhirResource = object('Resource', heartOperationCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const HeartOperatioCarePlanR4 = Template.bind({});
+HeartOperatioCarePlanR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: heartOperationCarePlanR4,
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', example2CarePlanSTU3);
-  return <CarePlan fhirResource={fhirResource} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: example2CarePlanSTU3,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import CarePlan from './CarePlan';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -111,8 +111,9 @@ describe('should render component correctly', () => {
     expect(getByTestId('activity').textContent).toContain('3141-9');
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('description').textContent).toContain('Manage obesity');
-    expect(getByTestId('subject').textContent).toContain('Peter James');
-    expect(getByTestId('subject').textContent).toContain('Patient/example');
+    expect(getByTestId('subject').textContent).toContain(
+      'Peter James Chalmers',
+    );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
     expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
@@ -136,8 +137,9 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('Goal/example');
     expect(getByTestId('description').textContent).toContain('Manage obesity');
-    expect(getByTestId('subject').textContent).toContain('Peter James');
-    expect(getByTestId('subject').textContent).toContain('Patient/example');
+    expect(getByTestId('subject').textContent).toContain(
+      'Peter James Chalmers',
+    );
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
     expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
@@ -160,8 +162,42 @@ describe('should render component correctly', () => {
     expect(getByTestId('intent').textContent).toEqual('plan');
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
-    expect(getByTestId('subject').textContent).toContain('Patient/1');
     expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
     expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2CarePlanR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <CarePlan {...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: example2CarePlanR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <CarePlan {...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/CareTeam/CareTeam.js

@@ -4,8 +4,7 @@ import {
   Header,
   MissingValue,
   Root,
-  Title,
-  Value,
+  ValueSection,
 } from '../../ui';
 
 import CareTeamParticipants from './CareTeamParticipants';
@@ -16,6 +15,7 @@ import React from 'react';
 import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   // Default value for title - "Care team"
@@ -83,8 +83,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CareTeam = props => {
-  const { fhirResource, fhirVersion } = props;
+const CareTeam = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     name,
     status,
@@ -98,54 +103,78 @@ const CareTeam = props => {
   } = resourceDTO(fhirVersion, fhirResource);
   const hasParticipants = participants.length > 0;
 
+  const tableData = [
+    {
+      label: 'Category',
+      testId: 'category',
+      data: category && <CodableConcept fhirData={category} isCursive />,
+      status: category,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Encounter',
+      testId: 'encounter',
+      data: encounter && <Reference fhirData={encounter} />,
+      status: encounter,
+    },
+    {
+      label: 'Managing organization',
+      testId: 'managingOrganization',
+      data: managingOrganization && (
+        <Reference fhirData={managingOrganization} />
+      ),
+      status: managingOrganization,
+    },
+    {
+      label: 'Care Period Start',
+      testId: 'periodStart',
+      data: periodStart ? (
+        <DateType fhirData={periodStart} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: periodStart,
+    },
+    {
+      label: 'Care Period End',
+      testId: 'periodEnd',
+      data: periodEnd ? (
+        <DateType fhirData={periodEnd} isBlack />
+      ) : (
+        <MissingValue />
+      ),
+      status: periodEnd,
+    },
+  ];
+
   return (
     <Root name="CareTeam">
-      <Header>
-        {name && <Title>{name}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {category && (
-          <Value label="Category" data-testid="category">
-            <CodableConcept fhirData={category} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {encounter && (
-          <Value label="Encounter" data-testid="encounter">
-            <Reference fhirData={encounter} />
-          </Value>
-        )}
-        {managingOrganization && (
-          <Value
-            label="Managing organization"
-            data-testid="managingOrganization"
-          >
-            <Reference fhirData={managingOrganization} />
-          </Value>
-        )}
-        {periodStart && (
-          <Value label="Care Period Start" data-testid="periodStart">
-            {periodStart ? (
-              <DateType fhirData={periodStart} />
-            ) : (
-              <MissingValue />
-            )}
-          </Value>
-        )}
-        {periodEnd && (
-          <Value label="Care Period End" data-testid="periodEnd">
-            {periodEnd ? <DateType fhirData={periodEnd} /> : <MissingValue />}
-          </Value>
-        )}
-        {hasParticipants && (
-          <CareTeamParticipants participants={participants} />
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'CareTeam'}
+            icon={fhirIcons}
+            title={name}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            <ValueSection>
+              {hasParticipants && (
+                <CareTeamParticipants participants={participants} />
+              )}
+            </ValueSection>
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import CareTeam from './CareTeam';
 import fhirVersions from '../fhirResourceVersions';
@@ -7,25 +7,36 @@ import example_STU3 from '../../../fixtures/stu3/resources/careTeam/example1.jso
 import example2_STU3 from '../../../fixtures/stu3/resources/careTeam/example2.json';
 import example_R4 from '../../../fixtures/r4/resources/careTeam/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import CareTeamIcon from '../../../assets/containers/CareTeam/care-team.svg';
+
 export default {
   title: 'CareTeam',
+  component: CareTeam,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example_STU3);
-  return (
-    <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
-  );
+const Template = args => <CareTeam {...args} />;
+
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example_STU3,
+  fhirIcons: CareTeamIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2_STU3);
-  return (
-    <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2_STU3,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleR4 = () => {
-  const fhirResource = object('Resource', example_R4);
-  return <CareTeam fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+export const ExampleR4 = Template.bind({});
+ExampleR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example_R4,
+  fhirIcons: false,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import CareTeam from './CareTeam';
 import fhirVersions from '../fhirResourceVersions';
@@ -8,7 +8,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/careTeam/example1.jso
 import stu3Example2 from '../../../fixtures/stu3/resources/careTeam/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/careTeam/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('should render the CareTeam component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('care team');
+
+    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(<CareTeam {...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/CareTeam/care-team.svg')}
+          alt="group of people"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -117,4 +190,39 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <CareTeam {...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,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <CareTeam {...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/CareTeam/CareTeamParticipants.js

@@ -20,7 +20,7 @@ const CareTeamParticipants = props => {
             <TableHeader>End</TableHeader>
           </TableRow>
         </thead>
-        <tbody>{allParticipants}</tbody>
+        <tbody className="border-top-0">{allParticipants}</tbody>
       </Table>
     </ValueSection>
   );

package/src/components/resources/Claim/Claim.js

@@ -298,7 +298,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Claim = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Claim = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -481,6 +487,8 @@ const Claim = ({ fhirResource, fhirVersion, fhirIcons }) => {
             {items && <Items items={items} />}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );