Skip to content
Snippets Groups Projects
Verified Commit 5b783fd9 authored by Alexander Turinske's avatar Alexander Turinske :gay_pride_flag: Committed by GitLab
Browse files

Update filtered search bar tests for vue 3 

- bring them partially up to current standards
- remove vue 3 deprecated patterns
- reimplement !144947
- !145070
parent 19dcf177
No related branches found
No related tags found
1 merge request!145070Update filtered search bar tests for vue 3
Hide whitespace changes
Inline Side-by-side
spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+ 101
− 115
View file @ 5b783fd9
import { GlDropdownItem, GlSorting, GlFilteredSearch, GlFormCheckbox } from '@gitlab/ui';
import { shallowMount, mount } from '@vue/test-utils';
import { nextTick } from 'vue';
import { useLocalStorageSpy } from 'helpers/local_storage_helper';
import waitForPromises from 'helpers/wait_for_promises';
import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
import {
......@@ -34,45 +36,39 @@ jest.mock('~/vue_shared/components/filtered_search_bar/filtered_search_utils', (
).filterEmptySearchTerm,
}));
const createComponent = ({
shallow = true,
namespace = 'gitlab-org/gitlab-test',
recentSearchesStorageKey = 'requirements',
tokens = mockAvailableTokens,
sortOptions,
initialSortBy,
initialFilterValue = [],
showCheckbox = false,
checkboxChecked = false,
searchInputPlaceholder = 'Filter requirements',
} = {}) => {
const mountMethod = shallow ? shallowMount : mount;
return mountMethod(FilteredSearchBarRoot, {
propsData: {
namespace,
recentSearchesStorageKey,
tokens,
sortOptions,
initialSortBy,
initialFilterValue,
showCheckbox,
checkboxChecked,
searchInputPlaceholder,
},
});
const defaultProps = {
namespace: 'gitlab-org/gitlab-test',
recentSearchesStorageKey: 'issues',
tokens: mockAvailableTokens,
initialFilterValue: [],
showCheckbox: false,
checkboxChecked: false,
searchInputPlaceholder: 'Filter requirements',
};
describe('FilteredSearchBarRoot', () => {
useLocalStorageSpy();
let wrapper;
const createComponent = ({ shallow = true, propsData = {} } = {}) => {
const mountMethod = shallow ? shallowMount : mount;
wrapper = mountMethod(FilteredSearchBarRoot, { propsData: { ...defaultProps, ...propsData } });
};
const findGlSorting = () => wrapper.findComponent(GlSorting);
const findGlFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
const findGlDropdownItem = () => wrapper.findComponent(GlDropdownItem);
afterEach(() => {
localStorage.clear();
});
describe('data', () => {
describe('when `sortOptions` are provided', () => {
beforeEach(() => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
});
it('sets a correct initial value for GlFilteredSearch', () => {
......@@ -95,7 +91,7 @@ describe('FilteredSearchBarRoot', () => {
});
it('does not initialize the sort dropdown when `sortOptions` are not provided', () => {
wrapper = createComponent();
createComponent();
expect(findGlSorting().exists()).toBe(false);
});
......@@ -104,6 +100,7 @@ describe('FilteredSearchBarRoot', () => {
describe('computed', () => {
describe('tokenSymbols', () => {
it('returns a map containing type and symbols from `tokens` prop', () => {
createComponent();
expect(wrapper.vm.tokenSymbols).toEqual({
[TOKEN_TYPE_AUTHOR]: '@',
[TOKEN_TYPE_LABEL]: '~',
......@@ -114,6 +111,7 @@ describe('FilteredSearchBarRoot', () => {
describe('tokenTitles', () => {
it('returns a map containing type and title from `tokens` prop', () => {
createComponent();
expect(wrapper.vm.tokenTitles).toEqual({
[TOKEN_TYPE_AUTHOR]: 'Author',
[TOKEN_TYPE_LABEL]: 'Label',
......@@ -124,7 +122,7 @@ describe('FilteredSearchBarRoot', () => {
describe('sortDirectionIcon', () => {
beforeEach(() => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
});
it('passes isAscending=false to GlSorting by default', () => {
......@@ -141,7 +139,7 @@ describe('FilteredSearchBarRoot', () => {
describe('filteredRecentSearches', () => {
beforeEach(() => {
wrapper = createComponent();
createComponent();
});
it('returns array of recent searches filtering out any string type (unsupported) items', async () => {
......@@ -187,7 +185,7 @@ describe('FilteredSearchBarRoot', () => {
describe('events', () => {
it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
createComponent({ propsData: { initialFilterValue: [tokenValueLabel] } });
wrapper.findComponent(GlFilteredSearch).vm.$emit('clear');
......@@ -199,15 +197,16 @@ describe('FilteredSearchBarRoot', () => {
describe('methods', () => {
describe('setupRecentSearch', () => {
it('initializes `recentSearchesService` and `recentSearchesStore` props when `recentSearchesStorageKey` is available', () => {
createComponent();
expect(wrapper.vm.recentSearchesService instanceof RecentSearchesService).toBe(true);
expect(wrapper.vm.recentSearchesStore instanceof RecentSearchesStore).toBe(true);
});
it('initializes `recentSearchesPromise` prop with a promise by using `recentSearchesService.fetch()`', () => {
jest.spyOn(wrapper.vm.recentSearchesService, 'fetch').mockResolvedValue([]);
wrapper.vm.setupRecentSearch();
expect(localStorage.setItem).not.toHaveBeenCalled();
createComponent();
expect(localStorage.setItem).toHaveBeenCalledWith('canUseLocalStorage', 'true');
expect(wrapper.vm.recentSearchesPromise instanceof Promise).toBe(true);
});
});
......@@ -216,6 +215,7 @@ describe('FilteredSearchBarRoot', () => {
const mockFilters = [tokenValueAuthor, tokenValueLabel, tokenValueConfidential, 'foo'];
it('returns filter array with unescaped strings for values which have spaces', () => {
createComponent();
expect(wrapper.vm.removeQuotesEnclosure(mockFilters)).toEqual([
tokenValueAuthor,
tokenValueLabel,
......@@ -227,7 +227,7 @@ describe('FilteredSearchBarRoot', () => {
describe('handleSortOptionChange', () => {
it('emits component event `onSort` with selected sort by value', async () => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
findGlSorting().vm.$emit('sortByChange', mockSortOptions[1].id);
await nextTick();
......@@ -239,9 +239,11 @@ describe('FilteredSearchBarRoot', () => {
describe('handleSortDirectionChange', () => {
beforeEach(() => {
wrapper = createComponent({
sortOptions: mockSortOptions,
initialSortBy: mockSortOptions[0].sortDirection.descending,
createComponent({
propsData: {
sortOptions: mockSortOptions,
initialSortBy: mockSortOptions[0].sortDirection.descending,
},
});
});
......@@ -263,24 +265,27 @@ describe('FilteredSearchBarRoot', () => {
describe('handleHistoryItemSelected', () => {
it('emits `onFilter` event with provided filters param', () => {
jest.spyOn(wrapper.vm, 'removeQuotesEnclosure');
wrapper.vm.handleHistoryItemSelected(mockHistoryItems[0]);
createComponent();
expect(wrapper.emitted('onFilter')).toEqual(undefined);
findGlFilteredSearch().vm.$emit('history-item-selected', mockHistoryItems[0]);
expect(wrapper.emitted('onFilter')[0]).toEqual([mockHistoryItems[0]]);
expect(wrapper.vm.removeQuotesEnclosure).toHaveBeenCalledWith(mockHistoryItems[0]);
});
});
describe('handleClearHistory', () => {
it('clears search history from recent searches store', () => {
createComponent();
jest.spyOn(wrapper.vm.recentSearchesStore, 'setRecentSearches').mockReturnValue([]);
jest.spyOn(wrapper.vm.recentSearchesService, 'save');
wrapper.vm.handleClearHistory();
expect(localStorage.setItem).toHaveBeenCalledTimes(2);
findGlFilteredSearch().vm.$emit('clear-history');
expect(wrapper.vm.recentSearchesStore.setRecentSearches).toHaveBeenCalledWith([]);
expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([]);
expect(localStorage.setItem).toHaveBeenCalledTimes(4);
expect(localStorage.setItem).toHaveBeenLastCalledWith(
'gitlab-org/gitlab-test-issue-recent-searches',
'[]',
);
expect(wrapper.vm.recentSearches).toEqual([]);
});
});
......@@ -289,7 +294,7 @@ describe('FilteredSearchBarRoot', () => {
const mockFilters = [tokenValueAuthor, 'foo'];
beforeEach(async () => {
wrapper = createComponent();
createComponent();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
......@@ -319,25 +324,27 @@ describe('FilteredSearchBarRoot', () => {
});
it('calls `recentSearchesService.save` with array of searches', async () => {
jest.spyOn(wrapper.vm.recentSearchesService, 'save');
wrapper.vm.handleFilterSubmit();
await nextTick();
expect(localStorage.setItem).toHaveBeenCalledTimes(4);
findGlFilteredSearch().vm.$emit('submit');
await waitForPromises();
return wrapper.vm.recentSearchesPromise.then(() => {
expect(wrapper.vm.recentSearchesService.save).toHaveBeenCalledWith([mockFilters]);
});
expect(localStorage.setItem).toHaveBeenCalledTimes(6);
expect(localStorage.setItem).toHaveBeenLastCalledWith(
'gitlab-org/gitlab-test-issue-recent-searches',
JSON.stringify([mockFilters]),
);
});
it('sets `recentSearches` data prop with array of searches', () => {
jest.spyOn(wrapper.vm.recentSearchesService, 'save');
wrapper.vm.handleFilterSubmit();
it('sets `recentSearches` data prop with array of searches', async () => {
expect(localStorage.setItem).toHaveBeenCalledTimes(4);
findGlFilteredSearch().vm.$emit('submit');
await waitForPromises();
return wrapper.vm.recentSearchesPromise.then(() => {
expect(wrapper.vm.recentSearches).toEqual([mockFilters]);
});
expect(localStorage.setItem).toHaveBeenCalledTimes(6);
expect(localStorage.setItem).toHaveBeenLastCalledWith(
'gitlab-org/gitlab-test-issue-recent-searches',
JSON.stringify([mockFilters]),
);
});
it('calls `blurSearchInput` method to remove focus from filter input field', () => {
......@@ -349,20 +356,18 @@ describe('FilteredSearchBarRoot', () => {
});
it('emits component event `onFilter` with provided filters param', async () => {
jest.spyOn(wrapper.vm, 'removeQuotesEnclosure');
expect(wrapper.emitted('onFilter')).toEqual(undefined);
findGlFilteredSearch().vm.$emit('submit');
await nextTick();
expect(wrapper.emitted('onFilter')[0]).toEqual([mockFilters]);
expect(wrapper.vm.removeQuotesEnclosure).toHaveBeenCalledWith(mockFilters);
});
});
});
describe('template', () => {
it('renders gl-filtered-search component', async () => {
wrapper = createComponent();
createComponent();
// setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
// eslint-disable-next-line no-restricted-syntax
await wrapper.setData({
......@@ -376,89 +381,70 @@ describe('FilteredSearchBarRoot', () => {
expect(glFilteredSearchEl.props('historyItems')).toEqual(mockHistoryItems);
});
it('renders checkbox when `showCheckbox` prop is true', () => {
let wrapperWithCheckbox = createComponent({
showCheckbox: true,
});
expect(wrapperWithCheckbox.findComponent(GlFormCheckbox).exists()).toBe(true);
expect(
wrapperWithCheckbox.findComponent(GlFormCheckbox).attributes('checked'),
).not.toBeDefined();
wrapperWithCheckbox.destroy();
wrapperWithCheckbox = createComponent({
showCheckbox: true,
checkboxChecked: true,
});
expect(wrapperWithCheckbox.findComponent(GlFormCheckbox).attributes('checked')).toBe('true');
it('renders unchecked checkbox when `showCheckbox` prop is true', () => {
createComponent({ propsData: { showCheckbox: true } });
expect(findGlFormCheckbox().exists()).toBe(true);
expect(findGlFormCheckbox().attributes('checked')).not.toBeDefined();
});
wrapperWithCheckbox.destroy();
it('renders checked checkbox when `checkboxChecked` prop is true', () => {
createComponent({ propsData: { showCheckbox: true, checkboxChecked: true } });
expect(findGlFormCheckbox().attributes('checked')).toBe('true');
});
it('renders search history items dropdown with formatting done using token symbols', async () => {
const wrapperFullMount = createComponent({ sortOptions: mockSortOptions, shallow: false });
wrapperFullMount.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
createComponent({ propsData: { sortOptions: mockSortOptions }, shallow: false });
wrapper.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
await nextTick();
const searchHistoryItemsEl = wrapperFullMount.findAll(
const searchHistoryItemsEl = wrapper.findAll(
'.gl-search-box-by-click-menu .gl-search-box-by-click-history-item',
);
expect(searchHistoryItemsEl.at(0).text()).toBe(
'Author := @rootLabel := ~bugMilestone := %v1.0"duo"',
);
wrapperFullMount.destroy();
});
describe('when token options have `title` attribute defined', () => {
it('renders search history items using the provided `title` attribute', async () => {
const wrapperFullMount = createComponent({
sortOptions: mockSortOptions,
tokens: [mockMembershipToken],
createComponent({
propsData: {
sortOptions: mockSortOptions,
tokens: [mockMembershipToken],
},
shallow: false,
});
wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
wrapper.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
await nextTick();
expect(wrapperFullMount.findComponent(GlDropdownItem).text()).toBe('Membership := Direct');
wrapperFullMount.destroy();
expect(findGlDropdownItem().text()).toBe('Membership := Direct');
});
});
describe('when token options have do not have `title` attribute defined', () => {
it('renders search history items using the provided `value` attribute', async () => {
const wrapperFullMount = createComponent({
sortOptions: mockSortOptions,
tokens: [mockMembershipTokenOptionsWithoutTitles],
createComponent({
propsData: {
sortOptions: mockSortOptions,
tokens: [mockMembershipTokenOptionsWithoutTitles],
},
shallow: false,
});
wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
wrapper.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
await nextTick();
expect(wrapperFullMount.findComponent(GlDropdownItem).text()).toBe('Membership := exclude');
wrapperFullMount.destroy();
expect(findGlDropdownItem().text()).toBe('Membership := exclude');
});
});
it('renders sort dropdown component', () => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
expect(findGlSorting().exists()).toBe(true);
});
it('renders sort dropdown items', () => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
const { sortOptions, sortBy } = findGlSorting().props();
......@@ -485,7 +471,7 @@ describe('FilteredSearchBarRoot', () => {
};
beforeEach(() => {
wrapper = createComponent({ sortOptions: mockSortOptions });
createComponent({ propsData: { sortOptions: mockSortOptions } });
});
it('syncs filter value', async () => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment