Merge pull request #826 from securityscorecard/ajkl2533@UXD-1255

fix(Signal): handle unknown value gracefully

src/components/Signal/Signal.test.tsx

@@ -0,0 +1,36 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithProviders } from '../../utils/tests/renderWithProviders';
+import { Signal } from './index';
+
+describe('Signal', () => {
+  it('should not render if empty "kind" prop is provided', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    renderWithProviders(<Signal kind="" />);
+
+    expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
+  });
+  it('should not render if "kind" prop is null', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    renderWithProviders(<Signal kind={null} />);
+
+    expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
+  });
+  it('should not render if "kind" prop is undefined', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    renderWithProviders(<Signal kind={undefined} />);
+
+    expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
+  });
+  it('should not render if unknown "kind" prop is provided', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    renderWithProviders(<Signal kind="strange" />);
+
+    expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument();
+  });
+});

src/components/Signal/Signal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { prop } from 'ramda';
-import { isNilOrEmpty } from 'ramda-adjunct';
+import { isNilOrEmpty, isUndefined } from 'ramda-adjunct';
 import cls from 'classnames';
 
 import { colors } from '../../theme/colors';
@@ -68,11 +68,16 @@ const Signal: React.FC<SignalProps> = ({
 }) => {
   if (isNilOrEmpty(kind)) return null;
 
-  const { color, paths } = prop(kind.toLowerCase())(kinds);
+  const severityKind = prop(kind.toLowerCase(), kinds);
+
+  if (isUndefined(severityKind)) return null;
+
+  const { color, paths } = severityKind;
 
   return (
     <svg
       className={cls(CLX_COMPONENT, className)}
+      data-testid="ds-severity-icon"
       height={size}
       viewBox="0 0 16 16"
       width={size}