Finish fleshing out new custom-column tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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();
+      });
     });
   });
 });

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();
-    });
-  });
-});

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,
   },

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,

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 {

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)}