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

Add tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-06-21 16:25:26 -04:00
parent 4d368e93d6
commit ad8a82dc92
5 changed files with 1055 additions and 0 deletions

View File

@ -0,0 +1,868 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<NamespaceSelectFilter /> renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
All namespaces
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`<NamespaceSelectFilter /> when clicked renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control Select__control--menu-is-open css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
All namespaces
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-namespace-select-filter-listbox"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="true"
aria-haspopup="true"
aria-owns="react-select-namespace-select-filter-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Select__menu-portal css-yj2v5g"
>
<div
class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-26l3qy-menu"
id="react-select-namespace-select-filter-listbox"
>
<div
class="Select__menu-list Select__menu-list--is-multi css-4ljt47-MenuList"
>
<div
aria-disabled="false"
class="Select__option Select__option--is-focused css-1n7v3ny-option"
id="react-select-namespace-select-filter-option-0"
tabindex="-1"
>
All Namespaces
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-1"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
default
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-default-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-2"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-kube-system-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-3"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system-2
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-kube-system-2-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`<NamespaceSelectFilter /> when clicked when 'kube-system' is clicked renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
Namespace: kube-system
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`<NamespaceSelectFilter /> when clicked when 'kube-system' is clicked when clicked again renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control Select__control--menu-is-open css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
Namespace: kube-system
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-namespace-select-filter-listbox"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="true"
aria-haspopup="true"
aria-owns="react-select-namespace-select-filter-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Select__menu-portal css-yj2v5g"
>
<div
class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-26l3qy-menu"
id="react-select-namespace-select-filter-listbox"
>
<div
class="Select__menu-list Select__menu-list--is-multi css-4ljt47-MenuList"
>
<div
aria-disabled="false"
class="Select__option Select__option--is-focused css-1n7v3ny-option"
id="react-select-namespace-select-filter-option-0"
tabindex="-1"
>
All Namespaces
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-1"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-kube-system-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-2"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
default
</span>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-3"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system-2
</span>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`<NamespaceSelectFilter /> when clicked when 'kube-system' is clicked when clicked again when 'default' is clicked renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
Namespace: default
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
`;
exports[`<NamespaceSelectFilter /> when clicked when 'kube-system' is clicked when clicked again when 'default' is clicked when clicked again, then holding down multi select key, and then clicking 'kube-system-2' when 'kube-system-2' is clicked renders 1`] = `
<body>
<div>
<div
class="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
>
<div
class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-namespace-select-filter-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control Select__control--menu-is-open css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--is-multi css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-namespace-select-filter-placeholder"
>
Namespaces: default, kube-system-2
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-controls="react-select-namespace-select-filter-listbox"
aria-describedby="react-select-namespace-select-filter-placeholder"
aria-expanded="true"
aria-haspopup="true"
aria-owns="react-select-namespace-select-filter-listbox"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="namespace-select-filter"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Select__menu-portal css-yj2v5g"
>
<div
class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-26l3qy-menu"
id="react-select-namespace-select-filter-listbox"
>
<div
class="Select__menu-list Select__menu-list--is-multi css-4ljt47-MenuList"
>
<div
aria-disabled="false"
class="Select__option Select__option--is-focused css-1n7v3ny-option"
id="react-select-namespace-select-filter-option-0"
tabindex="-1"
>
All Namespaces
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-1"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
default
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-default-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-2"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system
</span>
</div>
</div>
<div
aria-disabled="false"
class="Select__option css-yt9ioa-option"
id="react-select-namespace-select-filter-option-3"
tabindex="-1"
>
<div
class="flex gaps align-center"
>
<i
class="Icon material focusable small"
>
<span
class="icon"
data-icon-name="layers"
>
layers
</span>
</i>
<span>
kube-system-2
</span>
<i
class="Icon box right material focusable small"
data-testid="namespace-select-filter-option-kube-system-2-selected"
>
<span
class="icon"
data-icon-name="check"
>
check
</span>
</i>
</div>
</div>
</div>
</div>
</div>
</body>
`;

View File

@ -70,11 +70,13 @@ export class NamespaceSelectFilterModel {
{ {
value: selectAllNamespaces, value: selectAllNamespaces,
label: "All Namespaces", label: "All Namespaces",
id: "all-namespaces",
isSelected: false, isSelected: false,
}, },
...baseOptions.map(namespace => ({ ...baseOptions.map(namespace => ({
value: namespace, value: namespace,
label: namespace, label: namespace,
id: namespace,
isSelected: selectedNames.has(namespace), isSelected: selectedNames.has(namespace),
})), })),
]; ];
@ -94,6 +96,7 @@ export class NamespaceSelectFilterModel {
small small
material="check" material="check"
className="box right" className="box right"
data-testid={`namespace-select-filter-option-${value}-selected`}
/> />
)} )}
</div> </div>

View File

@ -0,0 +1,182 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { DiContainer } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import React from "react";
import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
import { Namespace } from "../../../common/k8s-api/endpoints";
import { getDiForUnitTesting } from "../../getDiForUnitTesting";
import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
import { renderFor } from "../test-utils/renderFor";
import { NamespaceSelectFilter } from "./namespace-select-filter";
import type { NamespaceStore } from "./store";
import namespaceStoreInjectable from "./store.injectable";
function createNamespace(name: string): Namespace {
return new Namespace({
apiVersion: "v1",
kind: "Namespace",
metadata: {
name,
resourceVersion: "1",
selfLink: `/api/v1/namespaces/${name}`,
uid: `${name}-1`,
},
});
}
describe("<NamespaceSelectFilter />", () => {
let di: DiContainer;
let namespaceStore: NamespaceStore;
let result: RenderResult;
beforeEach(() => {
di = getDiForUnitTesting({ doGeneralOverrides: true });
di.override(directoryForUserDataInjectable, () => "/some-directory");
di.override(storesAndApisCanBeCreatedInjectable, () => true);
namespaceStore = di.inject(namespaceStoreInjectable);
const render = renderFor(di);
namespaceStore.items.replace([
createNamespace("default"),
createNamespace("kube-system"),
createNamespace("kube-system-2"),
]);
result = render((
<NamespaceSelectFilter id="namespace-select-filter" />
));
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
describe("when clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("opens menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
describe("when 'kube-system' is clicked", () => {
beforeEach(() => {
result.getByText("kube-system").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'kube-system' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["kube-system"]);
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
describe("when clicked again", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("shows 'kube-system' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-kube-system-selected")).not.toBeNull();
});
it("does not show 'default' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-default-selected")).toBeNull();
});
describe("when 'default' is clicked", () => {
beforeEach(() => {
result.getByText("default").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'default' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["default"]);
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
describe("when clicked again, then holding down multi select key, and then clicking 'kube-system-2'", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
filter.click();
fireEvent.keyDown(filter, { key: "Meta" });
});
describe("when 'kube-system-2' is clicked", () => {
beforeEach(() => {
result.getByText("kube-system-2").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has both 'default' and 'kube-system-2' as selected in the store", () => {
expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["default", "kube-system-2"]));
});
it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
it("does not show 'kube-system' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-kube-system-selected")).toBeNull();
});
describe("when releasing multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
});
});
describe("when releasing multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
});
});
});
});
});
});
});

View File

@ -30,6 +30,7 @@ const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies &
onKeyDown={model.onKeyDown} onKeyDown={model.onKeyDown}
onClick={model.onClick} onClick={model.onClick}
className="NamespaceSelectFilterParent" className="NamespaceSelectFilterParent"
data-testid="namespace-select-filter"
> >
<Select<string | SelectAllNamespaces, NamespaceSelectFilterOption, true> <Select<string | SelectAllNamespaces, NamespaceSelectFilterOption, true>
id={id} id={id}

View File

@ -25,6 +25,7 @@ export interface SelectOption<Value> {
label: React.ReactNode; label: React.ReactNode;
isDisabled?: boolean; isDisabled?: boolean;
isSelected?: boolean; isSelected?: boolean;
id?: string;
} }
/** /**