Technical requirements for behavioural unit tests (#5084)

* Implement a lot of technical requirements for behavioural unit tests Note: the crux of this was to make routing env-agnostic, and not based on URLs as magic strings, but instead something type-enforced. Note: extension-based routes comply to same exact interface by "late-registering" their routes when installed. Routes are just injectables. Note: another chunk of global shared state is no more. Note: a lot of explicit side effects have been cornered to injectables. Note: a lot of stuff has become reactive as part if this. Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make a directory commonly available Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Require id for <Select /> to prevent non-deterministic renders This was caused by global state in a 3rd party lib: "react-select". Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Specify id for all <Select /> to satisfy previous commit Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent explicit side effect in component by using existing dependency instead Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Extract instantiation of "conf" as injectables for causing side effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Introduce a legacy-helper to make gradual refactoring of inheritors of Singleton easier Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Make legacy unit tests for hotbar green and more simple by using the new legacy helper Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Temporarily kludge all unit tests green with a disclaimer about allowing side-effects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove kludge in previous commit by explicitly permitting specific side effects where old unit tests require it Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent old unit test with side effects from accessing file system Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Migrate to actual typing for di.permitSideEffects Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Prevent unit tests from failing because of non-standard method of HTML-element not present in js-dom Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Adapt integration tests to recent changes Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix code style Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix artifact from bad rebase Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Add a deprecation from a review comment Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove change that is not required Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant comment Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix code style Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant file Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix bad merge Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Improve variable name Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Tweak logger interface to be more descriptive Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make injecting legacy singleton always provide new instance Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove conditional typing when not needed Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Improve naming of variable Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove unnecessary code style changes Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove flag for causing side effects from too broad scope Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Override side-effects in unit test using injectable instead of monkey patching Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Flag some side-effects and add general overrides Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Fix unit tests in CI by removing explicit side-effect Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove explicit side-effect from getting default shell Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for getting absolute paths Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for getting absolute path to control explicit side effect Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Introduce abstraction for joining paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Switch to using abstraction for joining paths to control explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix fake implementation for join paths Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix test after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove explicit side effects from kubeconfig-syncs Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix arguments after removing explicit side effect Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make registrators not async for not being needed anymore Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Make generalCatalogEntities non-observable, as there is no requirement Co-authored-by: Janne Savolainen <janne.savolainen@live.fi> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Remove redundant code Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com> Signed-off-by: Iku-turso <mikko.aspiala@gmail.com> * Simplify logic for registering general catalog entity sources Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Add TODO Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Replace function for getting application menu items with reactive solution Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Fix typo in interface name Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove global shared state usages of hot bar store Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> * Remove redundant enum Signed-off-by: Janne Savolainen <janne.savolainen@live.fi> Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
2025-05-20 05:10:56 +00:00 · 2022-03-31 16:57:05 +03:00
1 parent ab2cd27a27
commit a277cfcf02
@@ -6,30 +6,25 @@
 import "./cluster-manager.scss";

 import React from "react";
-import { Redirect, Route, Switch } from "react-router";
+import { Redirect } from "react-router";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { StatusBar } from "../status-bar/status-bar";
-import { Catalog } from "../+catalog";
-import { Preferences } from "../+preferences";
-import { AddCluster } from "../+add-cluster";
-import { ClusterView } from "./cluster-view";
-import { GlobalPageRegistry } from "../../../extensions/registries/page-registry";
-import { Extensions } from "../+extensions";
 import { HotbarMenu } from "../hotbar/hotbar-menu";
-import { EntitySettings } from "../+entity-settings";
-import { Welcome } from "../+welcome";
-import * as routes from "../../../common/routes";
 import { DeleteClusterDialog } from "../delete-cluster-dialog";
-import { reaction } from "mobx";
-import { navigation } from "../../navigation";
-import { setEntityOnRouteMatch } from "../../api/helpers/general-active-sync";
-import { catalogURL, getPreviousTabUrl } from "../../../common/routes";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { TopBar } from "../layout/top-bar/top-bar";
 import catalogPreviousActiveTabStorageInjectable from "../+catalog/catalog-previous-active-tab-storage/catalog-previous-active-tab-storage.injectable";
+import { IComputedValue, reaction } from "mobx";
+import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
+import { setEntityOnRouteMatch } from "../../api/helpers/general-active-sync";
+import { navigation } from "../../navigation";
+import welcomeRouteInjectable from "../../../common/front-end-routing/routes/welcome/welcome-route.injectable";
+import { buildURL } from "../../../common/utils/buildUrl";

 interface Dependencies {
  catalogPreviousActiveTabStorage: { get: () => string };
+  currentRouteComponent: IComputedValue<React.ElementType>;
+  welcomeUrl: string;
 }

@observer
@@ -41,34 +36,19 @@ class NonInjectedClusterManager extends React.Component<Dependencies> {
  }

  render() {
+    const Component = this.props.currentRouteComponent.get();
+
+    if (!Component) {
+      return <Redirect exact to={this.props.welcomeUrl} />;
+    }
+
    return (
      <div className="ClusterManager">
        <TopBar />
        <main>
          <div id="lens-views" />
-          <Switch>
-            <Redirect
-              exact
-              from={catalogURL()}
-              to={getPreviousTabUrl(
-                this.props.catalogPreviousActiveTabStorage.get(),
-              )}
-            />

-            <Route component={Welcome} {...routes.welcomeRoute} />
-            <Route component={Catalog} {...routes.catalogRoute} />
-            <Route component={Preferences} {...routes.preferencesRoute} />
-            <Route component={Extensions} {...routes.extensionsRoute} />
-            <Route component={AddCluster} {...routes.addClusterRoute} />
-            <Route component={ClusterView} {...routes.clusterViewRoute} />
-            <Route component={EntitySettings} {...routes.entitySettingsRoute} />
-            {GlobalPageRegistry.getInstance()
-              .getItems()
-              .map(({ url, components: { Page }}) => (
-                <Route key={url} path={url} component={Page} />
-              ))}
-            <Redirect exact to={routes.welcomeURL()} />
-          </Switch>
+          <Component />
        </main>
        <HotbarMenu />
        <StatusBar />
@@ -78,8 +58,20 @@ class NonInjectedClusterManager extends React.Component<Dependencies> {
  }
 }

-export const ClusterManager = withInjectables<Dependencies>(NonInjectedClusterManager, {
-  getProps: di => ({
-    catalogPreviousActiveTabStorage: di.inject(catalogPreviousActiveTabStorageInjectable),
-  }),
-});
+export const ClusterManager = withInjectables<Dependencies>(
+  NonInjectedClusterManager,
+  {
+    getProps: (di) => {
+      const welcomeRoute = di.inject(welcomeRouteInjectable);
+
+      return {
+        catalogPreviousActiveTabStorage: di.inject(
+          catalogPreviousActiveTabStorageInjectable,
+        ),
+
+        currentRouteComponent: di.inject(currentRouteComponentInjectable),
+        welcomeUrl: buildURL(welcomeRoute.path),
+      };
+    },
+  },
+);
@@ -14,23 +14,28 @@ import { cssNames, IClassName } from "../../utils";
 import { Button } from "../button";
 import { Icon } from "../icon";
 import { Spinner } from "../spinner";
-import { navigate } from "../../navigation";
-import { entitySettingsURL } from "../../../common/routes";
 import type { KubeAuthUpdate } from "../../../common/cluster-types";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { requestClusterActivation } from "../../ipc";
+import type { NavigateToEntitySettings } from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import navigateToEntitySettingsInjectable from "../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";

 export interface ClusterStatusProps {
  className?: IClassName;
  cluster: Cluster;
 }

+interface Dependencies {
+  navigateToEntitySettings: NavigateToEntitySettings;
+}
+
@observer
-export class ClusterStatus extends React.Component<ClusterStatusProps> {
+class NonInjectedClusterStatus extends React.Component<ClusterStatusProps & Dependencies> {
  @observable authOutput: KubeAuthUpdate[] = [];
  @observable isReconnecting = false;

-  constructor(props: ClusterStatusProps) {
+  constructor(props: ClusterStatusProps & Dependencies) {
    super(props);
    makeObservable(this);
  }
@@ -72,12 +77,7 @@ export class ClusterStatus extends React.Component<ClusterStatusProps> {
  };

  manageProxySettings = () => {
-    navigate(entitySettingsURL({
-      params: {
-        entityId: this.cluster.id,
-      },
-      fragment: "proxy",
-    }));
+    this.props.navigateToEntitySettings(this.cluster.id, "proxy");
  };

  renderAuthenticationOutput() {
@@ -146,3 +146,14 @@ export class ClusterStatus extends React.Component<ClusterStatusProps> {
    );
  }
 }
+
+export const ClusterStatus = withInjectables<Dependencies, ClusterStatusProps>(
+  NonInjectedClusterStatus,
+
+  {
+    getProps: (di, props) => ({
+      navigateToEntitySettings: di.inject(navigateToEntitySettingsInjectable),
+      ...props,
+    }),
+  },
+);
@@ -0,0 +1,21 @@
+/**
+ * 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 { ClusterView } from "./cluster-view";
+import clusterViewRouteInjectable from "../../../common/front-end-routing/routes/cluster-view/cluster-view-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+
+const clusterViewRouteComponentInjectable = getInjectable({
+  id: "cluster-view-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(clusterViewRouteInjectable),
+    Component: ClusterView,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default clusterViewRouteComponentInjectable;
@@ -0,0 +1,23 @@
+/**
+ * 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 { computed } from "mobx";
+import routePathParametersInjectable from "../../routes/route-path-parameters.injectable";
+import clusterViewRouteInjectable from "../../../common/front-end-routing/routes/cluster-view/cluster-view-route.injectable";
+
+const clusterViewRouteParametersInjectable = getInjectable({
+  id: "cluster-view-route-parameters",
+
+  instantiate: (di) => {
+    const route = di.inject(clusterViewRouteInjectable);
+    const pathParameters = di.inject(routePathParametersInjectable, route);
+
+    return {
+      clusterId: computed(() => pathParameters.get().clusterId),
+    };
+  },
+});
+
+export default clusterViewRouteParametersInjectable;
@@ -5,32 +5,34 @@

 import "./cluster-view.scss";
 import React from "react";
-import { computed, makeObservable, reaction } from "mobx";
+import { computed, IComputedValue, makeObservable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import type { RouteComponentProps } from "react-router";
 import { ClusterStatus } from "./cluster-status";
 import { ClusterFrameHandler } from "./lens-views";
 import type { Cluster } from "../../../common/cluster/cluster";
 import { ClusterStore } from "../../../common/cluster-store/cluster-store";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { navigate } from "../../navigation";
-import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { requestClusterActivation } from "../../ipc";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import navigateToCatalogInjectable, { NavigateToCatalog } from "../../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
+import clusterViewRouteParametersInjectable from "./cluster-view-route-parameters.injectable";

-export interface ClusterViewProps extends RouteComponentProps<ClusterViewRouteParams> {
+interface Dependencies {
+  clusterId: IComputedValue<string>;
+  navigateToCatalog: NavigateToCatalog;
 }

@observer
-export class ClusterView extends React.Component<ClusterViewProps> {
+class NonInjectedClusterView extends React.Component<Dependencies> {
  private store = ClusterStore.getInstance();

-  constructor(props: ClusterViewProps) {
+  constructor(props: Dependencies) {
    super(props);
    makeObservable(this);
  }

  @computed get clusterId() {
-    return this.props.match.params.clusterId;
+    return this.props.clusterId.get();
  }

  @computed get cluster(): Cluster | undefined {
@@ -65,7 +67,7 @@ export class ClusterView extends React.Component<ClusterViewProps> {

      reaction(() => [this.cluster?.ready, this.cluster?.disconnected], ([, disconnected]) => {
        if (ClusterFrameHandler.getInstance().hasLoadedView(this.clusterId) && disconnected) {
-          navigate(catalogURL()); // redirect to catalog when active cluster get disconnected/not available
+          this.props.navigateToCatalog(); // redirect to catalog when active cluster get disconnected/not available
        }
      }),
    ]);
@@ -89,3 +91,19 @@ export class ClusterView extends React.Component<ClusterViewProps> {
    );
  }
 }
+
+export const ClusterView = withInjectables<Dependencies>(
+  NonInjectedClusterView,
+
+  {
+    getProps: (di) => {
+      const routeParameters = di.inject(clusterViewRouteParametersInjectable);
+
+      return {
+        clusterId: routeParameters.clusterId,
+        navigateToCatalog: di.inject(navigateToCatalogInjectable),
+      };
+    },
+  },
+);
+