Finish fleshing out new custom-column tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2023-02-23 15:53:02 -05:00 · 2023-02-23 15:53:02 -05:00 · 3b65009fb6
commit 3b65009fb6
parent 0f72c118f2
7 changed files with 3459 additions and 638 deletions
--- a/packages/core/src/features/catalog/snapshots/custom-columns.test.tsx.snap
+++ b/packages/core/src/features/catalog/snapshots/custom-columns.test.tsx.snap
--- a/packages/core/src/features/catalog/custom-columns.test.tsx
+++ b/packages/core/src/features/catalog/custom-columns.test.tsx
@ -33,7 +33,19 @@ describe("custom category columns for catalog", () => {
  });

  it("should show the 'Kind' column", () => {
-    expect(renderResult.queryByTestId("browse-all-category-column")).toBeInTheDocument();
+    expect(renderResult.queryByTestId("catalog-kind-column")).toBeInTheDocument();
+  });
+
+  it("should show the 'Status' column", () => {
+    expect(renderResult.queryByTestId("catalog-status-column")).toBeInTheDocument();
+  });
+
+  it("should show the 'Labels' column", () => {
+    expect(renderResult.queryByTestId("catalog-labels-column")).toBeInTheDocument();
+  });
+
+  it("should show the 'Source' column", () => {
+    expect(renderResult.queryByTestId("catalog-source-column")).toBeInTheDocument();
  });

  describe("when category is added using default colemns", () => {
@ -55,7 +67,7 @@ describe("custom category columns for catalog", () => {
      expect(renderResult.queryByTestId("catalog-list-for-browse-all")).toBeInTheDocument();
    });

-    describe.only("when the Test category tab is clicked", () => {
+    describe("when the Test category tab is clicked", () => {
      beforeEach(async () => {
        const testCategory = renderResult.getByTestId("foo.bar.bat/Test-tab");

@ -66,9 +78,213 @@ describe("custom category columns for catalog", () => {
        expect(renderResult.baseElement).toMatchSnapshot();
      });

-      it.only("shows view for category", () => {
+      it("shows view for category", () => {
        expect(renderResult.queryByTestId("catalog-list-for-Test")).toBeInTheDocument();
      });
+
+      it("does not show the 'Kind' column", () => {
+        expect(renderResult.queryByTestId("catalog-kind-column")).not.toBeInTheDocument();
+      });
+
+      it("should show the 'Status' column", () => {
+        expect(renderResult.queryByTestId("catalog-status-column")).toBeInTheDocument();
+      });
+
+      it("should show the 'Labels' column", () => {
+        expect(renderResult.queryByTestId("catalog-labels-column")).toBeInTheDocument();
+      });
+
+      it("should show the 'Source' column", () => {
+        expect(renderResult.queryByTestId("catalog-source-column")).toBeInTheDocument();
+      });
+    });
+
+    describe("when an extension is registered with additional custom columns", () => {
+      beforeEach(() => {
+        builder.extensions.enable({
+          id: "some-id",
+          name: "some-name",
+          rendererOptions: {
+            additionalCategoryColumns: [
+              {
+                group: "foo.bar.bat",
+                id: "high",
+                kind: "Test",
+                renderCell: () => "",
+                titleProps: {
+                  title: "High",
+                  "data-testid": "my-high-column",
+                },
+              },
+              {
+                group: "foo.bar",
+                id: "high",
+                kind: "Test",
+                renderCell: () => "",
+                titleProps: {
+                  title: "High2",
+                  "data-testid": "my-high2-column",
+                },
+              },
+            ],
+          },
+        });
+      });
+
+      describe("when the Test category tab is clicked", () => {
+        beforeEach(async () => {
+          const testCategory = renderResult.getByTestId("foo.bar.bat/Test-tab");
+
+          testCategory.click();
+        });
+
+        it("renders", () => {
+          expect(renderResult.baseElement).toMatchSnapshot();
+        });
+
+        it("shows view for category", () => {
+          expect(renderResult.queryByTestId("catalog-list-for-Test")).toBeInTheDocument();
+        });
+
+        it("does not show the 'Kind' column", () => {
+          expect(renderResult.queryByTestId("catalog-kind-column")).not.toBeInTheDocument();
+        });
+
+        it("should show the 'Status' column", () => {
+          expect(renderResult.queryByTestId("catalog-status-column")).toBeInTheDocument();
+        });
+
+        it("should show the 'Labels' column", () => {
+          expect(renderResult.queryByTestId("catalog-labels-column")).toBeInTheDocument();
+        });
+
+        it("should show the 'Source' column", () => {
+          expect(renderResult.queryByTestId("catalog-source-column")).toBeInTheDocument();
+        });
+
+        it("should show the additional column that matches", () => {
+          expect(renderResult.queryByTestId("my-high-column")).toBeInTheDocument();
+        });
+
+        it("should not show the additional column that does not match", () => {
+          expect(renderResult.queryByTestId("my-high2-column")).not.toBeInTheDocument();
+        });
+      });
+    });
+  });
+
+  describe("when category is added with custom columns", () => {
+    beforeEach(() => {
+      const catalogCategoryRegistry = builder.applicationWindow.only.di.inject(catalogCategoryRegistryInjectable);
+
+      catalogCategoryRegistry.add(new TestCategory([{
+        id: "foo",
+        renderCell: () => null,
+        titleProps: {
+          title: "Foo",
+          "data-testid": "my-custom-column",
+        },
+      }]));
+    });
+
+    it("renders", () => {
+      expect(renderResult.baseElement).toMatchSnapshot();
+    });
+
+    it("shows category in sidebar", () => {
+      expect(renderResult.queryByTestId("foo.bar.bat/Test-tab")).toBeInTheDocument();
+    });
+
+    it("still shows 'Browse All' view", () => {
+      expect(renderResult.queryByTestId("catalog-list-for-browse-all")).toBeInTheDocument();
+    });
+
+    describe("when the Test category tab is clicked", () => {
+      beforeEach(async () => {
+        const testCategory = renderResult.getByTestId("foo.bar.bat/Test-tab");
+
+        testCategory.click();
+      });
+
+      it("renders", () => {
+        expect(renderResult.baseElement).toMatchSnapshot();
+      });
+
+      it("shows view for category", () => {
+        expect(renderResult.queryByTestId("catalog-list-for-Test")).toBeInTheDocument();
+      });
+
+      it("does not show the 'Kind' column", () => {
+        expect(renderResult.queryByTestId("catalog-kind-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Status' column", () => {
+        expect(renderResult.queryByTestId("catalog-status-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Labels' column", () => {
+        expect(renderResult.queryByTestId("catalog-labels-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Source' column", () => {
+        expect(renderResult.queryByTestId("catalog-source-column")).not.toBeInTheDocument();
+      });
+
+      it("should show the custom column", () => {
+        expect(renderResult.queryByTestId("my-custom-column")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("when category is added without default columns", () => {
+    beforeEach(() => {
+      const catalogCategoryRegistry = builder.applicationWindow.only.di.inject(catalogCategoryRegistryInjectable);
+
+      catalogCategoryRegistry.add(new TestCategory([]));
+    });
+
+    it("renders", () => {
+      expect(renderResult.baseElement).toMatchSnapshot();
+    });
+
+    it("shows category in sidebar", () => {
+      expect(renderResult.queryByTestId("foo.bar.bat/Test-tab")).toBeInTheDocument();
+    });
+
+    it("still shows 'Browse All' view", () => {
+      expect(renderResult.queryByTestId("catalog-list-for-browse-all")).toBeInTheDocument();
+    });
+
+    describe("when the Test category tab is clicked", () => {
+      beforeEach(async () => {
+        const testCategory = renderResult.getByTestId("foo.bar.bat/Test-tab");
+
+        testCategory.click();
+      });
+
+      it("renders", () => {
+        expect(renderResult.baseElement).toMatchSnapshot();
+      });
+
+      it("shows view for category", () => {
+        expect(renderResult.queryByTestId("catalog-list-for-Test")).toBeInTheDocument();
+      });
+
+      it("does not show the 'Kind' column", () => {
+        expect(renderResult.queryByTestId("catalog-kind-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Status' column", () => {
+        expect(renderResult.queryByTestId("catalog-status-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Labels' column", () => {
+        expect(renderResult.queryByTestId("catalog-labels-column")).not.toBeInTheDocument();
+      });
+
+      it("does not the 'Source' column", () => {
+        expect(renderResult.queryByTestId("catalog-source-column")).not.toBeInTheDocument();
+      });
    });
  });
 });
--- a/packages/core/src/renderer/components/+catalog/tests/custom-columns.test.ts
+++ b/packages/core/src/renderer/components/+catalog/tests/custom-columns.test.ts
@ -1,137 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { DiContainer } from "@ogre-tools/injectable";
-import type { CatalogCategorySpec } from "../../../../common/catalog";
-import { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
-import { CatalogCategory } from "../../../api/catalog-entity";
-import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
-import type { AdditionalCategoryColumnRegistration, CategoryColumnRegistration } from "../custom-category-columns";
-import type { CategoryColumns, GetCategoryColumnsParams } from "../columns/get.injectable";
-import getCategoryColumnsInjectable from "../columns/get.injectable";
-import hotbarStoreInjectable from "../../../../common/hotbars/store.injectable";
-import extensionInjectable from "../../../../extensions/extension-loader/extension/extension.injectable";
-import currentlyInClusterFrameInjectable from "../../../routes/currently-in-cluster-frame.injectable";
-
-class TestCategory extends CatalogCategory {
-  apiVersion = "catalog.k8slens.dev/v1alpha1";
-  kind = "CatalogCategory";
-  metadata = {
-    name: "Test",
-    icon: "question_mark",
-  };
-  spec: CatalogCategorySpec = {
-    group: "foo.bar.bat",
-    names: {
-      kind: "Test",
-    },
-    versions: [],
-  };
-
-  constructor(columns?: CategoryColumnRegistration[]) {
-    super();
-    this.spec = {
-      displayColumns: columns,
-      ...this.spec,
-    };
-  }
-}
-
-describe("Custom Category Columns", () => {
-  let di: DiContainer;
-  let getCategoryColumns: (params: GetCategoryColumnsParams) => CategoryColumns;
-
-  beforeEach(() => {
-    di = getDiForUnitTesting({ doGeneralOverrides: true });
-
-    di.override(hotbarStoreInjectable, () => ({}));
-    di.override(currentlyInClusterFrameInjectable, () => false);
-
-    getCategoryColumns = di.inject(getCategoryColumnsInjectable);
-  });
-
-  describe("without extensions", () => {
-    it("should contain a kind column if activeCategory is falsy", () => {
-      expect(getCategoryColumns({ activeCategory: null }).renderTableHeader.find(elem => elem?.title === "Kind")).toBeTruthy();
-    });
-
-    it("should not contain a kind column if activeCategory is truthy", () => {
-      expect(getCategoryColumns({ activeCategory: new TestCategory() }).renderTableHeader.find(elem => elem?.title === "Kind")).toBeFalsy();
-    });
-
-    it("should include the default columns if the provided category doesn't provide any", () => {
-      expect(getCategoryColumns({ activeCategory: new TestCategory() }).renderTableHeader.find(elem => elem?.title === "Source")).toBeTruthy();
-    });
-
-    it("should not include the default columns if the provided category provides any", () => {
-      expect(getCategoryColumns({ activeCategory: new TestCategory([]) }).renderTableHeader.find(elem => elem?.title === "Source")).toBeFalsy();
-    });
-
-    it("should include the displayColumns from the provided category", () => {
-      const columns: CategoryColumnRegistration[] = [
-        {
-          id: "foo",
-          renderCell: () => null,
-          titleProps: {
-            title: "Foo",
-          },
-        },
-      ];
-
-      expect(getCategoryColumns({ activeCategory: new TestCategory(columns) }).renderTableHeader.find(elem => elem?.title === "Foo")).toBeTruthy();
-    });
-  });
-
-  describe("with extensions", () => {
-    beforeEach(() => {
-      const ext = di.inject(extensionInjectable, new (class extends LensRendererExtension {
-        additionalCategoryColumns = [
-            {
-              group: "foo.bar.bat",
-              id: "high",
-              kind: "Test",
-              renderCell: () => "",
-              titleProps: {
-                title: "High",
-              },
-            } as AdditionalCategoryColumnRegistration,
-            {
-              group: "foo.bar",
-              id: "high",
-              kind: "Test",
-              renderCell: () => "",
-              titleProps: {
-                title: "High2",
-              },
-            } as AdditionalCategoryColumnRegistration,
-        ];
-      })({
-        absolutePath: "/some-absolute-path",
-        id: "some-id",
-        isBundled: false,
-        isCompatible: true,
-        isEnabled: true,
-        manifest: {
-          engines: {
-            lens: "",
-          },
-          name: "some-extension-name",
-          version: "1.0.0",
-        },
-        manifestPath: "/some-manifest-path",
-      }));
-
-      ext.register();
-    });
-
-    it("should include columns from extensions that match", () => {
-      expect(getCategoryColumns({ activeCategory: new TestCategory() }).renderTableHeader.find(elem => elem?.title === "High")).toBeTruthy();
-    });
-
-    it("should not include columns from extensions that don't match", () => {
-      expect(getCategoryColumns({ activeCategory: new TestCategory() }).renderTableHeader.find(elem => elem?.title === "High2")).toBeFalsy();
-    });
-  });
-});
--- a/packages/core/src/renderer/components/+catalog/columns/browse-all.injectable.tsx
+++ b/packages/core/src/renderer/components/+catalog/columns/browse-all.injectable.tsx
@ -17,7 +17,7 @@ const defaultBrowseAllColumns: RegisteredAdditionalCategoryColumn[] = [
      id: "kind",
      sortBy: "kind",
      title: "Kind",
-      "data-testid": "browse-all-category-column",
+      "data-testid": "catalog-kind-column",
    },
    sortCallback: entity => entity.kind,
  },
--- a/packages/core/src/renderer/components/+catalog/columns/default-category.injectable.tsx
+++ b/packages/core/src/renderer/components/+catalog/columns/default-category.injectable.tsx
@ -25,6 +25,7 @@ const defaultCategoryColumnsInjectable = getInjectable({
          className: styles.sourceCell,
          id: "source",
          sortBy: "source",
+          "data-testid": "catalog-source-column",
        },
        sortCallback: entity => entity.getSource(),
        searchFilter: entity => `source=${entity.getSource()}`,
@ -37,6 +38,7 @@ const defaultCategoryColumnsInjectable = getInjectable({
          id: "labels",
          title: "Labels",
          className: `${styles.labelsCell} scrollable`,
+          "data-testid": "catalog-labels-column",
        },
        searchFilter: entity => KubeObject.stringifyLabels(entity.metadata.labels),
      },
@ -53,6 +55,7 @@ const defaultCategoryColumnsInjectable = getInjectable({
          className: styles.statusCell,
          id: "status",
          sortBy: "status",
+          "data-testid": "catalog-status-column",
        },
        searchFilter: entity => entity.status.phase,
        sortCallback: entity => entity.status.phase,
--- a/packages/core/src/renderer/components/+catalog/custom-category-columns.ts
+++ b/packages/core/src/renderer/components/+catalog/custom-category-columns.ts
@ -13,6 +13,7 @@ import type { TableCellProps } from "../table";
 export interface TitleCellProps {
  className?: string;
  title: string;
+  "data-testid"?: string;
 }

 export interface CategoryColumnRegistration {
--- a/packages/core/src/renderer/components/tree-view/tree-view.tsx
+++ b/packages/core/src/renderer/components/tree-view/tree-view.tsx
@ -41,7 +41,7 @@ export interface TreeItemProps {
  classes?: TreeItemClasses;
  icon?: JSX.Element;
  label: JSX.Element | string;
-  testId?: string;
+  "data-testid"?: string;
  selected?: boolean;
  onClick?: MouseEventHandler;
 }
@ -64,7 +64,7 @@ export function TreeItem(props: TreeItemProps) {
        [styles.selected]: props.selected ?? false,
      })}
      role="treeitem"
-      data-testid={props.testId}
+      data-testid={props["data-testid"]}
      onClick={props.onClick}
      onMouseOver={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
@ -92,7 +92,7 @@ export interface TreeGroupProps {
  children?: JSX.Element[] | JSX.Element;
  defaultExpanded?: boolean;
  label: JSX.Element | string;
-  testId?: string;
+  "data-testid"?: string;
  collapseIcon?: JSX.Element;
  expandIcon?: JSX.Element;
 }
@ -104,7 +104,7 @@ export function TreeGroup(props: TreeGroupProps) {
    <li
      className={cssNames(props.classes?.root, styles.treeGroup)}
      role="group"
-      data-testid={props.testId}
+      data-testid={props["data-testid"]}
    >
      <div
        className={cssNames(props.classes?.group, styles.group)}