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
@@ -13,19 +13,14 @@ import { cssNames } from "../../utils";
 import { Notifications } from "../notifications";
 import { Button } from "../button";
 import type { ForwardedPort } from "../../port-forward";
-import {
-  aboutPortForwarding,
-  notifyErrorPortForwarding,
-  openPortForward,
-  PortForwardStore,
-  predictProtocol,
-} from "../../port-forward";
-
+import { openPortForward, PortForwardStore, predictProtocol } from "../../port-forward";
 import { Spinner } from "../spinner";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import portForwardStoreInjectable from "../../port-forward/port-forward-store/port-forward-store.injectable";
 import portForwardDialogModelInjectable from "../../port-forward/port-forward-dialog-model/port-forward-dialog-model.injectable";
 import logger from "../../../common/logger";
+import aboutPortForwardingInjectable from "../../port-forward/about-port-forwarding.injectable";
+import notifyErrorPortForwardingInjectable from "../../port-forward/notify-error-port-forwarding.injectable";

 export interface PodContainerPortProps {
  pod: Pod;
@@ -39,6 +34,8 @@ export interface PodContainerPortProps {
 interface Dependencies {
  portForwardStore: PortForwardStore;
  openPortForwardDialog: (item: ForwardedPort, options: { openInBrowser: boolean; onClose: () => void }) => void;
+  aboutPortForwarding: () => void;
+  notifyErrorPortForwarding: (message: string) => void;
 }

@observer
@@ -119,10 +116,10 @@ class NonInjectedPodContainerPort extends React.Component<PodContainerPortProps

        // if this is the first port-forward show the about notification
        if (!length) {
-          aboutPortForwarding();
+          this.props.aboutPortForwarding();
        }
      } else {
-        notifyErrorPortForwarding(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
+        this.props.notifyErrorPortForwarding(`Error occurred starting port-forward, the local port may not be available or the ${portForward.kind} ${portForward.name} may not be reachable`);
      }
    } catch (error) {
      logger.error("[POD-CONTAINER-PORT]:", error, portForward);
@@ -199,6 +196,8 @@ export const PodContainerPort = withInjectables<Dependencies, PodContainerPortPr
    getProps: (di, props) => ({
      portForwardStore: di.inject(portForwardStoreInjectable),
      openPortForwardDialog: di.inject(portForwardDialogModelInjectable).open,
+      aboutPortForwarding: di.inject(aboutPortForwardingInjectable),
+      notifyErrorPortForwarding: di.inject(notifyErrorPortForwardingInjectable),
      ...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 { Pods } from "./pods";
+import podsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/pods-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+
+const podsRouteComponentInjectable = getInjectable({
+  id: "pods-route-component",
+
+  instantiate: (di) => ({
+    route: di.inject(podsRouteInjectable),
+    Component: Pods,
+  }),
+
+  injectionToken: routeSpecificComponentInjectionToken,
+});
+
+export default podsRouteComponentInjectable;
@@ -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 podsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/pods-route.injectable";
+import { workloadsSidebarItemId } from "../+workloads/workloads-sidebar-items.injectable";
+import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import navigateToPodsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/navigate-to-pods.injectable";
+
+const podsSidebarItemsInjectable = getInjectable({
+  id: "pods-sidebar-items",
+
+  instantiate: (di) => {
+    const route = di.inject(podsRouteInjectable);
+    const navigateToPods = di.inject(navigateToPodsInjectable);
+    const routeIsActive = di.inject(routeIsActiveInjectable, route);
+
+    return computed(() => [
+      {
+        id: "pods",
+        parentId: workloadsSidebarItemId,
+        title: "Pods",
+        onClick: navigateToPods,
+        isActive: routeIsActive,
+        isVisible: route.isEnabled,
+        orderNumber: 20,
+      },
+    ]);
+  },
+
+  injectionToken: sidebarItemsInjectionToken,
+});
+
+export default podsSidebarItemsInjectable;
@@ -0,0 +1,14 @@
+/**
+ * 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 { podsStore } from "./pods.store";
+
+const podsStoreInjectable = getInjectable({
+  id: "pods-store",
+  instantiate: () => podsStore,
+  causesSideEffects: true,
+});
+
+export default podsStoreInjectable;
@@ -9,7 +9,6 @@ import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { podsStore } from "./pods.store";
-import type { RouteComponentProps } from "react-router";
 import { eventStore } from "../+events/event.store";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { nodesApi, Pod } from "../../../common/k8s-api/endpoints";
@@ -21,8 +20,8 @@ import kebabCase from "lodash/kebabCase";
 import { apiManager } from "../../../common/k8s-api/api-manager";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { Badge } from "../badge";
-import type { PodsRouteParams } 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 {
@@ -37,11 +36,8 @@ enum columnId {
  status = "status",
 }

-export interface PodsProps extends RouteComponentProps<PodsRouteParams> {
-}
-
@observer
-export class Pods extends React.Component<PodsProps> {
+export class Pods extends React.Component {
  renderContainersStatus(pod: Pod) {
    return pod.getContainerStatuses().map(containerStatus => {
      const { name, state, ready } = containerStatus;
@@ -76,72 +72,74 @@ export class Pods extends React.Component<PodsProps> {

  render() {
    return (
-      <KubeObjectListLayout
-        className="Pods"
-        store={podsStore}
-        dependentStores={[eventStore]} // status icon component uses event store
-        tableId = "workloads_pods"
-        isConfigurable
-        sortingCallbacks={{
-          [columnId.name]: pod => getConvertedParts(pod.getName()),
-          [columnId.namespace]: pod => pod.getNs(),
-          [columnId.containers]: pod => pod.getContainers().length,
-          [columnId.restarts]: pod => pod.getRestartsCount(),
-          [columnId.owners]: pod => pod.getOwnerRefs().map(ref => ref.kind),
-          [columnId.qos]: pod => pod.getQosClass(),
-          [columnId.node]: pod => pod.getNodeName(),
-          [columnId.age]: pod => -pod.getCreationTimestamp(),
-          [columnId.status]: pod => pod.getStatusMessage(),
-        }}
-        searchFilters={[
-          pod => pod.getSearchFields(),
-          pod => pod.getStatusMessage(),
-          pod => pod.status.podIP,
-          pod => pod.getNodeName(),
-        ]}
-        renderHeaderTitle="Pods"
-        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: "Containers", className: "containers", sortBy: columnId.containers, id: columnId.containers },
-          { title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts },
-          { title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners },
-          { title: "Node", className: "node", sortBy: columnId.node, id: columnId.node },
-          { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos },
-          { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-          { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
-        ]}
-        renderTableContents={pod => [
-          <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
-          <KubeObjectStatusIcon key="icon" object={pod} />,
-          pod.getNs(),
-          this.renderContainersStatus(pod),
-          pod.getRestartsCount(),
-          pod.getOwnerRefs().map(ref => {
-            const { kind, name } = ref;
-            const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod));
+      <SiblingsInTabLayout>
+        <KubeObjectListLayout
+          className="Pods"
+          store={podsStore}
+          dependentStores={[eventStore]} // status icon component uses event store
+          tableId = "workloads_pods"
+          isConfigurable
+          sortingCallbacks={{
+            [columnId.name]: pod => getConvertedParts(pod.getName()),
+            [columnId.namespace]: pod => pod.getNs(),
+            [columnId.containers]: pod => pod.getContainers().length,
+            [columnId.restarts]: pod => pod.getRestartsCount(),
+            [columnId.owners]: pod => pod.getOwnerRefs().map(ref => ref.kind),
+            [columnId.qos]: pod => pod.getQosClass(),
+            [columnId.node]: pod => pod.getNodeName(),
+            [columnId.age]: pod => -pod.getCreationTimestamp(),
+            [columnId.status]: pod => pod.getStatusMessage(),
+          }}
+          searchFilters={[
+            pod => pod.getSearchFields(),
+            pod => pod.getStatusMessage(),
+            pod => pod.status.podIP,
+            pod => pod.getNodeName(),
+          ]}
+          renderHeaderTitle="Pods"
+          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: "Containers", className: "containers", sortBy: columnId.containers, id: columnId.containers },
+            { title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts },
+            { title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners },
+            { title: "Node", className: "node", sortBy: columnId.node, id: columnId.node },
+            { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos },
+            { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
+            { title: "Status", className: "status", sortBy: columnId.status, id: columnId.status },
+          ]}
+          renderTableContents={pod => [
+            <Badge flat key="name" label={pod.getName()} tooltip={pod.getName()} expandable={false} />,
+            <KubeObjectStatusIcon key="icon" object={pod} />,
+            pod.getNs(),
+            this.renderContainersStatus(pod),
+            pod.getRestartsCount(),
+            pod.getOwnerRefs().map(ref => {
+              const { kind, name } = ref;
+              const detailsLink = getDetailsUrl(apiManager.lookupApiLink(ref, pod));

-            return (
-              <Badge flat key={name} className="owner" tooltip={name}>
-                <Link to={detailsLink} onClick={stopPropagation}>
-                  {kind}
+              return (
+                <Badge flat key={name} className="owner" tooltip={name}>
+                  <Link to={detailsLink} onClick={stopPropagation}>
+                    {kind}
+                  </Link>
+                </Badge>
+              );
+            }),
+            pod.getNodeName() ?
+              <Badge flat key="node" className="node" tooltip={pod.getNodeName()} expandable={false}>
+                <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
+                  {pod.getNodeName()}
                </Link>
              </Badge>
-            );
-          }),
-          pod.getNodeName() ?
-            <Badge flat key="node" className="node" tooltip={pod.getNodeName()} expandable={false}>
-              <Link to={getDetailsUrl(nodesApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
-                {pod.getNodeName()}
-              </Link>
-            </Badge>
-            : "",
-          pod.getQosClass(),
-          <KubeObjectAge key="age" object={pod} />,
-          { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) },
-        ]}
-      />
+              : "",
+            pod.getQosClass(),
+            <KubeObjectAge key="age" object={pod} />,
+            { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) },
+          ]}
+        />
+      </SiblingsInTabLayout>
    );
  }
 }