Variables: Fixes filtering in picker with null items (#31979)

* Variables: Fixes filtering in picker with null items

* Chore: some cleanup
This commit is contained in:
Hugo Häggmark 2021-03-15 15:45:32 +01:00 committed by GitHub
parent f97384c2f9
commit bc60ce9cce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 15 deletions

View File

@ -650,9 +650,9 @@ describe('optionsPickerReducer', () => {
});
});
describe('when updateOptionsAndFilter is dispatched and searchFilter exists', () => {
describe('when updateOptionsAndFilter is dispatched and queryValue exists', () => {
it('then state should be correct', () => {
const searchQuery = 'A';
const queryValue = 'A';
const options = [
{ text: 'All', value: '$__all', selected: true },
@ -660,9 +660,7 @@ describe('optionsPickerReducer', () => {
{ text: 'B', value: 'B', selected: false },
];
const { initialState } = getVariableTestContext({
queryValue: searchQuery,
});
const { initialState } = getVariableTestContext({ queryValue });
reducerTester<OptionsPickerState>()
.givenReducer(optionsPickerReducer, cloneDeep(initialState))
@ -674,23 +672,46 @@ describe('optionsPickerReducer', () => {
{ text: 'A', value: 'A', selected: false },
],
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: searchQuery,
queryValue: 'A',
highlightIndex: 0,
});
});
describe('but option is null', () => {
it('then state should be correct', () => {
const queryValue = 'A';
const options: any = [
{ text: 'All', value: '$__all', selected: true },
{ text: null, value: null, selected: false },
{ text: [null], value: [null], selected: false },
];
const { initialState } = getVariableTestContext({ queryValue });
reducerTester<OptionsPickerState>()
.givenReducer(optionsPickerReducer, cloneDeep(initialState))
.whenActionIsDispatched(updateOptionsAndFilter(options))
.thenStateShouldEqual({
...initialState,
options: [{ text: 'All', value: '$__all', selected: true }],
selectedValues: [{ text: 'All', value: '$__all', selected: true }],
queryValue: 'A',
highlightIndex: 0,
});
});
});
describe('and option count is are greater then OPTIONS_LIMIT', () => {
it('then state should be correct', () => {
const searchQuery = 'option:1337';
const queryValue = 'option:1337';
const options = [];
for (let index = 0; index <= OPTIONS_LIMIT + 337; index++) {
options.push({ text: `option:${index}`, value: `option:${index}`, selected: false });
}
const { initialState } = getVariableTestContext({
queryValue: searchQuery,
});
const { initialState } = getVariableTestContext({ queryValue });
reducerTester<OptionsPickerState>()
.givenReducer(optionsPickerReducer, cloneDeep(initialState))
@ -708,7 +729,7 @@ describe('optionsPickerReducer', () => {
describe('when value is selected and filter is applied but then removed', () => {
it('then state should be correct', () => {
const searchQuery = 'A';
const queryValue = 'A';
const options: VariableOption[] = [
{ text: 'All', value: '$__all', selected: false },
@ -732,7 +753,7 @@ describe('optionsPickerReducer', () => {
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
})
.whenActionIsDispatched(updateSearchQuery(searchQuery))
.whenActionIsDispatched(updateSearchQuery(queryValue))
.thenStateShouldEqual({
...initialState,
options: [
@ -741,7 +762,7 @@ describe('optionsPickerReducer', () => {
{ text: 'B', value: 'B', selected: true },
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: searchQuery,
queryValue: 'A',
})
.whenActionIsDispatched(updateOptionsAndFilter(options))
.thenStateShouldEqual({
@ -751,7 +772,7 @@ describe('optionsPickerReducer', () => {
{ text: 'A', value: 'A', selected: false },
],
selectedValues: [{ text: 'B', value: 'B', selected: true }],
queryValue: searchQuery,
queryValue: 'A',
highlightIndex: 0,
})
.whenActionIsDispatched(updateSearchQuery(''))

View File

@ -242,7 +242,8 @@ const optionsPickerSlice = createSlice({
const searchQuery = trim((state.queryValue ?? '').toLowerCase());
state.options = action.payload.filter((option) => {
const text = Array.isArray(option.text) ? option.text.toString() : option.text;
const optionsText = option.text ?? '';
const text = Array.isArray(optionsText) ? optionsText.toString() : optionsText;
return text.toLowerCase().indexOf(searchQuery) !== -1;
});