Testing changing visibility flag

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/extensions/registries/modal-registry.ts

@@ -10,6 +10,6 @@ import type { IComputedValue } from "mobx";
 export interface ClusterModalRegistration {
   id: string;
   Component: React.ComponentType;
-  visible?: IComputedValue<boolean>;
+  visible: IComputedValue<boolean>;
 }
 

src/features/cluster/cluster-modal-items.test.tsx

@@ -2,30 +2,64 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { getInjectable } from "@ogre-tools/injectable";
+import { getInjectable, Injectable } from "@ogre-tools/injectable";
 import type { RenderResult } from "@testing-library/react";
-import { computed, runInAction } from "mobx";
+import { computed, IComputedValue, IObservableValue, observable, runInAction } from "mobx";
 import React from "react";
 import type { ClusterModalRegistration } from "../../extensions/registries";
 import { clusterModalsInjectionToken } from "../../renderer/cluster-modals/cluster-modals-injection-token";
 import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
 
-describe("cluster modal elements", () => {
+describe("<body/> elements originated from cluster modal registration", () => {
   let builder: ApplicationBuilder;
   let rendered: RenderResult;
 
   beforeEach(() => {
     builder = getApplicationBuilder();
-
     builder.setEnvironmentToClusterFrame();
   });
 
-  describe("given custom cluster modal available", () => {
+  describe("given custom components for cluster view available", () => {
+    let someObservable: IObservableValue<boolean>;
+    let clusterModalInjectable: Injectable<IComputedValue<ClusterModalRegistration[]>, any, any>;
+    let clusterDialogInjectable: Injectable<IComputedValue<ClusterModalRegistration[]>, any, any>;
+  
     beforeEach(async () => {
+      someObservable = observable.box(false);
+
+      clusterModalInjectable = getInjectable({
+        id: "some-cluster-modal-injectable",
+      
+        instantiate: () => {
+          return computed((): ClusterModalRegistration[] => [{
+            id: "test-modal-id",
+            Component: () => <div data-testid="test-modal">test modal</div>,
+            visible: computed(() => true),
+          }]);
+        },
+      
+        injectionToken: clusterModalsInjectionToken,
+      });
+
+      clusterDialogInjectable = getInjectable({
+        id: "dialog-with-observable-visibility-injectable",
+      
+        instantiate: () => {
+          return computed((): ClusterModalRegistration[] => [{
+            id: "dialog-with-observable-visibility-id",
+            Component: () => <div data-testid="dialog-with-observable-visibility">dialog contents</div>,
+            visible: computed(() => someObservable.get()),
+          }]);
+        },
+      
+        injectionToken: clusterModalsInjectionToken,
+      });
+
       builder.beforeWindowStart((windowDi) => {
         runInAction(() => {
-          windowDi.register(testClusterModalsInjectable);
+          windowDi.register(clusterModalInjectable);
+          windowDi.register(clusterDialogInjectable);
         });
       });
 
@@ -35,9 +69,31 @@ describe("cluster modal elements", () => {
     it("renders", () => {
       expect(rendered.container).toMatchSnapshot();
     });
+
+    it("renders provided component html", () => {
+      const modal = rendered.getByTestId("test-modal");
+
+      expect(modal).toBeInTheDocument();
+    });
+
+    it("doesn't render component which should be invisible", () => {
+      const dialog = rendered.queryByTestId("dialog-with-observable-visibility");
+
+      expect(dialog).not.toBeInTheDocument();
+    });
+
+    it("when injectable component becomes visible, shows it", () => {
+      runInAction(() => {
+        someObservable.set(true);
+      });
+
+      const dialog = rendered.getByTestId("dialog-with-observable-visibility");
+
+      expect(dialog).toBeInTheDocument();
+    });
   });
 
-  describe("given custom cluster modal not available", () => {
+  describe("given custom component for cluster view not available", () => {
     beforeEach(async () => {
       rendered = await builder.render();
     });
@@ -45,19 +101,11 @@ describe("cluster modal elements", () => {
     it("renders", () => {
       expect(rendered.container).toMatchSnapshot();
     });
+
+    it("doesn't render any custom html", () => {
+      const modal = rendered.queryByTestId("test-modal");
+
+      expect(modal).not.toBeInTheDocument();
+    })
   });
 });
-
-const testClusterModalsInjectable = getInjectable({
-  id: "some-cluster-modal-injectable",
-
-  instantiate: () => {
-    return computed((): ClusterModalRegistration[] => [{
-      id: "test-modal-id",
-      Component: () => <div data-testid="test-modal">test modal</div>,
-      visible: computed(() => true),
-    }]);
-  },
-
-  injectionToken: clusterModalsInjectionToken,
-});

src/renderer/cluster-modals/cluster-modals.tsx

@@ -8,20 +8,21 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import React from "react";
 import type { ClusterModalRegistration } from "../../extensions/registries";
 import clusterModalsInjectable from "./cluster-modals.injectable";
+import { observer } from "mobx-react";
 
 interface Dependencies {
   clusterModals: ClusterModalRegistration[];
 }
 
-export const NonInjectedClusterModals = ({ clusterModals }: Dependencies) => {
+export const NonInjectedClusterModals = observer(({ clusterModals }: Dependencies) => {
   return (
     <div className={styles.clusterModals} style={{ height: 0 }}>
       {clusterModals.map((modal) => {
-        return modal.visible ? <modal.Component key={modal.id} /> : null;
+        return modal.visible.get() ? <modal.Component key={modal.id} /> : null;
       })}
     </div>
   );
-};
+});
 
 export const ClusterModals = withInjectables<Dependencies>(NonInjectedClusterModals, {
   getProps: (di, props) => ({