1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

chore: Fixup previous namespace-select-filter unit tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2023-05-24 14:07:49 -04:00
parent ce11ef0a2e
commit fa7bc2ee6b
4 changed files with 2045 additions and 1724 deletions

View File

@ -43,6 +43,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
value={model.filterText.get()} value={model.filterText.get()}
onChange={(event) => model.filterText.set(event.target.value)} onChange={(event) => model.filterText.set(event.target.value)}
onClick={model.menu.open} onClick={model.menu.open}
data-testid="namespace-select-filter-input"
/> />
<Gradient type="left" /> <Gradient type="left" />
<label htmlFor={`${id}-filter`}> <label htmlFor={`${id}-filter`}>
@ -100,6 +101,7 @@ const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies &
{model.menu.isOpen.get() && ( {model.menu.isOpen.get() && (
<div <div
className="list-container" className="list-container"
data-testid="namespace-select-filter-list-container"
> >
<VariableSizeList <VariableSizeList
className="list" className="list"
@ -168,6 +170,7 @@ const NamespaceSelectFilterRow = observer(({ index, style, data: { model, items
"single-namespace": option.value !== selectAllNamespaces, "single-namespace": option.value !== selectAllNamespaces,
})} })}
onClick={() => model.onClick(option)} onClick={() => model.onClick(option)}
data-testid={`namespace-select-filter-option-${option.label}`}
> >
{option.value === selectAllNamespaces {option.value === selectAllNamespaces
? <span className="data">All Namespaces</span> ? <span className="data">All Namespaces</span>

View File

@ -113,7 +113,7 @@ describe("<NamespaceSelectFilter />", () => {
describe("when clicked", () => { describe("when clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByTestId("namespace-select-filter").click(); result.getByTestId("namespace-select-filter-input").click();
}); });
it("renders", () => { it("renders", () => {
@ -121,12 +121,12 @@ describe("<NamespaceSelectFilter />", () => {
}); });
it("opens menu", () => { it("opens menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull(); expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
}); });
describe("when 'test-2' is clicked", () => { describe("when 'test-2' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-2").click(); result.getByTestId("namespace-select-filter-option-test-2").click();
}); });
it("renders", () => { it("renders", () => {
@ -138,12 +138,12 @@ describe("<NamespaceSelectFilter />", () => {
}); });
it("closes menu", () => { it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull(); expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
}); });
describe("when clicked again", () => { describe("when clicked again", () => {
beforeEach(() => { beforeEach(() => {
result.getByTestId("namespace-select-filter").click(); result.getByTestId("namespace-select-filter-input").click();
}); });
it("renders", () => { it("renders", () => {
@ -160,7 +160,7 @@ describe("<NamespaceSelectFilter />", () => {
describe("when 'test-1' is clicked", () => { describe("when 'test-1' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-1").click(); result.getByTestId("namespace-select-filter-option-test-1").click();
}); });
it("renders", () => { it("renders", () => {
@ -172,12 +172,12 @@ describe("<NamespaceSelectFilter />", () => {
}); });
it("closes menu", () => { it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull(); expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
}); });
describe("when clicked again, then holding down multi select key", () => { describe("when clicked again, then holding down multi select key", () => {
beforeEach(() => { beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter"); const filter = result.getByTestId("namespace-select-filter-input");
filter.click(); filter.click();
fireEvent.keyDown(filter, { key: "Meta" }); fireEvent.keyDown(filter, { key: "Meta" });
@ -185,7 +185,7 @@ describe("<NamespaceSelectFilter />", () => {
describe("when 'test-3' is clicked", () => { describe("when 'test-3' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-3").click(); result.getByTestId("namespace-select-filter-option-test-3").click();
}); });
it("renders", () => { it("renders", () => {
@ -197,7 +197,7 @@ describe("<NamespaceSelectFilter />", () => {
}); });
it("keeps menu open", () => { it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull(); expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
}); });
it("does not show 'kube-system' as selected", () => { it("does not show 'kube-system' as selected", () => {
@ -206,42 +206,44 @@ describe("<NamespaceSelectFilter />", () => {
describe("when 'test-13' is clicked", () => { describe("when 'test-13' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-13").click(); result.getByTestId("namespace-select-filter-option-test-13").click();
}); });
it("has all of 'test-1', 'test-3', and 'test-13' selected in the store", () => { it("has all of 'test-1', 'test-3', and 'test-13' selected in the store", () => {
expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["test-1", "test-3", "test-13"])); expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["test-1", "test-3", "test-13"]));
}); });
it("'test-13' is not sorted to the top of the list", () => { it("keeps menu open", () => {
const topLevelElement = result.getByText("test-13").parentElement?.parentElement as HTMLElement; expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
});
expect(topLevelElement.previousSibling).not.toBe(null); it("'test-13' is not sorted to the top of the list", () => {
expect(result.getByTestId("namespace-select-filter-option-test-13").previousSibling).not.toBe(null);
}); });
}); });
describe("when releasing multi select key", () => { describe("when releasing multi select key", () => {
beforeEach(() => { beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter"); const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyUp(filter, { key: "Meta" }); fireEvent.keyUp(filter, { key: "Meta" });
}); });
it("closes menu", () => { it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull(); expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
}); });
}); });
}); });
describe("when releasing multi select key", () => { describe("when releasing multi select key", () => {
beforeEach(() => { beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter"); const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyUp(filter, { key: "Meta" }); fireEvent.keyUp(filter, { key: "Meta" });
}); });
it("keeps menu open", () => { it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull(); expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
}); });
}); });
}); });
@ -251,42 +253,42 @@ describe("<NamespaceSelectFilter />", () => {
describe("when multi-selection key is pressed", () => { describe("when multi-selection key is pressed", () => {
beforeEach(() => { beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter"); const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyDown(filter, { key: "Meta" }); fireEvent.keyDown(filter, { key: "Meta" });
}); });
it("should show placeholder text as 'All namespaces'", () => { it("should show placeholder text as 'All namespaces'", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).toHaveTextContent("All namespaces"); expect(result.getByTestId("namespace-select-filter")).toHaveTextContent("All namespaces");
}); });
describe("when 'test-2' is clicked", () => { describe("when 'test-2' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-2").click(); result.getByTestId("namespace-select-filter-option-test-2").click();
}); });
it("should not show placeholder text as 'All namespaces'", () => { it("should not show placeholder text as 'All namespaces'", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces"); expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
}); });
describe("when 'test-2' is clicked", () => { describe("when 'test-2' is clicked", () => {
beforeEach(() => { beforeEach(() => {
result.getByText("test-2").click(); result.getByTestId("namespace-select-filter-option-test-2").click();
}); });
it("should not show placeholder as 'All namespaces'", () => { it("should not show placeholder as 'All namespaces'", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces"); expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
}); });
describe("when multi-selection key is raised", () => { describe("when multi-selection key is raised", () => {
beforeEach(() => { beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter"); const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyUp(filter, { key: "Meta" }); fireEvent.keyUp(filter, { key: "Meta" });
}); });
it("should show placeholder text as 'All namespaces'", () => { it("should show placeholder text as 'All namespaces'", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces"); expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
}); });
}); });
}); });