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

fhir-react 0.3.7 → 0.3.8

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 (138) 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,13 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
-const MedicationKnowledge = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const MedicationKnowledge = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -138,72 +143,116 @@ 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}
+      />
     </Root>
   );
 };

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

@@ -8,6 +8,8 @@ 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',
@@ -19,6 +21,7 @@ export const DefaultVisualizationR4 = () => {
     <MedicationKnowledge
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
     />
   );
 };
@@ -28,6 +31,7 @@ export const ExampleR4WithoutDaVinciPDex = () => {
     <MedicationKnowledge
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={MedicationKnowledgeIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const ExampleR4WithDaVinciPDex = () => {
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
       withDaVinciPDex
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -58,6 +63,7 @@ export const Example3R4WithDaVinciPDex = () => {
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
       withDaVinciPDex
+      fhirIcons={false}
     />
   );
 };

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 }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -66,6 +64,7 @@ const MedicationOrder = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

package/src/components/resources/MedicationRequest/MedicationRequest.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 MedicationRequest from './MedicationRequest';
@@ -87,7 +87,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -118,7 +118,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -160,7 +160,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
-    expect(getByTestId('title').textContent).toContain('#med0304');
+    expect(getByTestId('title').textContent).toContain('Myleran 2mg tablet');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Chronic myeloid Leukemia',
     );
@@ -171,4 +171,33 @@ describe('should render MedicationRequest component properly', () => {
     expect(getByTestId('created').textContent).toEqual('1/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationRequest {...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: r4Example3 };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationRequest {...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/MedicationStatement/MedicationStatement.js CHANGED Viewed

@@ -107,8 +107,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const MedicationStatement = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const MedicationStatement = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -200,6 +204,7 @@ const MedicationStatement = props => {
               })}
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

package/src/components/resources/MedicationStatement/MedicationStatement.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 MedicationStatement from './MedicationStatement';
 import fhirVersions from '../fhirResourceVersions';
 import example1MedicationStatement from '../../../fixtures/dstu2/resources/medicationStatement/example1.json';
@@ -168,4 +168,39 @@ describe('should render MedicationStatement component correctly', () => {
       '#med0309',
     );
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationStatement {...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(
+      <MedicationStatement {...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/Observation/Observation.js CHANGED Viewed

@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
-const Observation = ({ fhirResource, fhirIcons }) => {
+const Observation = ({ fhirResource, fhirIcons, onClick }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -114,6 +114,7 @@ const Observation = ({ fhirResource, fhirIcons }) => {
             />
           </Body>
         }
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -2,7 +2,7 @@
 // NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Observation from './Observation';
 import exampleObservationIssued from '../../../fixtures/dstu2/resources/observation/example-issued.json';
@@ -148,4 +148,33 @@ describe('should render component correctly', () => {
     expect(getByTestId('valueQuantityUnit')).not.toBeNull();
     expect(getByTestId('valueQuantityUnit').textContent).toEqual('mmol/l');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example1ObservationExcessR4 };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Observation {...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: example1ObservationExcessR4 };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Observation {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });