fhir-react 0.3.5 → 0.3.8

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

@@ -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,79 @@ import List from './List';
 
 import example1Dstu2 from '../../../fixtures/dstu2/resources/list/example1.json';
 import example2R4 from '../../../fixtures/r4/resources/list/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render List component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1Dstu2,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('list');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: example1Dstu2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<List {...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.DSTU2,
+      fhirResource: example1Dstu2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/List/list.svg')}
+          alt="checklist"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+
+    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.DSTU2,
+      fhirResource: example1Dstu2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('checklist');
+
+    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.DSTU2,
+      fhirResource: example1Dstu2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<List {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example1Dstu2,
@@ -92,4 +163,37 @@ describe('should render List component properly', () => {
     );
     expect(getByTestId('usdfPlanIDType').textContent).toContain('HIOS-PLAN-ID');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2R4,
+      fhirVersion: fhirVersions.R4,
+      withDaVinciPDex: true,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(<List {...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(<List {...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/Location/Location.js

@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 
-import { Root, Header, Title, Badge, Body, Value } from '../../ui';
+import { Root, Header, Badge, Body } from '../../ui';
 import Address from '../../datatypes/Address';
 import Telecom from '../../datatypes/Telecom';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Reference from '../../datatypes/Reference';
+import Accordion from '../../containers/Accordion';
 
-const Location = props => {
-  const { fhirResource } = props;
+const Location = ({ fhirResource, fhirIcons, onClick }) => {
   const name = _get(fhirResource, 'name');
   const status = _get(fhirResource, 'status');
   const description = _get(fhirResource, 'description');
@@ -19,52 +19,70 @@ const Location = props => {
   const physicalType = _get(fhirResource, 'physicalType');
   const mode = _get(fhirResource, 'mode');
   const managingOrganization = _get(fhirResource, 'managingOrganization');
+
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data: type && <CodeableConcept fhirData={type} isCursive />,
+      status: type,
+    },
+    {
+      label: 'Physical type',
+      testId: 'physicalType',
+      data: physicalType && (
+        <CodeableConcept fhirData={physicalType} isCursive />
+      ),
+      status: physicalType,
+    },
+    {
+      label: 'Location mode',
+      testId: 'mode',
+      data: mode,
+      status: mode,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description,
+      status: description,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telecom',
+      testId: 'telecom',
+      data: telecom && <Telecom fhirData={telecom} noSystemData />,
+      status: telecom,
+    },
+    {
+      label: 'Managing organization',
+      testId: 'managingOrganization',
+      data: managingOrganization && (
+        <Reference fhirData={managingOrganization} />
+      ),
+      status: managingOrganization,
+    },
+  ];
+
   return (
     <Root name="Location">
-      <Header>
-        {name && <Title>{name}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {type && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={type} />
-          </Value>
-        )}
-        {physicalType && (
-          <Value label="Physical type" data-testid="physicalType">
-            <CodeableConcept fhirData={physicalType} />
-          </Value>
-        )}
-        {mode && (
-          <Value label="Location mode" data-testid="mode">
-            {mode}
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {address && (
-          <Value label="Address" data-testid="address">
-            <Address fhirData={address} />
-          </Value>
-        )}
-        {telecom && (
-          <Value label="Telecom" data-testid="telecom">
-            <Telecom fhirData={telecom} />
-          </Value>
-        )}
-        {managingOrganization && (
-          <Value
-            label="Managing organization"
-            data-testid="managingOrganization"
-          >
-            <Reference fhirData={managingOrganization} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Location"
+            title={name}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -7,6 +7,8 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/location/example1.j
 import stu3Example1 from '../../../fixtures/stu3/resources/location/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/location/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/location/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import LocationIcon from '../../../assets/containers/Location/location.svg';
 
 export default {
   title: 'Location',
@@ -14,20 +16,25 @@ export default {
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
-  return <Location fhirResource={fhirResource} />;
+  return (
+    <Location
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Location/location.svg')}
+    />
+  );
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={LocationIcon} />;
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Location fhirResource={fhirResource} />;
+  return <Location fhirResource={fhirResource} fhirIcons={false} />;
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Location from './Location';
 
@@ -7,8 +7,81 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/location/example1.j
 import stu3Example1 from '../../../fixtures/stu3/resources/location/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/location/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/location/example2.json';
+import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Location component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Location {...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.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Location/location.svg')}
+          alt="location marker"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location marker');
+
+    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.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('location marker');
+
+    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.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Location {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -31,7 +104,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -66,7 +139,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -101,7 +174,7 @@ describe('should render Location component properly', () => {
 
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
 
-    expect(getByTestId('telecom').textContent).toContain('fax2329');
+    expect(getByTestId('telecom').textContent).toContain('2329');
 
     expect(queryByTestId('type')).toBeNull();
 
@@ -146,4 +219,33 @@ describe('should render Location component properly', () => {
       'Organization/f001',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example1 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Location {...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 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Location {...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/Medication/Medication.js

@@ -5,18 +5,17 @@ import _get from 'lodash/get';
 import {
   Root,
   Header,
-  Title,
   Badge,
   Body,
   ValueSection,
-  Value,
-  BadgeSecondary,
+  ValueSectionItem,
 } from '../../ui';
 import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import Attachment from '../../datatypes/Attachment';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   let title = _get(fhirResource, 'code.coding.0');
@@ -158,13 +157,12 @@ const Ingredient = props => {
         <Coding fhirData={itemDisplay} />
       </label>
       <Reference fhirData={reference} />
-      {hasAmount && <BadgeSecondary>{amount}</BadgeSecondary>}
+      {hasAmount && <span>, {amount}</span>}
     </div>
   );
 };
 
-const Medication = props => {
-  const { fhirResource, fhirVersion } = props;
+const Medication = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -187,54 +185,96 @@ const Medication = props => {
     status,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Manufacturer',
+      testId: 'manufacturer',
+      data: manufacturer && <Reference fhirData={manufacturer} />,
+      status: manufacturer,
+    },
+  ];
+
+  const productData = [
+    {
+      label: 'Form',
+      testId: 'product-form',
+      data:
+        productForm &&
+        productForm.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: productForm,
+    },
+    {
+      label: 'Ingredient',
+      testId: 'product-ingredient',
+      data:
+        hasProductIngredient &&
+        productIngredient.map((item, i) => (
+          <Ingredient key={`item-${i}`} {...item} />
+        )),
+      status: hasProductIngredient,
+    },
+    {
+      label: 'Package container',
+      testId: 'package-container',
+      data:
+        hasPackageCoding &&
+        packageCoding.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: hasPackageCoding,
+    },
+    {
+      label: 'Images',
+      testId: 'product-images',
+      data:
+        hasImages &&
+        images.map((item, i) => (
+          <Attachment key={`item-${i}`} fhirData={item} isImage />
+        )),
+      status: hasImages,
+    },
+  ];
+
   return (
     <Root name="Medication">
-      <Header>
-        <Title>
-          <Coding fhirData={title} />
-        </Title>
-        {isBrand && <Badge>Brand</Badge>}
-        {status && <Badge>{status}</Badge>}
-      </Header>
-      <Body>
-        {manufacturer && (
-          <Value label="Manufacturer" data-testid="manufacturer">
-            <Reference fhirData={manufacturer} />
-          </Value>
-        )}
-        {hasProduct && (
-          <ValueSection label="Product">
-            {productForm && (
-              <Value label="Form" data-testid="product-form">
-                {productForm.map((item, i) => (
-                  <Coding key={`item-${i}`} fhirData={item} />
-                ))}
-              </Value>
-            )}
-            {hasProductIngredient && (
-              <Value label="Ingredient" data-testid="product-ingredient">
-                {productIngredient.map((item, i) => (
-                  <Ingredient key={`item-${i}`} {...item} />
-                ))}
-              </Value>
-            )}
-            {hasPackageCoding && (
-              <Value label="Package container" data-testid="package-container">
-                {packageCoding.map((item, i) => (
-                  <Coding key={`item-${i}`} fhirData={item} />
-                ))}
-              </Value>
-            )}
-            {hasImages && (
-              <Value label="Images" data-testid="product-images">
-                {images.map((item, i) => (
-                  <Attachment key={`item-${i}`} fhirData={item} />
-                ))}
-              </Value>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Medication"
+            badges={
+              <>
+                {isBrand && <Badge data-testid="brand-badge">Brand</Badge>}
+                {status && <Badge data-testid="status">{status}</Badge>}
+              </>
+            }
+            title={<Coding fhirData={title} />}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasProduct && (
+              <ValueSection label="Product" marginTop={manufacturer}>
+                {productData.map(
+                  (item, index) =>
+                    item.status && (
+                      <ValueSectionItem
+                        key={`product-item-${index}`}
+                        label={item.label}
+                        data-testid={item.testId}
+                      >
+                        {item.data}
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };