fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Patient from './Patient';
 
@@ -15,44 +15,52 @@ import example3PatientR4 from '../../../fixtures/r4/resources/patient/example3.j
 import PatientIcon from '../../../assets/containers/Patient/patient.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Patient' };
+export default {
+  title: 'Patient',
+  component: Patient,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Patient {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', examplePatient);
-  return (
-    <Patient
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Patient/patient.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: examplePatient,
+  fhirIcons: require('../../../assets/containers/Patient/patient.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2PatientDSTU2);
-  return <Patient fhirResource={fhirResource} fhirIcons={PatientIcon} />;
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirResource: example2PatientDSTU2,
+  fhirIcons: PatientIcon,
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', examplePatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirResource: examplePatientSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2STU3 = () => {
-  const fhirResource = object('Resource', example2PatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={false} />;
+export const Example2STU3 = Template.bind({});
+Example2STU3.args = {
+  fhirResource: example2PatientSTU3,
+  fhirIcons: false,
 };
 
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', example1PatientR4);
-  return <Patient fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirResource: example1PatientR4,
+  fhirIcons: 'random text',
 };
 
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example2PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirResource: example2PatientR4,
 };
 
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', example3PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirResource: example3PatientR4,
 };

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.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Practitioner from './Practitioner';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,66 +14,53 @@ import r4Example3 from '../../../fixtures/r4/resources/practitioner/example3.jso
 import PractitionerIcon from '../../../assets/containers/Practitioner/practitioner.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Practitioner' };
+export default {
+  title: 'Practitioner',
+  component: Practitioner,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Practitioner {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Practitioner/practitioner.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Practitioner/practitioner.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={PractitionerIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: PractitionerIcon,
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Practitioner fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import PractitionerRole from './PractitionerRole';
 import fhirVersions from '../fhirResourceVersions';
@@ -12,75 +12,62 @@ 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' };
+export default {
+  title: 'PractitionerRole',
+  component: PractitionerRole,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <PractitionerRole {...args} />;
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: require('../../../assets/containers/PractitionerRole/practitioner-role.svg'),
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: PractitionerRoleIcon,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example3);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };
 
-export const Example4OfR4 = () => {
-  const fhirResource = object('Resource', r4Example4);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example4OfR4 = Template.bind({});
+Example4OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example4,
 };

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');
+  });
 });