npm - fhir-react - Versions diffs - 0.3.7 → 0.3.10 - Mend

fhir-react 0.3.7 → 0.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/src/components/resources/MedicationKnowledge/MedicationKnowledge.js CHANGED Viewed

@@ -8,14 +8,14 @@ import { getExtension, isBoolean } from './utils';
 import {
   Root,
   Header,
-  Title,
-  Value,
   Body,
   Badge,
   ValueSection,
+  ValueSectionItem,
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -103,8 +103,14 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
-const MedicationKnowledge = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const MedicationKnowledge = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -138,72 +144,117 @@ const MedicationKnowledge = props => {
       : amountDisplay;
   }
+  const tableData = [
+    {
+      label: 'Code',
+      testId: 'code',
+      data: code && <CodeableConcept fhirData={code} isCursive />,
+      status: code,
+    },
+    {
+      label: 'Manufacturer',
+      testId: 'manufacturer',
+      data: manufacturer && <Reference fhirData={manufacturer} />,
+      status: manufacturer,
+    },
+    {
+      label: 'Amount',
+      testId: 'amount',
+      data: amountDisplay,
+      status: amountDisplay,
+    },
+    {
+      label: 'Synonym',
+      testId: 'synonym',
+      data: synonym,
+      status: synonym,
+    },
+  ];
+  const usdfExtensionsData = [
+    {
+      label: 'Prior Authorization',
+      testId: 'usdfPriorAuthorization',
+      data:
+        isBoolean(usdfPriorAuthorization) && usdfPriorAuthorization === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfPriorAuthorization),
+    },
+    {
+      label: 'Step Therapy Limit',
+      testId: 'usdfStepTherapyLimit',
+      data:
+        isBoolean(usdfStepTherapyLimit) && usdfStepTherapyLimit === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfStepTherapyLimit),
+    },
+    {
+      label: 'Quantity Limit',
+      testId: 'usdfQuantityLimit',
+      data:
+        isBoolean(usdfQuantityLimit) && usdfQuantityLimit === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfQuantityLimit),
+    },
+    {
+      label: 'Plan ID',
+      testId: 'usdfPlanID',
+      data: usdfPlanID,
+      status: usdfPlanID,
+    },
+    {
+      label: 'Drug Tier ID',
+      testId: 'usdfDrugTierID',
+      data: usdfDrugTierID && <CodeableConcept fhirData={usdfDrugTierID} />,
+      status: usdfDrugTierID,
+    },
+  ];
   return (
     <Root name="MedicationKnowledge">
-      <Header>
-        <Title>
-          {id ? `Medication knowledge ID: ${id}` : 'MedicationOrder knowledge'}{' '}
-          {status && <Badge data-testid="status">{status}</Badge>}
-        </Title>
-      </Header>
-      <Body>
-        {code && (
-          <Value label="Code" data-testid="code">
-            <CodeableConcept fhirData={code} />
-          </Value>
-        )}
-        {manufacturer && (
-          <Value label="Manufacturer" data-testid="manufacturer">
-            <Reference fhirData={manufacturer} />
-          </Value>
-        )}
-        {amountDisplay && (
-          <Value label="Amount" data-testid="amount">
-            {amountDisplay}
-          </Value>
-        )}
-        {synonym && (
-          <Value label="Synonym" data-testid="synonym">
-            {synonym}
-          </Value>
-        )}
-        {hasExtensions && (
-          <ValueSection label="USDF extensions" data-testid="usdfExtensions">
-            {isBoolean(usdfPriorAuthorization) && (
-              <Value
-                label="Prior Authorization"
-                data-testid="usdfPriorAuthorization"
-              >
-                {usdfPriorAuthorization === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {isBoolean(usdfStepTherapyLimit) && (
-              <Value
-                label="Step Therapy Limit"
-                data-testid="usdfStepTherapyLimit"
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="MedicationKnowledge"
+            title={
+              id
+                ? `Medication knowledge ID: ${id} `
+                : 'MedicationOrder knowledge '
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasExtensions && (
+              <ValueSection
+                label="USDF extensions"
+                data-testid="usdfExtensions"
+                marginTop
               >
-                {usdfStepTherapyLimit === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {isBoolean(usdfQuantityLimit) && (
-              <Value label="Quantity Limit" data-testid="usdfQuantityLimit">
-                {usdfQuantityLimit === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {usdfPlanID && (
-              <Value label="Plan ID" data-testid="usdfPlanID">
-                {usdfPlanID}
-              </Value>
-            )}
-            {usdfDrugTierID && (
-              <Value label="Drug Tier ID" data-testid="usdfDrugTierID">
-                <CodeableConcept fhirData={usdfDrugTierID} />
-              </Value>
+                {usdfExtensionsData.map(
+                  (item, index) =>
+                    item.status && (
+                      <ValueSectionItem
+                        key={`usdf-extension-item-${index}`}
+                        label={item.label}
+                        data-testid={item.testId}
+                      >
+                        {item.data}
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

package/src/components/resources/MedicationKnowledge/MedicationKnowledge.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import MedicationKnowledge from './MedicationKnowledge';
 import fhirVersions from '../fhirResourceVersions';
@@ -8,71 +8,68 @@ import example1R4 from '../../../fixtures/r4/resources/medicationKnowledge/examp
 import example2R4 from '../../../fixtures/r4/resources/medicationKnowledge/example2.json';
 import example3R4 from '../../../fixtures/r4/resources/medicationKnowledge/example3.json';
 import example4R4 from '../../../fixtures/r4/resources/medicationKnowledge/example4.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationKnowledgeIcon from '../../../assets/containers/MedicationKnowledge/medication-knowledge.svg';
 export default {
   title: 'MedicationKnowledge',
+  component: MedicationKnowledge,
+  argTypes: {
+    ...defaultArgTypes,
+    withDaVinciPDex: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
-export const DefaultVisualizationR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+const Template = args => <MedicationKnowledge {...args} />;
+export const DefaultVisualizationR4 = Template.bind({});
+DefaultVisualizationR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
+  fhirIcons: require('../../../assets/containers/MedicationKnowledge/medication-knowledge.svg'),
 };
-export const ExampleR4WithoutDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleR4WithoutDaVinciPDex = Template.bind({});
+ExampleR4WithoutDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: MedicationKnowledgeIcon,
 };
-export const ExampleR4WithDaVinciPDex = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withDaVinciPDex
-    />
-  );
+export const ExampleR4WithDaVinciPDex = Template.bind({});
+ExampleR4WithDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: fhirIcons,
+  withDaVinciPDex: true,
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example3R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3R4,
+  fhirIcons: false,
 };
-export const Example3R4WithDaVinciPDex = () => {
-  const fhirResource = object('Resource', example4R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withDaVinciPDex
-    />
-  );
+export const Example3R4WithDaVinciPDex = Template.bind({});
+Example3R4WithDaVinciPDex.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example4R4,
+  fhirIcons: 'random text',
+  withDaVinciPDex: true,
 };
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example3R4);
-  return <MedicationKnowledge fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example3R4,
 };
-export const ExampleWithUnsupportedFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example4R4);
-  return (
-    <MedicationKnowledge
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleWithUnsupportedFHIRVersionProperty = Template.bind({});
+ExampleWithUnsupportedFHIRVersionProperty.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example4R4,
 };

package/src/components/resources/MedicationKnowledge/MedicationKnowledge.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { fhirVersions } from '../../../index';
@@ -7,8 +7,80 @@ import MedicationKnowledge from './MedicationKnowledge';
 import example1R4 from '../../../fixtures/r4/resources/medicationKnowledge/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/medicationKnowledge/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render MedicationKnowledge component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: example1R4,
+    };
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('medication knowledge');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: example1R4,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<MedicationKnowledge {...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.R4,
+      fhirResource: example1R4,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
+          alt="pill database"
+        />
+      ),
+    };
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('pill database');
+    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.R4,
+      fhirResource: example1R4,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('pill database');
+    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.R4,
+      fhirResource: example1R4,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<MedicationKnowledge {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with R4 source data', () => {
     const defaultProps = {
       fhirResource: example1R4,
@@ -66,4 +138,41 @@ describe('should render MedicationKnowledge component properly', () => {
       '(preferred-generic)',
     );
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationKnowledge {...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: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationKnowledge {...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/MedicationOrder/MedicationOrder.js CHANGED Viewed

@@ -8,9 +8,7 @@ import Coding from '../../datatypes/Coding';
 import { Root, Header, Body } from '../../ui';
-const MedicationOrder = props => {
-  const { fhirResource, fhirIcons } = props;
+const MedicationOrder = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -66,6 +64,8 @@ const MedicationOrder = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/MedicationOrder/MedicationOrder.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import MedicationOrder from './MedicationOrder';
@@ -7,9 +7,16 @@ import dstu2Example from '../../../fixtures/dstu2/resources/medicationOrder/exam
 export default {
   title: 'MedicationOrder',
+  component: MedicationOrder,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example);
-  return <MedicationOrder fhirResource={fhirResource} />;
+const Template = args => <MedicationOrder {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: dstu2Example,
+  fhirIcons: require('../../../assets/containers/MedicationOrder/medication-order.svg'),
 };

package/src/components/resources/MedicationOrder/MedicationOrder.test.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import MedicationOrder from './MedicationOrder';
@@ -80,12 +80,43 @@ describe('should render MedicationOrder component properly', () => {
     const { getByTestId } = render(<MedicationOrder {...defaultProps} />);
-    expect(getByTestId('title').textContent).toContain(
-      'Medication/MedicationExample2',
-    );
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain('Otitis Media');
     expect(getByTestId('hasDosageInstruction').textContent).toContain(
       'Take 5ml three times daily',
     );
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationOrder {...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: example,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationOrder {...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/MedicationRequest/MedicationRequest.js CHANGED Viewed

@@ -9,7 +9,12 @@ import Date from '../../datatypes/Date';
 import { Root, Header, Body } from '../../ui';
-const MedicationRequest = ({ fhirResource, fhirIcons }) => {
+const MedicationRequest = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -87,6 +92,8 @@ const MedicationRequest = ({ fhirResource, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/MedicationRequest/MedicationRequest.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import MedicationRequest from './MedicationRequest';
@@ -13,43 +13,40 @@ import MedicationRequestIcon from '../../../assets/containers/MedicationRequest/
 export default {
   title: 'MedicationRequest',
+  component: MedicationRequest,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationRequest
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
-    />
-  );
+const Template = args => <MedicationRequest {...args} />;
+export const DefaultVisualizationSTU3 = Template.bind({});
+DefaultVisualizationSTU3.args = {
+  fhirResource: stu3Example1,
+  fhirIcons: require('../../../assets/containers/MedicationRequest/medication-request.svg'),
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <MedicationRequest
-      fhirResource={fhirResource}
-      fhirIcons={MedicationRequestIcon}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: stu3Example2,
+  fhirIcons: MedicationRequestIcon,
 };
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', R4Example1);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: R4Example1,
+  fhirIcons: fhirIcons,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', R4Example2);
-  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: R4Example2,
+  fhirIcons: false,
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', R4Example3);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: R4Example3,
+  fhirIcons: 'random text',
 };