Fix installation of helm charts (#5841)

* Relax validator for installing charts

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

* Tweak spacing between words in confirmation dialog

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

* Add mocks for monaco editor and virtualized auto sizer to allow components to be rendered in unit tests

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

* Improve typing for a function

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

* Remove usage of shared global state from a component

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

* Provide a way to unit test usages of storages

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

* Add way to get current value from select in behavioural unit tests

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

* Rework installation of helm charts to get rid of the majority of bugs

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

* Update snapshots

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

* Remove technical test for being covered in behaviours

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

* Split behaviour to smaller pieces

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

* Add tests accidentally removed back

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

* Mark functions causing side effects

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

* Remove behaviour covered by other behaviours

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

* Tweak naming

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

* Remove unused dependency

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

src/renderer/components/test-utils/get-application-builder.tsx

@@ -12,7 +12,7 @@ import { Router } from "react-router";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
 import allowedResourcesInjectable from "../../cluster-frame-context/allowed-resources.injectable";
 import type { RenderResult } from "@testing-library/react";
-import { getByText, fireEvent } from "@testing-library/react";
+import { queryByText, fireEvent } from "@testing-library/react";
 import type { KubeResource } from "../../../common/rbac";
 import type { DiContainer } from "@ogre-tools/injectable";
 import clusterStoreInjectable from "../../../common/cluster-store/cluster-store.injectable";
@@ -26,6 +26,7 @@ import type { MenuItemOpts } from "../../../main/menu/application-menu-items.inj
 import applicationMenuItemsInjectable from "../../../main/menu/application-menu-items.injectable";
 import type { MenuItemConstructorOptions, MenuItem } from "electron";
 import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
+import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable";
 import { ClusterFrameContext } from "../../cluster-frame-context/cluster-frame-context";
@@ -110,12 +111,13 @@ export interface ApplicationBuilder {
   };
 
   helmCharts: {
-    navigate: () => void;
+    navigate: NavigateToHelmCharts;
   };
 
   select: {
-    openMenu: (id: string) => void;
+    openMenu: (id: string) => ({ selectOption: (labelText: string) => void });
     selectOption: (menuId: string, labelText: string) => void;
+    getValue: (menuId: string) => string;
   };
 }
 
@@ -244,6 +246,20 @@ export const getApplicationBuilder = () => {
   const disableRendererExtension = disableExtensionsFor(rendererExtensionsState, rendererDi);
   const disableMainExtension = disableExtensionsFor(mainExtensionsState, mainDi);
 
+  const selectOptionFor = (menuId: string) => (labelText: string) => {
+    const menuOptions = rendered.baseElement.querySelector<HTMLElement>(
+      `.${menuId}-options`,
+    );
+
+    assert(menuOptions, `Could not find select options for menu with ID "${menuId}"`);
+
+    const option = queryByText(menuOptions, labelText);
+
+    assert(option, `Could not find select option with label "${labelText}" for menu with ID "${menuId}"`);
+
+    userEvent.click(option);
+  };
+
   const builder: ApplicationBuilder = {
     dis,
 
@@ -364,10 +380,10 @@ export const getApplicationBuilder = () => {
     },
 
     helmCharts: {
-      navigate: () => {
+      navigate: (parameters) => {
         const navigateToHelmCharts = rendererDi.inject(navigateToHelmChartsInjectable);
 
-        navigateToHelmCharts();
+        navigateToHelmCharts(parameters);
       },
     },
 
@@ -391,6 +407,7 @@ export const getApplicationBuilder = () => {
       const namespaceStoreStub = {
         contextNamespaces: [],
         items: [],
+        selectNamespaces: () => {},
       } as unknown as NamespaceStore;
 
       const clusterFrameContextFake = new ClusterFrameContext(
@@ -500,25 +517,33 @@ export const getApplicationBuilder = () => {
 
     select: {
       openMenu: (menuId) => {
-        const selector = rendered.container.querySelector<HTMLElement>(
+        const select = rendered.baseElement.querySelector<HTMLElement>(
           `#${menuId}`,
         );
 
-        assert(selector);
+        assert(select, `Could not find select with ID "${menuId}"`);
 
-        openMenu(selector);
+        openMenu(select);
+
+        return {
+          selectOption: selectOptionFor(menuId),
+        };
       },
 
-      selectOption: (menuId, labelText) => {
-        const menuOptions = rendered.baseElement.querySelector<HTMLElement>(
-          `.${menuId}-options`,
+      selectOption: (menuId, labelText) => selectOptionFor(menuId)(labelText),
+
+      getValue: (menuId) => {
+        const select = rendered.baseElement.querySelector<HTMLInputElement>(
+          `#${menuId}`,
         );
 
-        assert(menuOptions);
+        assert(select, `Could not find select with ID "${menuId}"`);
 
-        const option = getByText(menuOptions, labelText);
+        const controlElement = select.closest(".Select__control");
 
-        userEvent.click(option);
+        assert(controlElement, `Could not find select value for menu with ID "${menuId}"`);
+
+        return controlElement.textContent || "";
       },
     },
   };