Make tests for kube object status icon more realistic

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/behaviours/cluster/kube-object-status-icon/extension-api/__snapshots__/disable-kube-object-statuses-when-cluster-is-not-relevant.test.tsx.snap

@@ -267,6 +267,7 @@ exports[`disable kube object statuses when cluster is not relevant given extensi
       >
         <i
           class="Icon KubeObjectStatusIcon error material focusable"
+          data-testid="kube-object-status-icon-for-some-uid"
           id="tooltip_target_156"
         >
           <span

src/behaviours/cluster/kube-object-status-icon/show-status-for-a-kube-object.test.tsx

@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { KubeObjectStatusLevel } from "../../../common/k8s-api/kube-object-status";
+import { KubeObject } from "../../../common/k8s-api/kube-object";
+import React from "react";
+import { useFakeTime } from "../../../common/test-utils/use-fake-time";
+import type { DiContainer } from "@ogre-tools/injectable";
+import { getInjectable } from "@ogre-tools/injectable";
+import type { IObservableValue } from "mobx";
+import { observable, computed, runInAction } from "mobx";
+import { KubeObjectStatusIcon } from "../../../renderer/components/kube-object-status-icon";
+import { kubeObjectStatusTextInjectionToken } from "../../../renderer/components/kube-object-status-icon/kube-object-status-text-injection-token";
+import { frontEndRouteInjectionToken } from "../../../common/front-end-routing/front-end-route-injection-token";
+import { routeSpecificComponentInjectionToken } from "../../../renderer/routes/route-specific-component-injection-token";
+import type { ApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { getApplicationBuilder } from "../../../renderer/components/test-utils/get-application-builder";
+import { navigateToRouteInjectionToken } from "../../../common/front-end-routing/navigate-to-route-injection-token";
+import type { RenderResult } from "@testing-library/react";
+
+// TODO: Make tooltips free of side effects by making it deterministic
+jest.mock("../../../renderer/components/tooltip/withTooltip", () => ({
+  withTooltip:
+    (Target: any) =>
+      ({ tooltip, ...props }: any) => {
+        if (tooltip) {
+          const testId = props["data-testid"];
+
+          return (
+            <>
+              <Target tooltip={tooltip.children ? undefined : tooltip} {...props} />
+              <div data-testid={testId && `tooltip-content-for-${testId}`}>{tooltip.children || tooltip}</div>
+            </>
+          );
+        }
+
+        return <Target {...props} />;
+      },
+}));
+
+describe("show status for a kube object", () => {
+  let builder: ApplicationBuilder;
+  let infoStatusIsShown: IObservableValue<boolean>;
+  let warningStatusIsShown: IObservableValue<boolean>;
+  let criticalStatusIsShown: IObservableValue<boolean>;
+
+  beforeEach(() => {
+    useFakeTime("2015-10-21T07:28:00Z");
+
+    builder = getApplicationBuilder();
+
+    const rendererDi = builder.dis.rendererDi;
+
+    infoStatusIsShown = observable.box(false);
+    warningStatusIsShown = observable.box(false);
+    criticalStatusIsShown = observable.box(false);
+
+    const infoStatusInjectable = getStatusTextInjectable(
+      KubeObjectStatusLevel.INFO,
+      "info",
+      "some-kind",
+      ["some-api-version"],
+      infoStatusIsShown,
+    );
+
+    const warningStatusInjectable = getStatusTextInjectable(
+      KubeObjectStatusLevel.WARNING,
+      "warning",
+      "some-kind",
+      ["some-api-version"],
+      warningStatusIsShown,
+    );
+
+    const criticalStatusInjectable = getStatusTextInjectable(
+      KubeObjectStatusLevel.CRITICAL,
+      "critical",
+      "some-kind",
+      ["some-api-version"],
+      criticalStatusIsShown,
+    );
+
+    rendererDi.register(
+      testRouteInjectable,
+      testRouteComponentInjectable,
+      infoStatusInjectable,
+      warningStatusInjectable,
+      criticalStatusInjectable,
+    );
+
+    builder.setEnvironmentToClusterFrame();
+  });
+
+  describe("given application starts and in test page", () => {
+    let rendererDi: DiContainer;
+    let rendered: RenderResult;
+
+    beforeEach(async () => {
+      rendered = await builder.render();
+
+      rendererDi = builder.dis.rendererDi;
+
+      const navigateToRoute = rendererDi.inject(navigateToRouteInjectionToken);
+      const testRoute = rendererDi.inject(testRouteInjectable);
+
+      navigateToRoute(testRoute);
+    });
+
+    it("renders", () => {
+      expect(rendered.baseElement).toMatchSnapshot();
+    });
+
+    it("does not show any statuses yet", () => {
+      const status = rendered.queryByTestId(
+        "kube-object-status-icon-for-some-uid",
+      );
+
+      expect(status).not.toBeInTheDocument();
+    });
+
+    describe("when status for irrelevant kube object kind emerges", () => {
+      beforeEach(() => {
+        rendererDi.register(statusForIrrelevantKubeObjectKindInjectable);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("does not show any statuses", () => {
+        const status = rendered.queryByTestId(
+          "kube-object-status-icon-for-some-uid",
+        );
+
+        expect(status).not.toBeInTheDocument();
+      });
+    });
+
+    describe("when status for irrelevant kube object api version emerges", () => {
+      beforeEach(() => {
+        rendererDi.register(statusForIrrelevantKubeObjectApiVersionInjectable);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("does not show any statuses", () => {
+        const status = rendered.queryByTestId(
+          "kube-object-status-icon-for-some-uid",
+        );
+
+        expect(status).not.toBeInTheDocument();
+      });
+    });
+
+    describe("when info status emerges", () => {
+      beforeEach(() => {
+        runInAction(() => {
+          infoStatusIsShown.set(true);
+        });
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("shows status", () => {
+        const status = rendered.getByTestId(
+          "kube-object-status-icon-for-some-uid",
+        );
+
+        expect(status).toBeInTheDocument();
+      });
+
+      it("show info status", () => {
+        const tooltipContent = rendered.getByTestId(
+          "tooltip-content-for-kube-object-status-icon-for-some-uid",
+        );
+
+        expect(tooltipContent).toHaveTextContent("Some info status for some-name");
+      });
+    });
+
+    describe("when warning status emerges", () => {
+      beforeEach(() => {
+        warningStatusIsShown.set(true);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("show warning status", () => {
+        const tooltipContent = rendered.getByTestId(
+          "tooltip-content-for-kube-object-status-icon-for-some-uid",
+        );
+
+        expect(tooltipContent).toHaveTextContent("Some warning status for some-name");
+      });
+    });
+
+    describe("when critical status emerges", () => {
+      beforeEach(() => {
+        criticalStatusIsShown.set(true);
+      });
+
+      it("renders", () => {
+        expect(rendered.baseElement).toMatchSnapshot();
+      });
+
+      it("show critical status", () => {
+        const tooltipContent = rendered.getByTestId(
+          "tooltip-content-for-kube-object-status-icon-for-some-uid",
+        );
+
+        expect(tooltipContent).toHaveTextContent("Some critical status for some-name");
+      });
+    });
+  });
+});
+
+const testRouteInjectable = getInjectable({
+  id: "test-route",
+
+  instantiate: () => ({
+    path: "/test-route",
+    clusterFrame: true,
+    isEnabled: computed(() => true),
+  }),
+
+  injectionToken: frontEndRouteInjectionToken,
+});
+
+const testRouteComponentInjectable = getInjectable({
+  id: "test-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(testRouteInjectable),
+
+    Component: () => (
+      <KubeObjectStatusIcon
+        object={getKubeObjectStub("some-kind", "some-api-version")}
+      />
+    ),
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+const getKubeObjectStub = (kind: string, apiVersion: string) => KubeObject.create({
+  apiVersion,
+  kind,
+  metadata: {
+    uid: "some-uid",
+    name: "some-name",
+    resourceVersion: "some-resource-version",
+    namespace: "some-namespace",
+    selfLink: "/foo",
+  },
+});
+
+const getStatusTextInjectable = (
+  level: KubeObjectStatusLevel,
+  title: string,
+  kind: string,
+  apiVersions: string[],
+  statusIsShown?: IObservableValue<boolean>,
+) =>
+  getInjectable({
+    id: title,
+
+    instantiate: () => ({
+      apiVersions,
+      kind,
+
+      resolve: (kubeObject: KubeObject) => {
+        if (statusIsShown && !statusIsShown.get()) {
+          return null;
+        }
+
+        return {
+          level,
+          text: `Some ${title} status for ${kubeObject.getName()}`,
+          timestamp: "2015-10-19T07:28:00Z",
+        };
+      },
+
+      enabled: computed(() => true),
+    }),
+
+    injectionToken: kubeObjectStatusTextInjectionToken,
+  });
+
+const statusForIrrelevantKubeObjectKindInjectable = getStatusTextInjectable(
+  KubeObjectStatusLevel.INFO,
+  "irrelevant",
+  "some-other-kind",
+  ["some-api-version"],
+);
+
+const statusForIrrelevantKubeObjectApiVersionInjectable = getStatusTextInjectable(
+  KubeObjectStatusLevel.INFO,
+  "irrelevant",
+  "some-kind",
+  ["some-other-api-version"],
+);

src/renderer/components/kube-object-status-icon/__snapshots__/kube-object-status-icon.test.tsx.snap

@@ -1,116 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kube-object-status-icon given info and warning statuses are present, when rendered, renders with statuses 1`] = `
-<body>
-  <div>
-    <i
-      class="Icon KubeObjectStatusIcon warning material focusable"
-      id="tooltip_target_5"
-    >
-      <span
-        class="icon"
-        data-icon-name="warning"
-      >
-        warning
-      </span>
-      <div />
-    </i>
-  </div>
-</body>
-`;
-
-exports[`kube-object-status-icon given level "critical" status, when rendered, renders with status 1`] = `
-<body>
-  <div>
-    <i
-      class="Icon KubeObjectStatusIcon error material focusable"
-      id="tooltip_target_1"
-    >
-      <span
-        class="icon"
-        data-icon-name="error"
-      >
-        error
-      </span>
-      <div />
-    </i>
-  </div>
-</body>
-`;
-
-exports[`kube-object-status-icon given level "info" status, when rendered, renders with status 1`] = `
-<body>
-  <div>
-    <i
-      class="Icon KubeObjectStatusIcon info material focusable"
-      id="tooltip_target_2"
-    >
-      <span
-        class="icon"
-        data-icon-name="info"
-      >
-        info
-      </span>
-      <div />
-    </i>
-  </div>
-</body>
-`;
-
-exports[`kube-object-status-icon given level "warning" status, when rendered, renders with status 1`] = `
-<body>
-  <div>
-    <i
-      class="Icon KubeObjectStatusIcon warning material focusable"
-      id="tooltip_target_3"
-    >
-      <span
-        class="icon"
-        data-icon-name="warning"
-      >
-        warning
-      </span>
-      <div />
-    </i>
-  </div>
-</body>
-`;
-
-exports[`kube-object-status-icon given no statuses, when rendered, renders as empty 1`] = `<div />`;
-
-exports[`kube-object-status-icon given registration for wrong api version, when rendered, renders as empty 1`] = `
-<body>
-  <div />
-</body>
-`;
-
-exports[`kube-object-status-icon given registration for wrong kind, when rendered, renders as empty 1`] = `
-<body>
-  <div />
-</body>
-`;
-
-exports[`kube-object-status-icon given registration without status for exact kube object, when rendered, renders as empty 1`] = `
-<body>
-  <div />
-</body>
-`;
-
-exports[`kube-object-status-icon given status for all levels is present, when rendered, renders with statuses 1`] = `
-<body>
-  <div>
-    <i
-      class="Icon KubeObjectStatusIcon error material focusable"
-      id="tooltip_target_4"
-    >
-      <span
-        class="icon"
-        data-icon-name="error"
-      >
-        error
-      </span>
-      <div />
-    </i>
-  </div>
-</body>
-`;

