diff --git a/packages/cluster-sidebar/src/order-of-sidebar-items.test.ts b/packages/cluster-sidebar/src/order-of-sidebar-items.test.ts new file mode 100644 index 0000000000..6d04343688 --- /dev/null +++ b/packages/cluster-sidebar/src/order-of-sidebar-items.test.ts @@ -0,0 +1,174 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { createContainer, DiContainer, getInjectable } from "@ogre-tools/injectable"; +import { computed, IComputedValue } from "mobx"; +import { noop } from "lodash/fp"; +import sidebarItemsInjectable from "./sidebar-items.injectable"; +import { SidebarItemDeclaration, sidebarItemInjectionToken } from "./tokens"; +import { registerMobX } from "@ogre-tools/injectable-extension-for-mobx"; +import { clusterSidebarFeature } from "./feature"; + +const someParentSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-parent", + instantiate: () => ({ + parentId: null, + title: "Some parent", + onClick: noop, + orderNumber: 42, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someOtherParentSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-other-parent", + instantiate: () => ({ + parentId: null, + title: "Some other parent", + onClick: noop, + orderNumber: 126, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someAnotherParentSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-another-parent", + instantiate: () => ({ + parentId: null, + title: "Some another parent", + onClick: noop, + orderNumber: 84, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someForthParentSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-forth-parent", + instantiate: () => ({ + parentId: null, + title: "Some another parent", + onClick: noop, + orderNumber: 84, + isVisible: computed(() => false), + isActive: computed(() => true), + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someChildSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-child", + instantiate: () => ({ + parentId: someParentSidebarItemInjectable.id, + title: "Some child", + onClick: noop, + orderNumber: 168, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someOtherChildSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-other-child", + instantiate: () => ({ + parentId: someParentSidebarItemInjectable.id, + title: "Some other child", + onClick: noop, + orderNumber: 252, + }), + injectionToken: sidebarItemInjectionToken, +}); + +const someAnotherChildSidebarItemInjectable = getInjectable({ + id: "sidebar-item-some-another-child", + instantiate: () => ({ + parentId: someParentSidebarItemInjectable.id, + title: "Some another child", + onClick: noop, + orderNumber: 210, + }), + injectionToken: sidebarItemInjectionToken, +}); + +describe("order of sidebar items", () => { + let di: DiContainer; + let sidebarItems: IComputedValue; + + beforeEach(() => { + di = createContainer("test"); + + di.register( + someParentSidebarItemInjectable, + someOtherParentSidebarItemInjectable, + someAnotherParentSidebarItemInjectable, + someChildSidebarItemInjectable, + someOtherChildSidebarItemInjectable, + someAnotherChildSidebarItemInjectable, + someForthParentSidebarItemInjectable, + ); + + clusterSidebarFeature.register(di); + registerMobX(di); + + sidebarItems = di.inject(sidebarItemsInjectable); + }); + + it("has parent items in order", () => { + const actual = sidebarItems.get().map((item) => item.id); + + expect(actual).toEqual([ + "sidebar-item-some-parent", + "sidebar-item-some-another-parent", + "sidebar-item-some-forth-parent", + "sidebar-item-some-other-parent", + ]); + }); + + it("an item with no children and no isVisible configuration by default is visible", () => { + const item = sidebarItems.get().find((item) => item.id === someAnotherParentSidebarItemInjectable.id); + + expect(item?.isVisible.get()).toBe(true); + }); + + it("an item with no children and an isVisible configuration is whatever the configuration specifies", () => { + const item = sidebarItems.get().find((item) => item.id === someForthParentSidebarItemInjectable.id); + + expect(item?.isVisible.get()).toBe(false); + }); + + it("an item with children is visible if at least one of the children is visible", () => { + const item = sidebarItems.get().find((item) => item.id === "sidebar-item-some-parent"); + + expect(item?.isVisible.get()).toBe(true); + }); + + it("an item with no children and no isActive configuration by default is not active", () => { + const item = sidebarItems.get().find((item) => item.id === someAnotherParentSidebarItemInjectable.id); + + expect(item?.isActive.get()).toBe(false); + }); + + it("an item with no children and an isActive configuration is whatever the configuration specifies", () => { + const item = sidebarItems.get().find((item) => item.id === someForthParentSidebarItemInjectable.id); + + expect(item?.isActive.get()).toBe(true); + }); + + it("an item with children is active if at least one of the children is active", () => { + const item = sidebarItems.get().find((item) => item.id === "sidebar-item-some-parent"); + + expect(item?.isActive.get()).toBe(false); + }); + + it("has child items in order", () => { + const actual = sidebarItems + .get() + .find((item) => item.id === "sidebar-item-some-parent") + ?.children.map((item) => item.id); + + expect(actual).toEqual([ + "sidebar-item-some-child", + "sidebar-item-some-another-child", + "sidebar-item-some-other-child", + ]); + }); +}); diff --git a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap index 7ec3ae37ee..d71a106fae 100644 --- a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap +++ b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap @@ -78,7 +78,7 @@ exports[`cluster - custom resources in sidebar renders 1`] = ` @@ -519,7 +519,7 @@ exports[`cluster - custom resources in sidebar when custom resource definitions @@ -996,7 +996,7 @@ exports[`cluster - custom resources in sidebar when custom resource exists rende @@ -1437,7 +1437,7 @@ exports[`cluster - custom resources in sidebar when custom resource exists when @@ -1914,7 +1914,7 @@ exports[`cluster - custom resources in sidebar when custom resource exists when @@ -2084,7 +2084,7 @@ exports[`cluster - custom resources in sidebar when custom resource exists when