From 3b65009fb622f38f77b07d8205cd14eed6ffc4e3 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Thu, 23 Feb 2023 15:53:02 -0500 Subject: [PATCH] Finish fleshing out new custom-column tests Signed-off-by: Sebastian Malton --- .../custom-columns.test.tsx.snap | 3724 ++++++++++++++--- .../features/catalog/custom-columns.test.tsx | 222 +- .../+catalog/__tests__/custom-columns.test.ts | 137 - .../columns/browse-all.injectable.tsx | 2 +- .../columns/default-category.injectable.tsx | 3 + .../+catalog/custom-category-columns.ts | 1 + .../components/tree-view/tree-view.tsx | 8 +- 7 files changed, 3459 insertions(+), 638 deletions(-) delete mode 100644 packages/core/src/renderer/components/+catalog/__tests__/custom-columns.test.ts diff --git a/packages/core/src/features/catalog/__snapshots__/custom-columns.test.tsx.snap b/packages/core/src/features/catalog/__snapshots__/custom-columns.test.tsx.snap index e97ed826d7..ae238a45ae 100644 --- a/packages/core/src/features/catalog/__snapshots__/custom-columns.test.tsx.snap +++ b/packages/core/src/features/catalog/__snapshots__/custom-columns.test.tsx.snap @@ -89,41 +89,35 @@ exports[`custom category columns for catalog renders 1`] = ` Catalog @@ -356,7 +325,7 @@ exports[`custom category columns for catalog renders 1`] = `
  • +
    -
    -
    - Browse -
    + Browse
  • +
    • -
      -
    • -
      -
      - - - settings - - -
      -
      -
      -
      - General -
      -
      -
      -
      -
    • -
    • -
      -
      - - - -
      -
      -
      -
      - Clusters -
      -
      -
      -
      -
    • -
    • -
      -
      - - - public - - -
      -
      -
      -
      - Web Links -
      -
      -
      -
      -
    • -
    • -
      -
      - - - question_mark - - -
      -
      -
      -
      - Test -
      -
      -
      -
      -
    • + settings + +
      -
      +
      +
      +
      + General +
      +
      +
      + +
    • +
      + + + +
      +
      +
      +
      + Clusters +
      +
      +
      +
    • +
    • +
      + + + public + + +
      +
      +
      +
      + Web Links +
      +
      +
      +
    • +
    • +
      + + + question_mark + + +
      +
      +
      +
      + Test +
      +
      +
      +
@@ -989,7 +925,7 @@ exports[`custom category columns for catalog when category is added using defaul
`; +exports[`custom category columns for catalog when category is added using default colemns when an extension is registered with additional custom columns when the Test category tab is clicked renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + exports[`custom category columns for catalog when category is added using default colemns when the Test category tab is clicked renders 1`] = `
@@ -1319,41 +1848,35 @@ exports[`custom category columns for catalog when category is added using defaul Catalog
  • +
    -
    -
    - Browse -
    + Browse
  • +
    • -
      -
    • -
      -
      - - - settings - - -
      -
      -
      -
      - General -
      -
      -
      -
      -
    • -
    • -
      -
      - - - -
      -
      -
      -
      - Clusters -
      -
      -
      -
      -
    • -
    • -
      -
      - - - public - - -
      -
      -
      -
      - Web Links -
      -
      -
      -
      -
    • -
    • -
      -
      - - - question_mark - - -
      -
      -
      -
      - Test -
      -
      -
      -
      -
    • + settings + +
      -
      +
      +
      +
      + General +
      +
      +
      + +
    • +
      + + + +
      +
      +
      +
      + Clusters +
      +
      +
      +
    • +
    • +
      + + + public + + +
      +
      +
      +
      + Web Links +
      +
      +
      +
    • +
    • +
      + + + question_mark + + +
      +
      +
      +
      + Test +
      +
      +
      +
@@ -1547,7 +2040,7 @@ exports[`custom category columns for catalog when category is added using defaul >
- Browse All + Test
-
-
- Kind -
- - - arrow_drop_down - - -
`; + +exports[`custom category columns for catalog when category is added with custom columns renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[`custom category columns for catalog when category is added with custom columns when the Test category tab is clicked renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[`custom category columns for catalog when category is added without default columns renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; + +exports[`custom category columns for catalog when category is added without default columns when the Test category tab is clicked renders 1`] = ` + +
+
+
+
+
+ + + home + + +
+
+
+ + + arrow_back + + +
+
+
+ + + arrow_forward + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ca +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + arrow_left + + +
+
+ 1 +
+
+ + + arrow_right + + +
+
+
+
+
+
+
+
+
+ +`; diff --git a/packages/core/src/features/catalog/custom-columns.test.tsx b/packages/core/src/features/catalog/custom-columns.test.tsx index 4cf0cefc8c..19c2bf83dc 100644 --- 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(); + }); }); }); }); diff --git a/packages/core/src/renderer/components/+catalog/__tests__/custom-columns.test.ts b/packages/core/src/renderer/components/+catalog/__tests__/custom-columns.test.ts deleted file mode 100644 index 8f02be6755..0000000000 --- a/packages/core/src/renderer/components/+catalog/__tests__/custom-columns.test.ts +++ /dev/null @@ -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(); - }); - }); -}); diff --git a/packages/core/src/renderer/components/+catalog/columns/browse-all.injectable.tsx b/packages/core/src/renderer/components/+catalog/columns/browse-all.injectable.tsx index 8d1c4b9315..12890dcd06 100644 --- 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, }, diff --git a/packages/core/src/renderer/components/+catalog/columns/default-category.injectable.tsx b/packages/core/src/renderer/components/+catalog/columns/default-category.injectable.tsx index 00df70cdbc..9d2af2a5f3 100644 --- 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, diff --git a/packages/core/src/renderer/components/+catalog/custom-category-columns.ts b/packages/core/src/renderer/components/+catalog/custom-category-columns.ts index 007ca75223..801d68832e 100644 --- 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 { diff --git a/packages/core/src/renderer/components/tree-view/tree-view.tsx b/packages/core/src/renderer/components/tree-view/tree-view.tsx index 63bfc34de3..4384357cde 100644 --- 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) {