diff --git a/assets/js/common/Select/Select.jsx b/assets/js/common/Select/Select.jsx
index da2610bd83..eb509899ae 100644
--- a/assets/js/common/Select/Select.jsx
+++ b/assets/js/common/Select/Select.jsx
@@ -4,13 +4,16 @@ import { Listbox, Transition } from '@headlessui/react';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
import classNames from 'classnames';
-import { find, get } from 'lodash';
+import { find, get, isEqual } from 'lodash';
export const OPTION_ALL = 'all';
const defaultOnChange = () => {};
const defaultRenderOption = (item) => item.value;
+const deepCompareSelection = (optionValue, value) =>
+ isEqual(optionValue, value);
+
function Select({
optionsName,
options,
@@ -42,6 +45,7 @@ function Select({
disabled={disabled}
value={value}
onChange={onChange}
+ by={deepCompareSelection}
>
{
});
describe('Filtering', () => {
+ const selectedIconSelector =
+ '.absolute.inset-y-0.right-2.end-1.flex.items-center.pl-3.text-green-600';
const filteringScenarios = [
{
selectedFilters: [
{
dropdown: 'providers-selection-dropdown',
option: 'AWS',
+ selectedIcon: selectedIconSelector,
},
],
expectedRequest: `${checksCatalogURL}?provider=aws`,
@@ -108,10 +111,12 @@ context('Checks catalog', () => {
{
dropdown: 'providers-selection-dropdown',
option: 'AWS',
+ selectedIcon: selectedIconSelector,
},
{
dropdown: 'targets-selection-dropdown',
option: 'Clusters',
+ selectedIcon: selectedIconSelector,
},
],
expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster`,
@@ -121,14 +126,17 @@ context('Checks catalog', () => {
{
dropdown: 'providers-selection-dropdown',
option: 'AWS',
+ selectedIcon: selectedIconSelector,
},
{
dropdown: 'targets-selection-dropdown',
option: 'Clusters',
+ selectedIcon: selectedIconSelector,
},
{
dropdown: 'cluster-types-selection-dropdown',
option: 'HANA Scale Up Perf. Opt.',
+ selectedIcon: selectedIconSelector,
},
],
expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster&cluster_type=hana_scale_up&hana_scenario=performance_optimized`,
@@ -138,14 +146,17 @@ context('Checks catalog', () => {
{
dropdown: 'providers-selection-dropdown',
option: 'AWS',
+ selectedIcon: selectedIconSelector,
},
{
dropdown: 'targets-selection-dropdown',
option: 'Clusters',
+ selectedIcon: selectedIconSelector,
},
{
dropdown: 'cluster-types-selection-dropdown',
option: 'HANA Scale Up Cost Opt.',
+ selectedIcon: selectedIconSelector,
},
],
expectedRequest: `${checksCatalogURL}?provider=aws&target_type=cluster&cluster_type=hana_scale_up&hana_scenario=cost_optimized`,
@@ -157,8 +168,10 @@ context('Checks catalog', () => {
cy.intercept(expectedRequest, {
body: { items: catalog },
}).as('request');
- selectedFilters.forEach(({ dropdown, option }) => {
+ selectedFilters.forEach(({ dropdown, option, selectedIcon }) => {
cy.get(`.${dropdown}`).click();
+ // test if the selected item has the green SVG icon rendered which shows the current selection
+ cy.get(selectedIcon).should('be.visible');
cy.get(`.${dropdown}`).get('span').contains(option).click();
});
cy.wait('@request');