fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Questionnaire from './Questionnaire';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,7 +13,151 @@ import stu3Example2 from '../../../fixtures/stu3/resources/questionnaire/example
 import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('Questionnaire should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    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(<Questionnaire {...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/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    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(<Questionnaire {...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/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    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(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -34,16 +178,16 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toEqual(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -90,21 +234,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -151,21 +295,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -196,4 +340,39 @@ describe('Questionnaire should render component correctly', () => {
       String(getByTestId('linkId-1.1.1.1.1').textContent).trim(),
     ).toContain('Angina Pectoris');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Questionnaire {...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(
+      <Questionnaire {...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/Questionnaire/Questions.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+import { getQuestionText } from './getQuestionText';
+
+const Questions = ({ questions, prepareItems }) => {
+  if (!Array.isArray(questions) || questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="fhir-resource__Questionnaire-questions-list">
+      {questions.map((item, i) => {
+        const text = getQuestionText(item);
+        return (
+          text && (
+            <li
+              key={`questionnaire-questions-item-${i}`}
+              data-testid={`linkId-${item.linkId}`}
+            >
+              <div className="fhir-resource__Questionnaire-questions-list-element">
+                {text}
+              </div>
+              {item.item && item.item.length > 0 && (
+                <Group data={item.item} prepareItems={prepareItems} isChild />
+              )}
+            </li>
+          )
+        );
+      })}
+    </ul>
+  );
+};
+
+Questions.propTypes = {
+  questions: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Questions;

package/src/components/resources/Questionnaire/getQuestionText.js

@@ -0,0 +1,20 @@
+import _get from 'lodash/get';
+import Coding from '../../datatypes/Coding';
+import React from 'react';
+
+export const getQuestionText = item => {
+  let text = _get(item, 'text');
+  if (!text) {
+    // DSTU2
+    const groupConcept = _get(item, 'concept.0');
+    if (groupConcept) {
+      text = <Coding fhirData={groupConcept} />;
+    }
+    // STU3 & R4
+    const groupCode = _get(item, 'code.0');
+    if (!text && groupCode) {
+      text = <Coding fhirData={groupCode} />;
+    }
+  }
+  return text;
+};

package/src/components/resources/QuestionnaireResponse/Answers.js

@@ -0,0 +1,59 @@
+import Date from '../../datatypes/Date';
+import Coding from '../../datatypes/Coding';
+import Attachment from '../../datatypes/Attachment';
+import Quantity from '../../datatypes/Quantity';
+import _get from 'lodash/get';
+import React from 'react';
+import Group from './Group';
+
+const answerTypes = {
+  valueString: value => value,
+  valueDecimal: value => value,
+  valueInteger: value => value,
+  valueDate: value => <Date fhirData={value} isBlack />,
+  valueDateTime: value => <Date fhirData={value} isBlack />,
+  valueCoding: value => <Coding fhirData={value} />,
+  valueAttachment: value => <Attachment fhirData={value} />,
+  valueQuantity: value => <Quantity fhirData={value} />,
+  valueBoolean: value => (value ? 'Yes' : 'No'),
+};
+
+const Answers = props => {
+  const { data, prepareItems } = props;
+  if (!Array.isArray(data)) {
+    return null;
+  }
+  return (
+    <div className="fhir-resource__QuestionnaireResponse-questions-list-item-details">
+      {data.map(answer => {
+        return Object.keys(answer).map((answerKey, i) => {
+          const toRender = [];
+          if (typeof answerTypes[answerKey] === 'function') {
+            toRender.push(
+              <div
+                key={`questionnaire-response-answer-item-${i}`}
+                className="fhir-resource__QuestionnaireResponse-questions-list-item-details-el"
+                data-testid={`${props['data-testid']}-${i}`}
+              >
+                {answerTypes[answerKey](answer[answerKey])}{' '}
+              </div>,
+            );
+          }
+          if (_get(answer, 'item')) {
+            toRender.push(
+              <Group
+                key={`questionnaire-response-answer-group-item-${i}`}
+                data={answer.item}
+                prepareItems={prepareItems}
+                isChild
+              />,
+            );
+          }
+          return toRender;
+        });
+      })}
+    </div>
+  );
+};
+
+export default Answers;

package/src/components/resources/QuestionnaireResponse/Group.js

@@ -0,0 +1,70 @@
+import _get from 'lodash/get';
+import { MissingValue } from '../../ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Answers from './Answers';
+import Questions from './Questions';
+
+const Group = ({ data, prepareItems, isChild = false }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+
+  return data.map(prepareItems).map((item, i) => {
+    const title =
+      _get(item, 'title') ||
+      _get(item, 'text') ||
+      _get(item, '_linkId.fhir_comments.0');
+
+    return (
+      <ul
+        key={`questionnaire-response-item-${i}`}
+        className="fhir-resource__QuestionnaireResponse-list"
+      >
+        <li
+          className={
+            isChild
+              ? 'fhir-resource__QuestionnaireResponse-list-title-question'
+              : 'fhir-resource__QuestionnaireResponse-list-title'
+          }
+          data-testid={`linkId-${item.linkId}`}
+        >
+          {title || <MissingValue />}
+        </li>
+        {item.isGroup && (
+          <li>
+            <Group data={item.group} prepareItems={prepareItems} isChild />
+          </li>
+        )}
+        {!item.isGroup && (
+          <>
+            {item.question && (
+              <li>
+                <Questions
+                  questions={item.question}
+                  prepareItems={prepareItems}
+                />
+              </li>
+            )}
+            {item.answer && (
+              <li>
+                <Answers
+                  data={item.answer}
+                  prepareItems={prepareItems}
+                  data-testid={`answer-${item.linkId}`}
+                />
+              </li>
+            )}
+          </>
+        )}
+      </ul>
+    );
+  });
+};
+
+Group.propTypes = {
+  data: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Group;

package/src/components/resources/QuestionnaireResponse/Items.js

@@ -0,0 +1,45 @@
+import fhirVersions from '../fhirResourceVersions';
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+
+const Items = ({ fhirVersion, data }) => {
+  if (fhirVersion === fhirVersions.DSTU2) {
+    const prepareItems = item => {
+      return {
+        ...item,
+        isGroup: !!_get(item, 'group'),
+      };
+    };
+
+    if (data.isGroup) {
+      return <Group data={data.data} prepareItems={prepareItems} />;
+    }
+    return (
+      <Group data={[{ question: data.data }]} prepareItems={prepareItems} />
+    );
+  }
+
+  if (fhirVersion === fhirVersions.STU3 || fhirVersion === fhirVersions.R4) {
+    const prepareItems = item => ({
+      ...item,
+      group: !!_get(item, 'item') ? _get(item, 'item') : null,
+      isGroup: !!_get(item, 'item'),
+    });
+    return <Group data={[{ question: data }]} prepareItems={prepareItems} />;
+  }
+
+  return null;
+};
+
+Items.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  fhirVersion: PropTypes.oneOf([
+    fhirVersions.DSTU2,
+    fhirVersions.STU3,
+    fhirVersions.R4,
+  ]).isRequired,
+};
+
+export default Items;

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.css

@@ -1,21 +1,45 @@
 .fhir-resource__QuestionnaireResponse-list {
   list-style: none;
-  border: 1px solid #f0f0f0;
-  padding: 2px;
-  margin: 2px 2px 2px 20px;
+  padding: 0;
+  margin: 0;
+}
+
+.fhir-resource__QuestionnaireResponse-list:first-of-type {
+  padding-top: 20px;
 }
 
 .fhir-resource__QuestionnaireResponse-list-title {
-  background-color: #f6f6f6;
-  padding: 2px 2px 4px 2px;
+  padding: 2px 2px 8px 2px;
+  font-weight: bold;
+}
+
+.fhir-resource__QuestionnaireResponse-list-title-question {
+  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 56px;
+  padding-left: 16px;
+  border-radius: 4px;
+  color: #adb5bd;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list {
   list-style: none;
+  padding-left: 0;
+  display: block;
+  color: #adb5bd;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list li {
-  border-bottom: 1px solid #f5f5f5;
+  display: block;
+  margin-bottom: 56px;
+}
+
+.fhir-resource__QuestionnaireResponse-questions-list-element {
+  background: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 16px;
+  margin-bottom: 56px;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list li:last-child {
@@ -23,11 +47,12 @@
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list-item-details {
-  margin-left: 20px;
+  margin: -30px 0;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list-item-details-el {
   display: inline-block;
+  color: black;
   margin-right: 15px;
-  color: blue;
+  margin-left: 20px;
 }