fhir-react 0.3.7 → 0.3.10

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,8 @@ const ExplanationOfBenefit = ({
   fhirVersion,
   withCarinBBProfile = false,
   fhirIcons,
+  onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -546,6 +548,8 @@ const ExplanationOfBenefit = ({
             {hasCareTeam && <CareTeam fhirData={careTeam} />}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import ExplanationOfBenefit from './ExplanationOfBenefit';
 import fhirVersions from '../fhirResourceVersions';
@@ -17,83 +17,69 @@ import ExplanationOfBenefitIcon from '../../../assets/containers/ExplanationOfBe
 
 export default {
   title: 'ExplanationOfBenefit',
+  component: ExplanationOfBenefit,
+  argTypes: {
+    ...defaultArgTypes,
+    withCarinBBProfile: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1Dstu2);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
-    />
-  );
+const Template = args => <ExplanationOfBenefit {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1Dstu2,
+  fhirIcons: require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg'),
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={ExplanationOfBenefitIcon}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1Stu3,
+  fhirIcons: ExplanationOfBenefitIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2Stu3,
+  fhirIcons: fhirIcons,
 };
-export const PersonPrimaryCoverageR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+
+export const PersonPrimaryCoverageR4 = Template.bind({});
+PersonPrimaryCoverageR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
+  fhirIcons: false,
 };
-export const EOBForClaimWithErrorsR4 = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const EOBForClaimWithErrorsR4 = Template.bind({});
+EOBForClaimWithErrorsR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: 'random text',
 };
 
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return <ExplanationOfBenefit fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example1Stu3,
 };
 
-export const EOBCarinBlueButtonExample = () => {
-  const fhirResource = object('Resource', exampleC4BB);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExample = Template.bind({});
+EOBCarinBlueButtonExample.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BB,
+  withCarinBBProfile: true,
 };
 
-export const EOBCarinBlueButtonExtendedDiagnosis = () => {
-  const fhirResource = object('Resource', exampleC4BBExtendedDiagnosis);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExtendedDiagnosis = Template.bind({});
+EOBCarinBlueButtonExtendedDiagnosis.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BBExtendedDiagnosis,
+  withCarinBBProfile: true,
 };

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

@@ -2,8 +2,6 @@ import React from 'react';
 
 import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
 
-export default { title: 'ExplanationOfBenefitGraph' };
-
 const CHART_DATA = [
   {
     id: 'a',
@@ -31,48 +29,86 @@ const CHART_DATA = [
   },
 ];
 
-export const DefaultExplanationOfBenefitGraph = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 10, bottom: 10 }}
-    />
-  );
+export default {
+  title: 'ExplanationOfBenefitGraph',
+  component: ExplanationOfBenefitGraph,
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+    margin: {
+      table: {
+        disable: true,
+      },
+    },
+    totalLabel: {
+      table: {
+        disable: true,
+      },
+    },
+    height: {
+      table: {
+        disable: true,
+      },
+    },
+    enableLinkLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    enableValueLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    pieChartProperties: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const Template = args => <ExplanationOfBenefitGraph {...args} />;
+
+export const DefaultExplanationOfBenefitGraph = Template.bind({});
+DefaultExplanationOfBenefitGraph.args = {
+  data: CHART_DATA,
+  margin: { top: 10, bottom: 10 },
 };
 
-export const ExplanationOfBenefitGraphWithCustomCenteredMetric = () => {
-  return <ExplanationOfBenefitGraph data={CHART_DATA} totalLabel="Custom" />;
+export const ExplanationOfBenefitGraphWithCustomCenteredMetric = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithCustomCenteredMetric.args = {
+  data: CHART_DATA,
+  totalLabel: 'Custom',
 };
 
-export const ExplanationOfBenefitGraphWithHeightAndMargin = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 40, bottom: 40 }}
-      height={250}
-    />
-  );
+export const ExplanationOfBenefitGraphWithHeightAndMargin = Template.bind({});
+ExplanationOfBenefitGraphWithHeightAndMargin.args = {
+  data: CHART_DATA,
+  margin: { top: 40, bottom: 40 },
+  height: 250,
 };
 
-export const ExplanationOfBenefitGraphWithLabels = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-    />
-  );
+export const ExplanationOfBenefitGraphWithLabels = Template.bind({});
+ExplanationOfBenefitGraphWithLabels.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
 };
 
-export const ExplanationOfBenefitGraphWithPieChartProperties = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-      pieChartProperties={{ startAngle: 90, cornerRadius: 15, borderWidth: 4 }}
-    />
-  );
+export const ExplanationOfBenefitGraphWithPieChartProperties = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithPieChartProperties.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
+  pieChartProperties: { startAngle: 90, cornerRadius: 15, borderWidth: 4 },
 };

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import FamilyMemberHistory from './FamilyMemberHistory';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,37 +13,31 @@ import FamilyMemberHistoryIcon from '../../../assets/containers/FamilyMemberHist
 
 export default {
   title: 'FamilyMemberHistory',
+  component: FamilyMemberHistory,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1DSTU2);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg')}
-    />
-  );
+const Template = args => <FamilyMemberHistory {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1DSTU2,
+  fhirIcons: require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg'),
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', example1STU3);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={FamilyMemberHistoryIcon}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1STU3,
+  fhirIcons: FamilyMemberHistoryIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2STU3);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2STU3,
+  fhirIcons: fhirIcons,
 };

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

@@ -1,5 +1,5 @@
 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';
 
@@ -110,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, rawOnClick }) => {
   const title = fhirResource
     ? `${fhirResource.resourceType}/${fhirResource.id}`
     : `Unknown Resource`;
@@ -14,10 +14,24 @@ 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}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,18 +1,28 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Generic from './Generic';
+import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Generic' };
+export default {
+  title: 'Generic',
+  component: Generic,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Generic {...args} />;
 
-export const DefaultVisualization = () => {
-  const exampleResource = {
-    resourceType: 'UnknownResource',
-    id: '12345',
-    code: {
-      text: 'Resource code text',
-    },
-  };
-  const fhirResource = object('Resource', exampleResource);
-  return <Generic fhirResource={fhirResource} />;
+const exampleResource = {
+  resourceType: 'UnknownResource',
+  id: '12345',
+  code: {
+    text: 'Resource code text',
+  },
+};
+export const DefaultVisualization = Template.bind({});
+DefaultVisualization.args = {
+  fhirResource: exampleResource,
+  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();
+  });
 });