npm - fhir-react - Versions diffs - 0.3.6 → 0.3.9 - Mend

fhir-react 0.3.6 → 0.3.9

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 (160) hide show

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

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

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

@@ -99,9 +99,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Goal = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const Goal = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -229,6 +233,8 @@ const Goal = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Goal/Goal.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 Goal from './Goal';
 import fhirVersions from '../fhirResourceVersions';
@@ -187,4 +187,35 @@ describe('should render Goal component properly', () => {
     expect(queryByTestId('priority')).toBeNull();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(<Goal {...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: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(<Goal {...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/Immunization/Immunization.js CHANGED Viewed

@@ -103,8 +103,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Immunization = props => {
-  const { fhirVersion, fhirResource, fhirIcons } = props;
+const Immunization = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     title,
     status,
@@ -241,6 +246,8 @@ const Immunization = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -4,7 +4,7 @@ import dstu2Example from '../../../fixtures/dstu2/resources/immunization/example
 import fhirVersions from '../fhirResourceVersions';
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
@@ -222,4 +222,39 @@ describe('should render Immunization component properly', () => {
     expect(queryByTestId('site')).toBeNull();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Immunization {...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(
+      <Immunization {...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/List/DrugTierDefinitionExtension.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import { getExtension } from './utils';
-import { ValueSection, Value } from '../../ui';
+import { ValueSection, ValueSectionItem } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Money from '../../datatypes/Money';
@@ -82,48 +82,92 @@ const DrugTierDefinitionExtension = props => {
     coinsuranceOption,
   } = dto(drugTierDefinitionExtension);
+  const drugData = [
+    {
+      label: 'Drug Tier ID',
+      testId: 'drugTierID',
+      data: drugTierID && <CodeableConcept fhirData={drugTierID} />,
+      status: drugTierID,
+    },
+    {
+      label: 'Mail order',
+      testId: 'mailOrder',
+      data: mailOrder ? 'yes' : 'no',
+      status: mailOrder,
+    },
+  ];
+  const costData = [
+    {
+      label: 'Pharmacy Type',
+      testId: 'pharmacyType',
+      data: pharmacyType && <CodeableConcept fhirData={pharmacyType} />,
+      status: pharmacyType,
+    },
+    {
+      label: 'Copay Amount',
+      testId: 'copayAmount',
+      data: copayAmount && <Money fhirData={copayAmount} />,
+      status: copayAmount,
+    },
+    {
+      label: 'Copay Option',
+      testId: 'copayOption',
+      data: copayOption && <CodeableConcept fhirData={copayOption} />,
+      status: copayOption,
+    },
+    {
+      label: 'Coinsurance Rate',
+      testId: 'coinsuranceRate',
+      data: coinsuranceRate,
+      status: coinsuranceRate === 0 || coinsuranceRate,
+    },
+    {
+      label: 'Coinsurance Option',
+      testId: 'coinsuranceOption',
+      data: coinsuranceOption && (
+        <CodeableConcept fhirData={coinsuranceOption} />
+      ),
+      status: coinsuranceOption,
+    },
+  ];
   return (
     hasExtensions && (
       <ValueSection
         label="Drug Tier Definition"
         data-testid="drugTierDefinition"
+        marginTop
       >
-        {drugTierID && (
-          <Value label="Drug Tier ID" data-testid="drugTierID">
-            <CodeableConcept fhirData={drugTierID} />
-          </Value>
-        )}
-        {mailOrder && (
-          <Value label="Mail order" data-testid="mailOrder">
-            {mailOrder ? 'yes' : 'no'}
-          </Value>
+        {drugData.map(
+          (item, index) =>
+            item.status && (
+              <ValueSectionItem
+                key={`drug-item-${index}`}
+                label={item.label}
+                data-testid={item.testId}
+              >
+                {item.data}
+              </ValueSectionItem>
+            ),
         )}
         {hasConstSharing && (
-          <ValueSection label="Cost sharing" data-testid="costSharing">
-            {pharmacyType && (
-              <Value label="Pharmacy Type" data-testid="pharmacyType">
-                <CodeableConcept fhirData={pharmacyType} />
-              </Value>
-            )}
-            {copayAmount && (
-              <Value label="Copay Amount" data-testid="copayAmount">
-                <Money fhirData={copayAmount} />
-              </Value>
-            )}
-            {copayOption && (
-              <Value label="Copay Option" data-testid="copayOption">
-                <CodeableConcept fhirData={copayOption} />
-              </Value>
-            )}
-            {(coinsuranceRate === 0 || coinsuranceRate) && (
-              <Value label="Coinsurance Rate" data-testid="coinsuranceRate">
-                {coinsuranceRate}
-              </Value>
-            )}
-            {coinsuranceOption && (
-              <Value label="Coinsurance Option" data-testid="coinsuranceOption">
-                <CodeableConcept fhirData={coinsuranceOption} />
-              </Value>
+          <ValueSection
+            label="Cost sharing"
+            data-testid="costSharing"
+            marginTop
+          >
+            {costData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`cost-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
             )}
           </ValueSection>
         )}

package/src/components/resources/List/Entries.js CHANGED Viewed

@@ -16,7 +16,7 @@ import Reference from '../../datatypes/Reference';
 const Entries = ({ fhirData: items = [] }) => {
   if (items.length === 0) return null;
   return (
-    <ValueSection label="Entries" data-testid="entries">
+    <ValueSection label="Entries" data-testid="entries" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -26,7 +26,7 @@ const Entries = ({ fhirData: items = [] }) => {
             <TableHeader>Status</TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {items.map((item, idx) => (
             <Entry key={idx} item={item} />
           ))}
@@ -50,7 +50,7 @@ const Entry = props => {
           <Reference fhirData={entry} />
         </TableCell>
         <TableCell data-testid="items.date">
-          {date ? <Date fhirData={date} /> : <MissingValue />}
+          {date ? <Date fhirData={date} isBlack /> : <MissingValue />}
         </TableCell>
         <TableCell data-testid="items.isDeleted">
           {deleted === true ? 'yes' : 'no'}

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

@@ -8,11 +8,10 @@ import { getExtension } from './utils';
 import {
   Root,
   Header,
-  Title,
-  Value,
   Body,
   ValueSection,
   Badge,
+  ValueSectionItem,
 } from '../../ui';
 import Date from '../../datatypes/Date';
 import Reference from '../../datatypes/Reference';
@@ -20,6 +19,7 @@ import Entries from './Entries';
 import Identifier from '../../datatypes/Identifier/Identifier';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import DrugTierDefinitionExtension from './DrugTierDefinitionExtension';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -125,8 +125,14 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
-const List = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const List = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -156,95 +162,138 @@ const List = props => {
     usdfPlanIDType,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Identifier',
+      testId: 'identifier',
+      data:
+        identifier &&
+        identifier.map((id, index) => (
+          <div key={`identifier-${index}`}>
+            <Identifier fhirData={id} />
+          </div>
+        )),
+      status: identifier,
+    },
+    {
+      label: 'Mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'code',
+      testId: 'code',
+      data: code && <CodeableConcept fhirData={code} />,
+      status: code,
+    },
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Date',
+      testId: 'date',
+      data: date && <Date fhirData={date} isBlack />,
+      status: date,
+    },
+    {
+      label: 'Source',
+      testId: 'source',
+      data: source && <Reference fhirData={source} />,
+      status: source,
+    },
+  ];
+  const extensionData = [
+    {
+      label: 'Network',
+      testId: 'usdfNetwork',
+      data: usdfNetwork,
+      status: usdfNetwork,
+    },
+    {
+      label: 'Summary URL',
+      testId: 'usdfSummaryURL',
+      data: usdfSummaryURL,
+      status: usdfSummaryURL,
+    },
+    {
+      label: 'Formulary URL',
+      testId: 'usdfFormularyURL',
+      data: usdfFormularyURL,
+      status: usdfFormularyURL,
+    },
+    {
+      label: 'Email Plan Contact',
+      testId: 'usdfEmailPlanContact',
+      data: usdfEmailPlanContact,
+      status: usdfEmailPlanContact,
+    },
+    {
+      label: 'Marketing URL',
+      testId: 'usdfMarketingURL',
+      data: usdfMarketingURL,
+      status: usdfMarketingURL,
+    },
+    {
+      label: 'Plan ID Type',
+      testId: 'usdfPlanIDType',
+      data: usdfPlanIDType,
+      status: usdfPlanIDType,
+    },
+  ];
   return (
     <Root name="List">
-      <Header>
-        <Title>
-          {title || 'List'} {id && id}{' '}
-          {status && <Badge data-testid="status">{status}</Badge>}
-        </Title>
-      </Header>
-      <Body>
-        {identifier && (
-          <Value label="Identifier" data-testid="identifier">
-            {identifier.map((id, index) => (
-              <div key={`identifier-${index}`}>
-                <Identifier fhirData={id} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {mode && (
-          <Value label="Mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {code && (
-          <Value label="code" data-testid="code">
-            <CodeableConcept fhirData={code} />
-          </Value>
-        )}
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {source && (
-          <Value label="Source" data-testid="source">
-            <Reference fhirData={source} />
-          </Value>
-        )}
-        {entry && <Entries fhirData={entry} />}
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="List"
+            title={`${title || 'List'} ${id && id} `}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {entry && <Entries fhirData={entry} />}
-        {hasExtensions && (
-          <ValueSection label="USDF extensions" data-testid="usdfExtensions">
-            {usdfDrugTierDefinition && (
-              <DrugTierDefinitionExtension
-                drugTierDefinitionExtension={usdfDrugTierDefinition}
-                data-testid="usdfDrugTierDefinition"
-              />
-            )}
-            {usdfNetwork && (
-              <Value label="Network" data-testid="usdfNetwork">
-                {usdfNetwork}
-              </Value>
-            )}
-            {usdfSummaryURL && (
-              <Value label="Summary URL" data-testid="usdfSummaryURL">
-                {usdfSummaryURL}
-              </Value>
-            )}
-            {usdfFormularyURL && (
-              <Value label="Formulary URL" data-testid="usdfFormularyURL">
-                {usdfFormularyURL}
-              </Value>
-            )}
-            {usdfEmailPlanContact && (
-              <Value
-                label="Email Plan Contact"
-                data-testid="usdfEmailPlanContact"
+            {hasExtensions && (
+              <ValueSection
+                label="USDF extensions"
+                data-testid="usdfExtensions"
+                marginTop
               >
-                {usdfEmailPlanContact}
-              </Value>
-            )}
-            {usdfMarketingURL && (
-              <Value label="Marketing URL" data-testid="usdfMarketingURL">
-                {usdfMarketingURL}
-              </Value>
-            )}
-            {usdfPlanIDType && (
-              <Value label="Plan ID Type" data-testid="usdfPlanIDType">
-                {usdfPlanIDType}
-              </Value>
+                {usdfDrugTierDefinition && (
+                  <DrugTierDefinitionExtension
+                    drugTierDefinitionExtension={usdfDrugTierDefinition}
+                    data-testid="usdfDrugTierDefinition"
+                  />
+                )}
+                <ValueSection marginTop>
+                  {extensionData.map(
+                    (item, index) =>
+                      item.status && (
+                        <ValueSectionItem
+                          key={`extension-item-${index}`}
+                          label={item.label}
+                          data-testid={item.testId}
+                        >
+                          {item.data}
+                        </ValueSectionItem>
+                      ),
+                  )}
+                </ValueSection>
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -14,32 +14,65 @@ import example1R4 from '../../../fixtures/r4/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
 import example3R4 from '../../../fixtures/r4/resources/list/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import ListIcon from '../../../assets/containers/List/list.svg';
 export default {
   title: 'List',
 };
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/List/list.svg')}
+    />
+  );
 };
 export const Example2DSTU2 = () => {
   const fhirResource = object('Resource', example2Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={ListIcon}
+    />
+  );
 };
 export const Example3DSTU2 = () => {
   const fhirResource = object('Resource', example3Dstu2);
-  return <List fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', example1Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 export const Example2STU3 = () => {
   const fhirResource = object('Resource', example2Stu3);
-  return <List fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <List
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 export const Example3STU3 = () => {
   const fhirResource = object('Resource', example3Stu3);