fhir-react 0.3.5 → 0.3.8

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import CareTeam from './CareTeam';
 import fhirVersions from '../fhirResourceVersions';
@@ -8,7 +8,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/careTeam/example1.jso
 import stu3Example2 from '../../../fixtures/stu3/resources/careTeam/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/careTeam/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('should render the CareTeam component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('care team');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<CareTeam {...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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/CareTeam/care-team.svg')}
+          alt="group of people"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('group of people');
+
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<CareTeam {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -117,4 +190,39 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <CareTeam {...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(
+      <CareTeam {...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/CareTeam/CareTeamParticipants.js

@@ -20,7 +20,7 @@ const CareTeamParticipants = props => {
             <TableHeader>End</TableHeader>
           </TableRow>
         </thead>
-        <tbody>{allParticipants}</tbody>
+        <tbody className="border-top-0">{allParticipants}</tbody>
       </Table>
     </ValueSection>
   );

package/src/components/resources/Claim/CareTeam.js

@@ -0,0 +1,55 @@
+import {
+  MissingValue,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  ValueSection,
+} from '../../ui';
+import Reference from '../../datatypes/Reference';
+import Coding from '../../datatypes/Coding';
+import React from 'react';
+
+const CareTeam = ({ careTeam }) => {
+  return (
+    <ValueSection label="Care Team" data-testid="careTeam" marginTop>
+      <Table>
+        <thead>
+          <TableRow>
+            <TableHeader>Provider</TableHeader>
+            <TableHeader>Role</TableHeader>
+            <TableHeader>Qualification</TableHeader>
+          </TableRow>
+        </thead>
+        <tbody className="border-top-0">
+          {careTeam.map((member, idx) => (
+            <TableRow key={idx}>
+              <TableCell data-testid="careTeam.provider" className="col-md-4">
+                <Reference fhirData={member.provider} />
+              </TableCell>
+              <TableCell data-testid="careTeam.role" className="col-md-4">
+                {member.role ? (
+                  <Coding fhirData={member.role} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+              <TableCell
+                data-testid="careTeam.qualification"
+                className="col-md-4"
+              >
+                {careTeam.qualification ? (
+                  <Coding fhirData={member.qualification} />
+                ) : (
+                  <MissingValue />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </tbody>
+      </Table>
+    </ValueSection>
+  );
+};
+
+export default CareTeam;

package/src/components/resources/Claim/Claim.css

@@ -1,12 +1,3 @@
-.fhir-resource__Claim__item-level {
-  height: 100%;
-  height: 50px;
-  margin: -12px;
-  display: flex;
-}
-
-.fhir-resource__Claim__item-level-fill {
-  width: 10px;
-  height: 100%;
-  background: #dee2e6;
+.table-expandable-row {
+  --bs-table-striped-bg: #eef1f3;
 }