chore: Add more test for namespace-select-filter to cover new behaviour

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

packages/core/src/renderer/components/namespace-select-filter/component.tsx

@@ -62,6 +62,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
       <Icon
         className="expand-icon"
         material={model.menu.isOpen.get() ? "expand_less" : "expand_more"}
+        data-testid="namespace-select-filter-expand-icon"
         onClick={model.menu.toggle}
       />
     </div>
@@ -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`}
             />
             <span className="data">{option.value}</span>
             {renderSingleOptionIcons(option.value, option, model)}

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("<NamespaceSelectFilter />", () => {
       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("<NamespaceSelectFilter />", () => {
       });
 
       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("<NamespaceSelectFilter />", () => {
           });
 
           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("<NamespaceSelectFilter />", () => {
                 });
 
                 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("<NamespaceSelectFilter />", () => {
                   });
 
                   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("<NamespaceSelectFilter />", () => {
                 });
 
                 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("<NamespaceSelectFilter />", () => {
           });
         });
       });
+
+      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();
+              });
+            });
+          });
+        });
+      });
     });
   });
 });