[terra-clinical-item-view] Fix for null item displays (#924)

packages/terra-clinical-item-view/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed error for null `displays` prop.
+
 ## 4.13.0 - (October 3, 2023)
 
 * Added

packages/terra-clinical-item-view/src/ItemView.jsx

@@ -314,11 +314,13 @@ const renderView = (displays, layout, emphasis, overrideDefaultStyling, trueColu
 };
 
 const isDisplaysTruncated = (displays) => {
-  const displaysSlice = displays.slice(0, 8);
+  if (displays) {
+    const displaysSlice = displays.slice(0, 8);
 
-  for (let i = 0; i < displaysSlice.length; i += 1) {
-    if (displaysSlice[i].props.isTruncated === true) {
-      return true;
+    for (let i = 0; i < displaysSlice.length; i += 1) {
+      if (displaysSlice[i]?.props.isTruncated === true) {
+        return true;
+      }
     }
   }
 

packages/terra-clinical-item-view/src/terra-dev-site/test/clinical-item-view/NullItemView.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import ItemView from '../../../ItemView';
+import styles from './ItemViewCommon.test.module.scss';
+
+const cx = classNames.bind(styles);
+
+const DefaultItemView = () => (
+  <div>
+    <p>Given null displays prop, the div is created, but there is no content to show. The ItemView is outlined below.</p>
+    <div className={cx('itemview-wrapper')}>
+      <ItemView id="ItemView" displays={null} />
+    </div>
+    <p>Given null display item, the div is created, but there is no content to show. The ItemView is outlined below.</p>
+    <div className={cx('itemview-wrapper')}>
+      <ItemView id="ItemViewNullInput" displays={[null]} />
+    </div>
+  </div>
+);
+
+export default DefaultItemView;

packages/terra-clinical-item-view/tests/jest/ItemView.test.jsx

@@ -9,6 +9,21 @@ it('should render a default component', () => {
   expect(itemView).toMatchSnapshot();
 });
 
+it('should render with null displays prop', () => {
+  const itemView = shallow(<ItemView displays={null} />);
+
+  expect(itemView.find('ItemDisplay')).toHaveLength(0);
+  expect(itemView.find('.body').props().children).toEqual([undefined, undefined]);
+  expect(itemView).toMatchSnapshot();
+});
+
+it('should render with null display item', () => {
+  const itemView = shallow(<ItemView displays={[null]} />);
+
+  expect(itemView.find('ItemDisplay')).toHaveLength(0);
+  expect(itemView).toMatchSnapshot();
+});
+
 it('should render with 1 display', () => {
   const display1 = shallowWithIntl(<ItemView.Display text="display 1" />);
   const displays = [display1];

packages/terra-clinical-item-view/tests/jest/__snapshots__/ItemView.test.jsx.snap

@@ -2420,3 +2420,31 @@ exports[`should render with a display and graphic 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render with null display item 1`] = `
+<div
+  className="item-view one-column"
+>
+  <div
+    className="body"
+  >
+    <div
+      className="single-result-column-container"
+    >
+      <div
+        className="content content-primary-size content-primary-color"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render with null displays prop 1`] = `
+<div
+  className="item-view one-column"
+>
+  <div
+    className="body"
+  />
+</div>
+`;

packages/terra-clinical-item-view/tests/wdio/item-view-spec.js

@@ -1,4 +1,10 @@
 Terra.describeViewports('Clinical Item View', ['tiny', 'small', 'medium', 'large', 'huge', 'enormous'], () => {
+  it('renders with a null display', () => {
+    browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/null-item-view');
+
+    Terra.validates.element('with a null display');
+  });
+
   it('renders with displays', () => {
     browser.url('/raw/tests/terra-clinical-item-view/clinical-item-view/displays-item-view');