From ec1b88b609cc7670bf523d88c21cdefcc9bf91d8 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Wed, 24 May 2023 15:14:58 -0400 Subject: [PATCH] chore: Add more test for namespace-select-filter to cover new behaviour Signed-off-by: Sebastian Malton --- .../namespace-select-filter.test.tsx.snap | 4210 ++++++++++++++++- .../namespace-select-filter/component.tsx | 2 + .../namespace-select-filter.test.tsx | 193 +- 3 files changed, 4361 insertions(+), 44 deletions(-) diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap index b8662b5247..b06a45557f 100644 --- a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap +++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap @@ -35,6 +35,7 @@ exports[` once the subscribe resolves renders 1`] = ` once the subscribe resolves when clicked rend once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-1
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-10
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-11
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-12
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-13
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-2
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-3
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-4
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-5
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-6
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-7
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-8
once the subscribe resolves when clicked rend > once the subscribe resolves when clicked rend layers -
+
Select only test-9
once the subscribe resolves when clicked when
once the subscribe resolves when clicked when
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-2
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-1
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-10
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-11
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-12
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-13
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-3
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-4
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-5
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-6
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-7
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-8
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-9
once the subscribe resolves when clicked when
once the subscribe resolves when clicked when
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-1
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-2
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-10
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-11
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-12
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-13
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-3
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-4
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-5
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-6
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-7
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-8
once the subscribe resolves when clicked when > once the subscribe resolves when clicked when layers -
+
Select only test-9
once the subscribe resolves when clicked when
`; + +exports[` once the subscribe resolves when clicked when clicked again renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' when clicking the add to selection button for 'test-2' renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' when clicking the add to selection button for 'test-2' when clicking the 'select only' button for 'test-5' renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when typing a glob style filter into the filter input renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when clicked when typing in the filter input renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when menu expand icon is clicked renders 1`] = ` + +
+
+ + +`; + +exports[` once the subscribe resolves when menu expand icon is clicked when menu expand icon is clicked again renders 1`] = ` + +
+
+ + +`; diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx index 379232b581..1fa716ce65 100644 --- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx +++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx @@ -62,6 +62,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
@@ -184,6 +185,7 @@ const NamespaceSelectFilterRow = observer(({ index, style, data: { model, items preferredPositions: TooltipPosition.LEFT, children: `Select only ${option.value}`, }} + data-testid={`namespace-select-filter-option-${option.value}-select-only`} /> {option.value} {renderSingleOptionIcons(option.value, option, model)} diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx index 5b1ea870d8..8772ece9f1 100644 --- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx +++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx @@ -26,6 +26,7 @@ import { renderFor } from "../test-utils/renderFor"; import { NamespaceSelectFilter } from "./component"; import type { NamespaceStore } from "../namespaces/store"; import namespaceStoreInjectable from "../namespaces/store.injectable"; +import userEvent from "@testing-library/user-event"; function createNamespace(name: string): Namespace { return new Namespace({ @@ -111,6 +112,34 @@ describe("", () => { expect(result.baseElement).toMatchSnapshot(); }); + describe("when menu expand icon is clicked", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-expand-icon").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("menu is open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + describe("when menu expand icon is clicked again", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-expand-icon").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("menu is closed", () => { + expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument(); + }); + }); + }); + describe("when clicked", () => { beforeEach(() => { result.getByTestId("namespace-select-filter-input").click(); @@ -121,7 +150,11 @@ describe("", () => { }); it("opens menu", () => { - expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull(); + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + it("has all namespaces selected in the store", () => { + expect(namespaceStore.contextNamespaces.length).toBe(13); }); describe("when 'test-2' is clicked", () => { @@ -151,7 +184,7 @@ describe("", () => { }); it("shows 'test-2' as selected", () => { - expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).not.toBeNull(); + expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).toBeInTheDocument(); }); it("does not show 'test-1' as selected", () => { @@ -197,7 +230,7 @@ describe("", () => { }); it("keeps menu open", () => { - expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull(); + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); }); it("does not show 'kube-system' as selected", () => { @@ -214,7 +247,7 @@ describe("", () => { }); it("keeps menu open", () => { - expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull(); + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); }); it("'test-13' is not sorted to the top of the list", () => { @@ -243,7 +276,7 @@ describe("", () => { }); it("keeps menu open", () => { - expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull(); + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); }); }); }); @@ -294,6 +327,156 @@ describe("", () => { }); }); }); + + describe("when clicked again", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-input").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + }); + + describe("when typing in the filter input", () => { + beforeEach(() => { + userEvent.type(result.getByTestId("namespace-select-filter-input"), "1"); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + it("shows 'test-1' option", () => { + expect(result.getByTestId("namespace-select-filter-option-test-1")).toBeInTheDocument(); + }); + + it("shows 'test-10' option", () => { + expect(result.getByTestId("namespace-select-filter-option-test-10")).toBeInTheDocument(); + }); + + it("does not show 'test-2' option", () => { + expect(result.queryByTestId("namespace-select-filter-option-test-2")).not.toBeInTheDocument(); + }); + }); + + describe("when typing a glob style filter into the filter input", () => { + beforeEach(() => { + userEvent.type(result.getByTestId("namespace-select-filter-input"), "1*"); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + it("shows 'test-1' option", () => { + expect(result.getByTestId("namespace-select-filter-option-test-1")).toBeInTheDocument(); + }); + + it("shows 'test-10' option", () => { + expect(result.getByTestId("namespace-select-filter-option-test-10")).toBeInTheDocument(); + }); + + it("does not show 'test-2' option", () => { + expect(result.queryByTestId("namespace-select-filter-option-test-2")).not.toBeInTheDocument(); + }); + }); + + describe("when clicking the remove from selection button for 'test-2'", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-option-test-2-selected").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows an 'add to selection' button for 'test-2'", () => { + expect(result.getByTestId("namespace-select-filter-option-test-2-add-to-selection")).toBeInTheDocument(); + }); + + it("does not have 'test-2' as selected in the store", () => { + expect(namespaceStore.contextNamespaces.includes("test-2")).toBe(false); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + describe("when clicking the remove from selection button for 'test-3'", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-option-test-3-selected").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows an 'add to selection' button for 'test-3'", () => { + expect(result.getByTestId("namespace-select-filter-option-test-3-add-to-selection")).toBeInTheDocument(); + }); + + it("does not have 'test-3' as selected in the store", () => { + expect(namespaceStore.contextNamespaces.includes("test-3")).toBe(false); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + describe("when clicking the add to selection button for 'test-2'", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-option-test-2-add-to-selection").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("shows a 'remove from selection' button for 'test-2'", () => { + expect(result.getByTestId("namespace-select-filter-option-test-2-selected")).toBeInTheDocument(); + }); + + it("does have 'test-2' as selected in the store", () => { + expect(namespaceStore.contextNamespaces.includes("test-2")).toBe(true); + }); + + it("menu is still open", () => { + expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument(); + }); + + describe("when clicking the 'select only' button for 'test-5'", () => { + beforeEach(() => { + result.getByTestId("namespace-select-filter-option-test-5-select-only").click(); + }); + + it("renders", () => { + expect(result.baseElement).toMatchSnapshot(); + }); + + it("only has 'test-5' as selected in the store", () => { + expect(namespaceStore.contextNamespaces).toEqual(["test-5"]); + }); + + it("menu is now closed", () => { + expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument(); + }); + }); + }); + }); + }); }); }); });