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');