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
@@ -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 { PersistentVolumeClaims } from "./volume-claims";
+import persistentVolumeClaimsRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/persistent-volume-claims-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+
+const persistentVolumeClaimsRouteComponentInjectable = getInjectable({
+  id: "persistent-volume-claims-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(persistentVolumeClaimsRouteInjectable),
+    Component: PersistentVolumeClaims,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default persistentVolumeClaimsRouteComponentInjectable;
@@ -0,0 +1,38 @@
+/**
+ * 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 persistentVolumeClaimsRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/persistent-volume-claims-route.injectable";
+import { storageSidebarItemId } from "../+storage/storage-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import navigateToPersistentVolumeClaimsInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/navigate-to-persistent-volume-claims.injectable";
+
+const persistentVolumeClaimsSidebarItemsInjectable = getInjectable({
+  id: "persistent-volume-claims-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(persistentVolumeClaimsRouteInjectable);
+    const navigateToPersistentVolumeClaims = di.inject(navigateToPersistentVolumeClaimsInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "persistent-volume-claims",
+        parentId: storageSidebarItemId,
+        title: "Persistent Volume Claims",
+        onClick: navigateToPersistentVolumeClaims,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 10,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default persistentVolumeClaimsSidebarItemsInjectable;
@@ -7,7 +7,7 @@ import "./volume-claims.scss";

 import React from "react";
 import { observer } from "mobx-react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { volumeClaimStore } from "./volume-claim.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
@@ -15,8 +15,8 @@ import { unitsToBytes } from "../../../common/utils/convertMemory";
 import { stopPropagation } from "../../utils";
 import { storageClassApi } from "../../../common/k8s-api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
-import type { VolumeClaimsRouteParams } from "../../../common/routes";
 import { getDetailsUrl } from "../kube-detail-params";
+import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";

 enum columnId {
@@ -29,68 +29,67 @@ enum columnId {
  age = "age",
 }

-export interface PersistentVolumeClaimsProps extends RouteComponentProps<VolumeClaimsRouteParams> {
-}
-
@observer
-export class PersistentVolumeClaims extends React.Component<PersistentVolumeClaimsProps> {
+export class PersistentVolumeClaims extends React.Component {
  render() {
    return (
-      <KubeObjectListLayout
-        isConfigurable
-        tableId="storage_volume_claims"
-        className="PersistentVolumeClaims"
-        store={volumeClaimStore}
-        dependentStores={[podsStore]}
-        sortingCallbacks={{
-          [columnId.name]: pvc => pvc.getName(),
-          [columnId.namespace]: pvc => pvc.getNs(),
-          [columnId.pods]: pvc => pvc.getPods(podsStore.items).map(pod => pod.getName()),
-          [columnId.status]: pvc => pvc.getStatus(),
-          [columnId.size]: pvc => unitsToBytes(pvc.getStorage()),
-          [columnId.storageClass]: pvc => pvc.spec.storageClassName,
-          [columnId.age]: pvc => -pvc.getCreationTimestamp(),
-        }}
-        searchFilters={[
-          pvc => pvc.getSearchFields(),
-          pvc => pvc.getPods(podsStore.items).map(pod => pod.getName()),
-        ]}
-        renderHeaderTitle="Persistent Volume Claims"
-        renderTableHeader={[
-          { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-          { className: "warning", showWithColumn: columnId.name },
-          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
-          { title: "Storage class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
-          { title: "Size", className: "size", sortBy: columnId.size, id: columnId.size },
-          { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
-          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
-        ]}
-        renderTableContents={pvc => {
-          const pods = pvc.getPods(podsStore.items);
-          const { storageClassName } = pvc.spec;
-          const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
-            name: storageClassName,
-          }));
+      <SiblingsInTabLayout>
+        <KubeObjectListLayout
+          isConfigurable
+          tableId="storage_volume_claims"
+          className="PersistentVolumeClaims"
+          store={volumeClaimStore}
+          dependentStores={[podsStore]}
+          sortingCallbacks={{
+            [columnId.name]: pvc => pvc.getName(),
+            [columnId.namespace]: pvc => pvc.getNs(),
+            [columnId.pods]: pvc => pvc.getPods(podsStore.items).map(pod => pod.getName()),
+            [columnId.status]: pvc => pvc.getStatus(),
+            [columnId.size]: pvc => unitsToBytes(pvc.getStorage()),
+            [columnId.storageClass]: pvc => pvc.spec.storageClassName,
+            [columnId.age]: pvc => -pvc.getCreationTimestamp(),
+          }}
+          searchFilters={[
+            pvc => pvc.getSearchFields(),
+            pvc => pvc.getPods(podsStore.items).map(pod => pod.getName()),
+          ]}
+          renderHeaderTitle="Persistent Volume Claims"
+          renderTableHeader={[
+            { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
+            { className: "warning", showWithColumn: columnId.name },
+            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            { title: "Storage class", className: "storageClass", sortBy: columnId.storageClass, id: columnId.storageClass },
+            { title: "Size", className: "size", sortBy: columnId.size, id: columnId.size },
+            { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
+          ]}
+          renderTableContents={pvc => {
+            const pods = pvc.getPods(podsStore.items);
+            const { storageClassName } = pvc.spec;
+            const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
+              name: storageClassName,
+            }));

-          return [
-            pvc.getName(),
-            <KubeObjectStatusIcon key="icon" object={pvc} />,
-            pvc.getNs(),
-            <Link key="link" to={storageClassDetailsUrl} onClick={stopPropagation}>
-              {storageClassName}
-            </Link>,
-            pvc.getStorage(),
-            pods.map(pod => (
-              <Link key={pod.getId()} to={getDetailsUrl(pod.selfLink)} onClick={stopPropagation}>
-                {pod.getName()}
-              </Link>
-            )),
-            <KubeObjectAge key="age" object={pvc} />,
-            { title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
-          ];
-        }}
-      />
+            return [
+              pvc.getName(),
+              <KubeObjectStatusIcon key="icon" object={pvc} />,
+              pvc.getNs(),
+              <Link key="link" to={storageClassDetailsUrl} onClick={stopPropagation}>
+                {storageClassName}
+              </Link>,
+              pvc.getStorage(),
+              pods.map(pod => (
+                <Link key={pod.getId()} to={getDetailsUrl(pod.selfLink)} onClick={stopPropagation}>
+                  {pod.getName()}
+                </Link>
+              )),
+              <KubeObjectAge key="age" object={pvc} />,
+              { title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
+            ];
+          }}
+        />
+      </SiblingsInTabLayout>
    );
  }
 }