src/renderer/components/kube-object-status-icon/kube-object-status-icon.test.tsx

@@ -1,251 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getDiForUnitTesting } from "../../getDiForUnitTesting";
-import type { DiRender } from "../test-utils/renderFor";
-import { renderFor } from "../test-utils/renderFor";
-import type { KubeObjectStatus } from "../../../common/k8s-api/kube-object-status";
-import { KubeObjectStatusLevel } from "../../../common/k8s-api/kube-object-status";
-import { KubeObject } from "../../../common/k8s-api/kube-object";
-import { KubeObjectStatusIcon } from "./kube-object-status-icon";
-import React from "react";
-import { useFakeTime } from "../../../common/test-utils/use-fake-time";
-import { getInjectable } from "@ogre-tools/injectable";
-import type { DiContainer } from "@ogre-tools/injectable";
-import { kubeObjectStatusTextInjectionToken } from "./kube-object-status-text-injection-token";
-import { computed } from "mobx";
-
-describe("kube-object-status-icon", () => {
-  let render: DiRender;
-  let di: DiContainer;
-
-  beforeEach(() => {
-    useFakeTime("2015-10-21T07:28:00Z");
-
-    di = getDiForUnitTesting({ doGeneralOverrides: true });
-
-    render = renderFor(di);
-  });
-
-  it("given no statuses, when rendered, renders as empty", () => {
-    const kubeObject = getKubeObjectStub("irrelevant", "irrelevant");
-
-    const { container } = render(<KubeObjectStatusIcon object={kubeObject} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('given level "critical" status, when rendered, renders with status', () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.CRITICAL,
-      "critical",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('given level "info" status, when rendered, renders with status', () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.INFO,
-      "info",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it('given level "warning" status, when rendered, renders with status', () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.WARNING,
-      "warning",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("given status for all levels is present, when rendered, renders with statuses", () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const criticalStatusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.CRITICAL,
-      "critical",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    const warningStatusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.WARNING,
-      "warning",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    const infoStatusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.INFO,
-      "info",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    di.register(
-      criticalStatusTextInjectable,
-      warningStatusTextInjectable,
-      infoStatusTextInjectable,
-    );
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("given info and warning statuses are present, when rendered, renders with statuses", () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const warningStatusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.WARNING,
-      "warning",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    const infoStatusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.INFO,
-      "info",
-      "some-kind",
-      ["some-api-version"],
-    );
-
-    di.register(warningStatusTextInjectable, infoStatusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-
-  it("given registration for wrong api version, when rendered, renders as empty", () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.CRITICAL,
-      "irrelevant",
-      "some-kind",
-      ["some-other-api-version"],
-    );
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("given registration for wrong kind, when rendered, renders as empty", () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getStatusTextInjectable(
-      KubeObjectStatusLevel.CRITICAL,
-      "irrelevant",
-      "some-other-kind",
-      ["some-api-version"],
-    );
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-
-  it("given registration without status for exact kube object, when rendered, renders as empty", () => {
-    const kubeObject = getKubeObjectStub("some-kind", "some-api-version");
-
-    const statusTextInjectable = getInjectable({
-      id: "some-id",
-      instantiate: () => ({
-        apiVersions: ["some-api-version"],
-        kind: "some-kind",
-        resolve: () => { return undefined as unknown as KubeObjectStatus; },
-        enabled: computed(() => true),
-      }),
-
-      injectionToken: kubeObjectStatusTextInjectionToken,
-    });
-
-    di.register(statusTextInjectable);
-
-    const { baseElement } = render(
-      <KubeObjectStatusIcon object={kubeObject} />,
-    );
-
-    expect(baseElement).toMatchSnapshot();
-  });
-});
-
-const getKubeObjectStub = (kind: string, apiVersion: string) => KubeObject.create({
-  apiVersion,
-  kind,
-  metadata: {
-    uid: "some-uid",
-    name: "some-name",
-    resourceVersion: "some-resource-version",
-    namespace: "some-namespace",
-    selfLink: "/foo",
-  },
-});
-
-const getStatusTextInjectable = (level: KubeObjectStatusLevel, title: string, kind: string, apiVersions: string[]) => getInjectable({
-  id: title,
-  instantiate: () => ({
-    apiVersions,
-    kind,
-
-    resolve: (kubeObject: KubeObject) => ({
-      level,
-      text: `Some ${title} status for ${kubeObject.getName()}`,
-      timestamp: "2015-10-19T07:28:00Z",
-    }),
-
-    enabled: computed(() => true),
-  }),
-
-  injectionToken: kubeObjectStatusTextInjectionToken,
-});

src/renderer/components/kube-object-status-icon/kube-object-status-icon.tsx

@@ -119,6 +119,7 @@ class NonInjectedKubeObjectStatusIcon extends React.Component<KubeObjectStatusIc
       <Icon
         material={maxLevel}
         className={cssNames("KubeObjectStatusIcon", maxLevel)}
+        data-testid={`kube-object-status-icon-for-${this.props.object.getId()}`}
         tooltip={{
           children: (
             <div className="KubeObjectStatusTooltip">

src/renderer/components/kube-object-status-icon/kube-object-status-text-injection-token.ts

@@ -10,7 +10,7 @@ import type { IComputedValue } from "mobx";
 export interface KubeObjectStatusText {
   kind: string;
   apiVersions: string[];
-  resolve: (object: KubeObject) => KubeObjectStatus;
+  resolve: (object: KubeObject) => KubeObjectStatus | null;
   enabled: IComputedValue<boolean>;
 }
 

src/renderer/components/kube-object-status-icon/kube-object-status-texts-for-object.injectable.ts

@@ -6,9 +6,12 @@ import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import kubeObjectStatusTextsInjectable from "./kube-object-status-texts.injectable";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import { conforms, eq, includes } from "lodash/fp";
-import type { KubeObjectStatusRegistration } from "./kube-object-status-registration";
 import { computed } from "mobx";
 
+function isNotEmpty<T>(item: T | null | undefined): item is T {
+  return !!item;
+}
+
 const kubeObjectStatusTextsForObjectInjectable = getInjectable({
   id: "kube-object-status-texts-for-object",
 
@@ -19,8 +22,8 @@ const kubeObjectStatusTextsForObjectInjectable = getInjectable({
       allStatusTexts
         .get()
         .filter(toKubeObjectRelated(kubeObject))
-        .map(toStatus(kubeObject))
+        .map(item => item.resolve(kubeObject))
-        .filter(Boolean),
+        .filter(isNotEmpty),
     );
   },
 
@@ -35,8 +38,4 @@ const toKubeObjectRelated = (kubeObject: KubeObject) =>
     apiVersions: includes(kubeObject.apiVersion),
   });
 
-const toStatus =
-  (kubeObject: KubeObject) => (item: KubeObjectStatusRegistration) =>
-    item.resolve(kubeObject);
-
 export default kubeObjectStatusTextsForObjectInjectable;