chore: Simplify extension dependency injection

- Has better typing
- Removes use of unnusual unique symbol
- Fix welcome banner tests
    - Update associated snapshots
- Start converting custom column tests to use ApplicationBuilder
- Remove old and unnused RecursiveTreeView
- Introduce new TreeView for use in CatalogMenu to fix tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton committed 2023-04-06 09:05:27 -04:00
1 parent 5db8fc1342
commit 82bf67cc9e
70 files changed
+7110 -2945

No files matched your search

@@ -81,6 +81,7 @@ exports[`extension special characters in page registrations renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -81,6 +81,7 @@ exports[`navigate to extension page renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -81,6 +81,7 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -6,7 +6,6 @@ import { computed } from "mobx";
import type { Injectable } from "@ogre-tools/injectable";
import { getInjectable } from "@ogre-tools/injectable";
import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token";
import type { LensExtension } from "../../../extensions/lens-extension";
import type { LensMainExtension } from "../../../extensions/lens-main-extension";
import type {
ApplicationMenuItemTypes,
@@ -25,7 +24,7 @@ const applicationMenuItemRegistratorInjectable = getInjectable({
const logError = di.inject(logErrorInjectable);
const toRecursedInjectables = toRecursedInjectablesFor(logError);
return (ext: LensExtension) => {
return (ext) => {
const mainExtension = ext as LensMainExtension;
return computed(() => {
@@ -82,6 +82,7 @@ exports[`installing update when started renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -367,6 +368,7 @@ exports[`installing update when started when user checks for updates renders 1`]
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -652,6 +654,7 @@ exports[`installing update when started when user checks for updates when new up
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -937,6 +940,7 @@ exports[`installing update when started when user checks for updates when new up
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1247,6 +1251,7 @@ exports[`installing update when started when user checks for updates when new up
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1557,6 +1562,7 @@ exports[`installing update when started when user checks for updates when new up
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1867,6 +1873,7 @@ exports[`installing update when started when user checks for updates when new up
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -2152,6 +2159,7 @@ exports[`installing update when started when user checks for updates when no new
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -107,6 +107,7 @@ exports[`encourage user to update when sufficient time passed since update was d
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -392,6 +393,7 @@ exports[`encourage user to update when sufficient time passed since update was d
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`installing update using tray when started renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -367,6 +368,7 @@ exports[`installing update using tray when started when user checks for updates
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -652,6 +654,7 @@ exports[`installing update using tray when started when user checks for updates
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -937,6 +940,7 @@ exports[`installing update using tray when started when user checks for updates
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1247,6 +1251,7 @@ exports[`installing update using tray when started when user checks for updates
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1532,6 +1537,7 @@ exports[`installing update using tray when started when user checks for updates
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -107,6 +107,7 @@ exports[`force user to update when too long since update was downloaded when app
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -417,6 +418,7 @@ exports[`force user to update when too long since update was downloaded when app
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -774,6 +776,7 @@ exports[`force user to update when too long since update was downloaded when app
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`periodical checking of updates given updater is enabled and configurati
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`selection of update stability when started renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
File diff suppressed because it is too large. Load diff
@@ -89,41 +89,35 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
Catalog
</div>
<ul
aria-multiselectable="false"
class="MuiTreeView-root"
class="treeView"
role="tree"
>
<li
aria-selected="true"
class="MuiTreeItem-root Mui-selected"
class="root selected treeItem"
data-testid="*-tab"
role="treeitem"
tabindex="0"
>
<div
class="MuiTreeItem-content"
class="iconContainer"
/>
<div
class="label"
>
<div
class="MuiTreeItem-iconContainer"
/>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
Browse
</div>
Browse
</div>
</li>
<div
class="HorizontalLine size-xxs"
/>
<li
aria-expanded="true"
class="MuiTreeItem-root bordered Mui-expanded"
role="treeitem"
tabindex="-1"
class="root treeGroup"
role="group"
>
<div
class="MuiTreeItem-content"
class="group"
>
<div
class="MuiTreeItem-iconContainer"
class="iconContainer"
>
<i
class="Icon material focusable"
@@ -137,7 +131,7 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
class="label"
>
<div
class="parent"
@@ -147,160 +141,130 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</div>
</div>
<ul
class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
role="group"
style="min-height: 0px;"
class="contents expanded"
>
<div
class="MuiCollapse-wrapper"
<li
class="root treeItem"
data-testid="entity.k8slens.dev/General-tab"
role="treeitem"
>
<div
class="MuiCollapse-wrapperInner"
class="iconContainer"
>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/General-tab"
role="treeitem"
tabindex="-1"
<i
class="Icon material focusable small"
>
<div
class="MuiTreeItem-content"
<span
class="icon"
data-icon-name="settings"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="settings"
>
settings
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
General
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/KubernetesCluster-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon focusable small"
>
<span
class="icon"
data-icon-name=""
/>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
Clusters
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/WebLink-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="public"
>
public
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
Web Links
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/Mock-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="gear"
>
gear
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
mock
</div>
</div>
</div>
</div>
</li>
settings
</span>
</i>
</div>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
General
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/KubernetesCluster-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon focusable small"
>
<span
class="icon"
data-icon-name=""
/>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
Clusters
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/WebLink-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="public"
>
public
</span>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
Web Links
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/Mock-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="gear"
>
gear
</span>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
mock
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
@@ -392,6 +356,7 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</div>
<div
class="TableCell nowrap sorting"
data-testid="catalog-kind-column"
id="kind"
>
<div
@@ -412,6 +377,7 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</div>
<div
class="TableCell sourceCell nowrap sorting"
data-testid="catalog-source-column"
id="source"
>
<div
@@ -432,6 +398,7 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</div>
<div
class="TableCell labelsCell scrollable nowrap"
data-testid="catalog-labels-column"
id="labels"
>
<div
@@ -442,6 +409,7 @@ exports[`entity running technical tests when navigated to catalog renders 1`] =
</div>
<div
class="TableCell statusCell nowrap sorting"
data-testid="catalog-status-column"
id="status"
>
<div
@@ -805,41 +773,35 @@ exports[`entity running technical tests when navigated to catalog when details p
Catalog
</div>
<ul
aria-multiselectable="false"
class="MuiTreeView-root"
class="treeView"
role="tree"
>
<li
aria-selected="true"
class="MuiTreeItem-root Mui-selected"
class="root selected treeItem"
data-testid="*-tab"
role="treeitem"
tabindex="0"
>
<div
class="MuiTreeItem-content"
class="iconContainer"
/>
<div
class="label"
>
<div
class="MuiTreeItem-iconContainer"
/>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
Browse
</div>
Browse
</div>
</li>
<div
class="HorizontalLine size-xxs"
/>
<li
aria-expanded="true"
class="MuiTreeItem-root bordered Mui-expanded"
role="treeitem"
tabindex="-1"
class="root treeGroup"
role="group"
>
<div
class="MuiTreeItem-content"
class="group"
>
<div
class="MuiTreeItem-iconContainer"
class="iconContainer"
>
<i
class="Icon material focusable"
@@ -853,7 +815,7 @@ exports[`entity running technical tests when navigated to catalog when details p
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
class="label"
>
<div
class="parent"
@@ -863,160 +825,130 @@ exports[`entity running technical tests when navigated to catalog when details p
</div>
</div>
<ul
class="MuiCollapse-root MuiTreeItem-group MuiCollapse-entered"
role="group"
style="min-height: 0px;"
class="contents expanded"
>
<div
class="MuiCollapse-wrapper"
<li
class="root treeItem"
data-testid="entity.k8slens.dev/General-tab"
role="treeitem"
>
<div
class="MuiCollapse-wrapperInner"
class="iconContainer"
>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/General-tab"
role="treeitem"
tabindex="-1"
<i
class="Icon material focusable small"
>
<div
class="MuiTreeItem-content"
<span
class="icon"
data-icon-name="settings"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="settings"
>
settings
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
General
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/KubernetesCluster-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon focusable small"
>
<span
class="icon"
data-icon-name=""
/>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
Clusters
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/WebLink-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="public"
>
public
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
Web Links
</div>
</div>
</div>
</div>
</li>
<li
class="MuiTreeItem-root"
data-testid="entity.k8slens.dev/Mock-tab"
role="treeitem"
tabindex="-1"
>
<div
class="MuiTreeItem-content"
>
<div
class="MuiTreeItem-iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="gear"
>
gear
</span>
</i>
</div>
<div
class="MuiTypography-root MuiTreeItem-label MuiTypography-body1"
>
<div
class="flex"
>
<div>
mock
</div>
</div>
</div>
</div>
</li>
settings
</span>
</i>
</div>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
General
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/KubernetesCluster-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon focusable small"
>
<span
class="icon"
data-icon-name=""
/>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
Clusters
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/WebLink-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="public"
>
public
</span>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
Web Links
</div>
</div>
</div>
</li>
<li
class="root treeItem"
data-testid="entity.k8slens.dev/Mock-tab"
role="treeitem"
>
<div
class="iconContainer"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="gear"
>
gear
</span>
</i>
</div>
<div
class="label"
>
<div
class="flex"
>
<div>
mock
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
@@ -1108,6 +1040,7 @@ exports[`entity running technical tests when navigated to catalog when details p
</div>
<div
class="TableCell nowrap sorting"
data-testid="catalog-kind-column"
id="kind"
>
<div
@@ -1128,6 +1061,7 @@ exports[`entity running technical tests when navigated to catalog when details p
</div>
<div
class="TableCell sourceCell nowrap sorting"
data-testid="catalog-source-column"
id="source"
>
<div
@@ -1148,6 +1082,7 @@ exports[`entity running technical tests when navigated to catalog when details p
</div>
<div
class="TableCell labelsCell scrollable nowrap"
data-testid="catalog-labels-column"
id="labels"
>
<div
@@ -1158,6 +1093,7 @@ exports[`entity running technical tests when navigated to catalog when details p
</div>
<div
class="TableCell statusCell nowrap sorting"
data-testid="catalog-status-column"
id="status"
>
<div
File diff suppressed because it is too large. Load diff
@@ -0,0 +1,314 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import { CatalogCategory, type CatalogCategorySpec, type CategoryColumnRegistration } from "../../common/catalog";
import catalogCategoryRegistryInjectable from "../../common/catalog/category-registry.injectable";
import navigateToCatalogInjectable from "../../common/front-end-routing/routes/catalog/navigate-to-catalog.injectable";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("custom category columns for catalog", () => {
let builder: ApplicationBuilder;
let renderResult: RenderResult;
beforeEach(async () => {
builder = getApplicationBuilder();
renderResult = await builder.render();
const navigateToCatalog = builder.applicationWindow.only.di.inject(navigateToCatalogInjectable);
navigateToCatalog();
});
it("renders", () => {
expect(renderResult.baseElement).toMatchSnapshot();
});
it("shows 'Browse All' view", () => {
expect(renderResult.queryByTestId("catalog-list-for-browse-all")).toBeInTheDocument();
});
it("should show the 'Kind' column", () => {
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", () => {
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("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();
});
});
});
});
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,
};
}
}
@@ -173,6 +173,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -549,6 +550,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -925,6 +927,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1313,6 +1316,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1598,6 +1602,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1883,6 +1888,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -2168,6 +2174,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -2465,6 +2472,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`Showing correct entity settings renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -81,6 +81,7 @@ exports[`extensions - navigation using application menu renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -81,6 +81,7 @@ exports[`preferences - navigation using application menu renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`show-about-using-tray renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`status-bar-items-originating-from-extensions when application starts wh
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -82,6 +82,7 @@ exports[`extendability-using-extension-api given an extension with a weakly type
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -376,6 +377,7 @@ exports[`extendability-using-extension-api given an extension with top-bar items
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -661,6 +663,7 @@ exports[`extendability-using-extension-api given an extension with top-bar items
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -946,6 +949,7 @@ exports[`extendability-using-extension-api renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -81,6 +81,7 @@ exports[`welcome - navigation using application menu renders 1`] = `
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -1116,6 +1117,7 @@ exports[`welcome - navigation using application menu when navigated somewhere el
>
<i
class="Icon logo svg focusable"
data-testid="no-welcome-banners-icon"
>
<span
class="icon"
@@ -0,0 +1,91 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import React from "react";
import type { RenderResult } from "@testing-library/react";
import { screen } from "@testing-library/react";
import { defaultWidth } from "../../renderer/components/+welcome/welcome";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
describe("Banners from extensions", () => {
let builder: ApplicationBuilder;
let renderResult: RenderResult;
beforeEach(async () => {
builder = getApplicationBuilder();
renderResult = await builder.render();
});
it("initially renderes welcome page", () => {
expect(renderResult.queryByTestId("welcome-page")).toBeInTheDocument();
});
it("shows the empty welcome banner icon", () => {
expect(renderResult.queryByTestId("no-welcome-banners-icon")).toBeInTheDocument();
});
describe("when an extension is enabled with a single welcome banner", () => {
beforeEach(() => {
builder.extensions.enable({
id: "some-id",
name: "some-name",
rendererOptions: {
welcomeBanners: [
{
Banner: () => <div data-testid="some-test-id" />,
},
],
},
});
});
it("renders the banner from the extension", () => {
expect(renderResult.queryByTestId("some-test-id")).toBeInTheDocument();
});
it("no longer shows the empty welcome banner icon", () => {
expect(renderResult.queryByTestId("no-welcome-banners-icon")).not.toBeInTheDocument();
});
});
describe("when an extension is enabled with multiple banners with custom widths", () => {
beforeEach(() => {
builder.extensions.enable({
id: "some-id",
name: "some-name",
rendererOptions: {
welcomeBanners: [
{
width: 100,
Banner: () => <div />,
},
{
width: 800,
Banner: () => <div />,
},
],
},
});
});
it("no longer shows the empty welcome banner icon", () => {
expect(renderResult.queryByTestId("no-welcome-banners-icon")).not.toBeInTheDocument();
});
it("computes an opropriate width for the carosel", () => {
expect(screen.queryByTestId("welcome-banner-container")).toHaveStyle({
// should take the max width of the banners (if > defaultWidth)
width: `800px`,
});
expect(screen.queryByTestId("welcome-text-container")).toHaveStyle({
width: `${defaultWidth}px`,
});
expect(screen.queryByTestId("welcome-menu-container")).toHaveStyle({
width: `${defaultWidth}px`,
});
});
});
});