[terra-clinical-result] Display error state if result value is empty (#…

…909)

Co-authored-by: Andrew Tran <[email protected]>

packages/terra-clinical-result/CHANGELOG.md

@@ -10,6 +10,7 @@
 
 * Changed
   * Updated testing recommendations to use `jest.spyOn` instead of `jest.mock`.
+  * Updated invalid result value check to display error state for empty results.
 
 ## 1.21.0 - (August 2, 2023)
 

packages/terra-clinical-result/src/common/observation/_Observation.jsx

@@ -73,7 +73,7 @@ const Observation = (props) => {
     low: <IconLow className={cx('icon-interpretation')} a11yLabel={intl.formatMessage({ id: 'Terra.clinicalResult.interpretationOutOfRangeLow' })} role="img" focusable="true" />,
   };
 
-  const isValidValue = result?.value;
+  const isValidValue = result && result.value && (!Array.isArray(result.value) || result.value.length !== 0);
 
   const theme = React.useContext(ThemeContext);
   const valueTextClasses = classNames(

packages/terra-clinical-result/src/terra-dev-site/test/clinical-result/TestResults.jsx

@@ -190,6 +190,30 @@ const NoDataResult = {
   resultNoData: true,
 };
 
+const EmptyStringResult = {
+  eventId: '',
+  result: {
+    value: '',
+    unit: '',
+  },
+  interpretation: 'normal',
+  isModified: false,
+  hasComment: false,
+  isUnverified: false,
+};
+
+const EmptyArrayResult = {
+  eventId: '',
+  result: {
+    value: [],
+    unit: '',
+  },
+  interpretation: 'normal',
+  isModified: false,
+  hasComment: false,
+  isUnverified: false,
+};
+
 const EnteredInErrorSysBPResult = {
   id: '111',
   systolic: {
@@ -244,4 +268,6 @@ export {
   NoDataResult,
   EnteredInErrorSysBPResult,
   EnteredInErrorDiaBPResult,
+  EmptyArrayResult,
+  EmptyStringResult,
 };

packages/terra-clinical-result/src/terra-dev-site/test/clinical-result/clinical-result-blood-pressure/NoDataClinicalResultBloodPressure.test.jsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { ClinicalResultBloodPressure } from 'terra-clinical-result/lib/index';
-import { DefaultSystolicResult, DefaultDiastolicResult, NoDataResult } from '../TestResults';
+import {
+  DefaultSystolicResult,
+  DefaultDiastolicResult,
+  EmptyArrayResult,
+  EmptyStringResult,
+  NoDataResult,
+} from '../TestResults';
 
 const ClinicalResultBloodPressureExample = () => (
   <>
@@ -19,6 +25,14 @@ const ClinicalResultBloodPressureExample = () => (
       systolic={NoDataResult}
       diastolic={NoDataResult}
     />
+    <ClinicalResultBloodPressure
+      systolic={EmptyStringResult}
+      diastolic={EmptyStringResult}
+    />
+    <ClinicalResultBloodPressure
+      systolic={EmptyArrayResult}
+      diastolic={EmptyArrayResult}
+    />
   </>
 );
 export default ClinicalResultBloodPressureExample;

packages/terra-clinical-result/src/terra-dev-site/test/clinical-result/clinical-result/EmptyResult.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ClinicalResult from '../../../../ClinicalResult';
+
+export default () => <ClinicalResult result={{ value: '' }} />;

packages/terra-clinical-result/src/terra-dev-site/test/clinical-result/clinical-result/EmptyResultArray.test.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import ClinicalResult from '../../../../ClinicalResult';
+
+export default () => <ClinicalResult result={{ value: [] }} />;

packages/terra-clinical-result/tests/jest/common/observation/Observation.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { shallowWithIntl } from 'terra-enzyme-intl';
 import Observation from '../../../../src/common/observation/_Observation';
-import DefaultResult from '../../../../src/terra-dev-site/test/clinical-result/TestResults';
+import DefaultResult, { EmptyArrayResult, EmptyStringResult } from '../../../../src/terra-dev-site/test/clinical-result/TestResults';
 
 // Snapshot Tests
 describe('Observation', () => {
@@ -66,5 +66,15 @@ describe('Observation', () => {
       const nameHeaderCell = shallowWithIntl(<Observation result={DefaultResult.result} interpretation="normal" />).dive();
       expect(nameHeaderCell).toMatchSnapshot();
     });
+
+    it('should render an error with empty array result', () => {
+      const observation = shallowWithIntl(<Observation result={EmptyArrayResult.result} />).dive();
+      expect(observation).toMatchSnapshot();
+    });
+
+    it('should render an error with empty string result', () => {
+      const observation = shallowWithIntl(<Observation result={EmptyStringResult.result} />).dive();
+      expect(observation).toMatchSnapshot();
+    });
   });
 });

packages/terra-clinical-result/tests/jest/common/observation/__snapshots__/Observation.test.jsx.snap

@@ -177,6 +177,10 @@ exports[`Observation - Interpretaion should render an Observation with interpret
 </Fragment>
 `;
 
+exports[`Observation - Interpretaion should render an error with empty array result 1`] = `<InjectIntl(ResultError) />`;
+
+exports[`Observation - Interpretaion should render an error with empty string result 1`] = `<InjectIntl(ResultError) />`;
+
 exports[`Observation should render a default Observation 1`] = `<InjectIntl(ResultError) />`;
 
 exports[`Observation should render an Observation with eventId 1`] = `

packages/terra-clinical-result/tests/wdio/clinical-result-spec.js

@@ -52,4 +52,16 @@ Terra.describeViewports('ClinicalResult', ['medium'], () => {
 
     Terra.validates.element('with no data');
   });
+
+  it('displays an error ClinicalResult with empty string', () => {
+    browser.url('/#/raw/tests/terra-clinical-result/clinical-result/clinical-result/empty-result');
+
+    Terra.validates.element('empty string with result error');
+  });
+
+  it('displays an error ClinicalResult with empty array', () => {
+    browser.url('/#/raw/tests/terra-clinical-result/clinical-result/clinical-result/empty-result-array');
+
+    Terra.validates.element('empty string with result array');
+  });
 });