fix(ui): search dropdown options case changing issue (#9745)

* fixed search dropdown options not showing the original suggestion options

* added unit tests for getSearchLabel util function
This commit is contained in:
Aniket Katkar 2023-01-18 10:43:13 +05:30 committed by GitHub
parent 35b328a5f7
commit 001e567bb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 3 deletions

View File

@ -14,9 +14,12 @@
import { SearchDropdownOption } from 'components/SearchDropdown/SearchDropdown.interface';
import {
getSearchDropdownLabels,
getSearchLabel,
getSelectedOptionLabelString,
} from './AdvancedSearchUtils';
import {
highlightedItemLabel,
mockItemLabel,
mockLongOptionsArray,
mockOptionsArray,
mockShortOptionsArray,
@ -70,4 +73,22 @@ describe('AdvancedSearchUtils tests', () => {
expect(resultOptionsString).toBe('');
});
it('Function getSearchLabel should return string with highlighted substring for matched searchKey', () => {
const resultSearchLabel = getSearchLabel(mockItemLabel, 'wa');
expect(resultSearchLabel).toBe(highlightedItemLabel);
});
it('Function getSearchLabel should return original string if searchKey is not matched', () => {
const resultSearchLabel = getSearchLabel(mockItemLabel, 'wo');
expect(resultSearchLabel).toBe(mockItemLabel);
});
it('Function getSearchLabel should return original string if searchKey is passed as an empty string', () => {
const resultSearchLabel = getSearchLabel(mockItemLabel, '');
expect(resultSearchLabel).toBe(mockItemLabel);
});
});

View File

@ -143,11 +143,15 @@ export const renderAdvanceSearchButtons: RenderSettings['renderButton'] = (
return <></>;
};
const getSearchLabel = (itemLabel: string, searchKey: string) => {
export const getSearchLabel = (itemLabel: string, searchKey: string) => {
const regex = new RegExp(searchKey, 'gi');
const result = itemLabel.replace(regex, `<mark>${searchKey}</mark>`);
if (searchKey) {
const result = itemLabel.replace(regex, (match) => `<mark>${match}</mark>`);
return result;
return result;
} else {
return itemLabel;
}
};
export const getSearchDropdownLabels = (

View File

@ -29,3 +29,8 @@ export const mockLongOptionsArray = [
{ key: 'string3', label: 'string3' },
{ key: 'string4', label: 'string4' },
];
export const mockItemLabel = 'Aaron Warren and Aaron Warner';
export const highlightedItemLabel =
'Aaron <mark>Wa</mark>rren and Aaron <mark>Wa</mark>rner';