Merge pull request #298 from aali309/GITOPS-10536-console-plugin-status-tests-4.18

cherry-pick Add unit tests for health & application set status to release-4.18 branch

Author: keithchong

src/gitops/Statuses/ApplicationSetStatus.test.tsx

@@ -0,0 +1,29 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import ApplicationSetStatus from './ApplicationSetStatus';
+
+describe('ApplicationSetStatus', () => {
+  it('renders Healthy', () => {
+    expect(renderToStaticMarkup(<ApplicationSetStatus status="Healthy" />)).toMatchInlineSnapshot(
+      `"<span><svg data-icon="HeartIcon" style="color:var(--pf-v5-global--success-color--100)"></svg> Healthy</span>"`,
+    );
+  });
+
+  it('renders Error', () => {
+    expect(renderToStaticMarkup(<ApplicationSetStatus status="Error" />)).toMatchInlineSnapshot(
+      `"<span><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Error</span>"`,
+    );
+  });
+
+  it('renders Unknown for unrecognised status', () => {
+    expect(renderToStaticMarkup(<ApplicationSetStatus status="Unknown" />)).toMatchInlineSnapshot(
+      `"<span><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> Unknown</span>"`,
+    );
+  });
+
+  it('renders Unknown icon for empty status', () => {
+    expect(renderToStaticMarkup(<ApplicationSetStatus status="" />)).toMatchInlineSnapshot(
+      `"<span><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> </span>"`,
+    );
+  });
+});

src/gitops/Statuses/ApplicationSetStatus.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  HealthDegradedIcon,
+  HealthHealthyIcon,
+  HealthUnknownIcon,
+} from 'src/gitops/utils/components/Icons/Icons';
+import { ApplicationSetStatus as AppSetStatus } from 'src/gitops/utils/constants';
+
+interface ApplicationSetStatusProps {
+  status: string;
+}
+
+const ApplicationSetStatus: React.FC<ApplicationSetStatusProps> = ({ status }) => {
+  let targetIcon: React.ReactNode;
+
+  switch (status) {
+    case AppSetStatus.HEALTHY:
+      targetIcon = <HealthHealthyIcon />;
+      break;
+    case AppSetStatus.ERROR:
+      targetIcon = <HealthDegradedIcon />;
+      break;
+    default:
+      targetIcon = <HealthUnknownIcon />;
+  }
+
+  return (
+    <span>
+      {targetIcon} {status}
+    </span>
+  );
+};
+
+export default ApplicationSetStatus;

src/gitops/Statuses/HealthStatus.test.tsx

@@ -20,12 +20,30 @@ describe('HealthStatus', () => {
     );
   });
 
+  it('renders Suspended', () => {
+    expect(renderToStaticMarkup(<HealthStatus status="Suspended" />)).toMatchInlineSnapshot(
+      `"<div><div><svg data-icon="OutlinedPauseCircleIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> Suspended</div></div>"`,
+    );
+  });
+
+  it('renders Missing', () => {
+    expect(renderToStaticMarkup(<HealthStatus status="Missing" />)).toMatchInlineSnapshot(
+      `"<div><div><svg data-icon="GhostIcon" style="color:var(--pf-v5-global--warning-color--100)"></svg> Missing</div></div>"`,
+    );
+  });
+
   it('renders Unknown for unrecognized status', () => {
     expect(renderToStaticMarkup(<HealthStatus status="SomethingElse" />)).toMatchInlineSnapshot(
       `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> SomethingElse</div></div>"`,
     );
   });
 
+  it('renders Unknown for undefined status', () => {
+    expect(renderToStaticMarkup(<HealthStatus status={undefined as any} />)).toMatchInlineSnapshot(
+      `"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> </div></div>"`,
+    );
+  });
+
   it('renders popover when message is provided', () => {
     expect(
       renderToStaticMarkup(<HealthStatus status="Degraded" message="Something broke" />),
@@ -65,4 +83,12 @@ describe('HealthStatusIcon', () => {
       `"<svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:#0DADEA" aria-label="Progressing"></svg>"`,
     );
   });
+
+  it('renders Unknown icon for unrecognised status', () => {
+    expect(
+      renderToStaticMarkup(<HealthStatusIcon status={'SomethingElse' as any} />),
+    ).toMatchInlineSnapshot(
+      `"<i title="SomethingElse" class="fa fa-question-circle utils-health-status-icon" style="color:#CCD6DD"></i>"`,
+    );
+  });
 });

src/gitops/Statuses/SyncStatus.test.tsx

@@ -25,4 +25,10 @@ describe('SyncStatus', () => {
       `"<span> </span>"`,
     );
   });
+
+  it('renders Unknown icon for undefined status', () => {
+    expect(renderToStaticMarkup(<SyncStatus status={undefined as any} />)).toMatchInlineSnapshot(
+      `"<span> </span>"`,
+    );
+  });
 });

src/gitops/components/shared/ApplicationSetList.tsx

@@ -26,13 +26,8 @@ import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
 
 import { useApplicationSetActionsProvider } from '../../hooks/useApplicationSetActionsProvider';
 import { ApplicationSetKind, ApplicationSetModel } from '../../models/ApplicationSetModel';
+import ApplicationSetStatusFragment from '../../Statuses/ApplicationSetStatus';
 import ActionsDropdown from '../../utils/components/ActionDropDown/ActionDropDown';
-// Import status icons for consistency with ApplicationList
-import {
-  HealthDegradedIcon,
-  HealthHealthyIcon,
-  HealthUnknownIcon,
-} from '../../utils/components/Icons/Icons';
 import { ApplicationSetStatus } from '../../utils/constants';
 import { getAppSetGeneratorCount, getAppSetStatus } from '../../utils/gitops';
 import { modelToGroupVersionKind, modelToRef } from '../../utils/utils';
@@ -90,27 +85,6 @@ const getGeneratedAppsCount = (
   }).length;
 };
 
-const ApplicationSetStatusFragment: React.FC<{ status: string }> = ({ status }) => {
-  let targetIcon: React.ReactNode;
-
-  switch (status) {
-    case ApplicationSetStatus.HEALTHY:
-      targetIcon = <HealthHealthyIcon />;
-      break;
-    case ApplicationSetStatus.ERROR:
-      targetIcon = <HealthDegradedIcon />;
-      break;
-    default:
-      targetIcon = <HealthUnknownIcon />;
-  }
-
-  return (
-    <span>
-      {targetIcon} {status}
-    </span>
-  );
-};
-
 interface ApplicationSetProps {
   namespace: string;
   hideNameLabelFilters?: boolean;