debian-mirror-gitlab/spec/frontend/search/topbar/components/searchable_dropdown_spec.js

168 lines
5 KiB
JavaScript
Raw Normal View History

2021-01-29 00:20:46 +05:30
import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
import Vuex from 'vuex';
2021-02-22 17:27:13 +05:30
import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data';
import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue';
import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants';
2021-01-29 00:20:46 +05:30
const localVue = createLocalVue();
localVue.use(Vuex);
2021-02-22 17:27:13 +05:30
describe('Global Search Searchable Dropdown', () => {
2021-01-29 00:20:46 +05:30
let wrapper;
const defaultProps = {
2021-02-22 17:27:13 +05:30
headerText: GROUP_DATA.headerText,
selectedDisplayValue: GROUP_DATA.selectedDisplayValue,
itemsDisplayValue: GROUP_DATA.itemsDisplayValue,
loading: false,
selectedItem: ANY_OPTION,
items: [],
2021-01-29 00:20:46 +05:30
};
2021-02-22 17:27:13 +05:30
const createComponent = (initialState, props, mountFn = shallowMount) => {
2021-01-29 00:20:46 +05:30
const store = new Vuex.Store({
state: {
query: MOCK_QUERY,
...initialState,
},
});
2021-02-22 17:27:13 +05:30
wrapper = mountFn(SearchableDropdown, {
2021-01-29 00:20:46 +05:30
localVue,
store,
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findGlDropdown = () => wrapper.find(GlDropdown);
const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
const findDropdownText = () => findGlDropdown().find('.dropdown-toggle-text');
const findDropdownItems = () => findGlDropdown().findAll(GlDropdownItem);
2021-03-08 18:12:59 +05:30
const findDropdownItemsText = () => findDropdownItems().wrappers.map((w) => w.text());
2021-01-29 00:20:46 +05:30
const findAnyDropdownItem = () => findDropdownItems().at(0);
const findFirstGroupDropdownItem = () => findDropdownItems().at(1);
const findLoader = () => wrapper.find(GlSkeletonLoader);
describe('template', () => {
beforeEach(() => {
createComponent();
});
it('renders GlDropdown', () => {
expect(findGlDropdown().exists()).toBe(true);
});
describe('findGlDropdownSearch', () => {
it('renders always', () => {
expect(findGlDropdownSearch().exists()).toBe(true);
});
it('has debounce prop', () => {
expect(findGlDropdownSearch().attributes('debounce')).toBe('500');
});
describe('onSearch', () => {
2021-02-22 17:27:13 +05:30
const search = 'test search';
2021-01-29 00:20:46 +05:30
beforeEach(() => {
2021-02-22 17:27:13 +05:30
findGlDropdownSearch().vm.$emit('input', search);
2021-01-29 00:20:46 +05:30
});
2021-02-22 17:27:13 +05:30
it('$emits @search when input event is fired from GlSearchBoxByType', () => {
expect(wrapper.emitted('search')[0]).toEqual([search]);
2021-01-29 00:20:46 +05:30
});
});
});
describe('findDropdownItems', () => {
2021-02-22 17:27:13 +05:30
describe('when loading is false', () => {
2021-01-29 00:20:46 +05:30
beforeEach(() => {
2021-02-22 17:27:13 +05:30
createComponent({}, { items: MOCK_GROUPS });
2021-01-29 00:20:46 +05:30
});
it('does not render loader', () => {
expect(findLoader().exists()).toBe(false);
});
it('renders an instance for each namespace', () => {
2021-03-08 18:12:59 +05:30
const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map((n) => n.full_name));
2021-02-22 17:27:13 +05:30
expect(findDropdownItemsText()).toStrictEqual(resultsIncludeAny);
2021-01-29 00:20:46 +05:30
});
});
2021-02-22 17:27:13 +05:30
describe('when loading is true', () => {
2021-01-29 00:20:46 +05:30
beforeEach(() => {
2021-02-22 17:27:13 +05:30
createComponent({}, { loading: true, items: MOCK_GROUPS });
2021-01-29 00:20:46 +05:30
});
it('does render loader', () => {
expect(findLoader().exists()).toBe(true);
});
it('renders only Any in dropdown', () => {
expect(findDropdownItemsText()).toStrictEqual(['Any']);
});
});
2021-02-22 17:27:13 +05:30
describe('when item is selected', () => {
beforeEach(() => {
createComponent({}, { items: MOCK_GROUPS, selectedItem: MOCK_GROUPS[0] });
});
it('marks the dropdown as checked', () => {
expect(findFirstGroupDropdownItem().attributes('ischecked')).toBe('true');
});
});
2021-01-29 00:20:46 +05:30
});
describe('Dropdown Text', () => {
2021-02-22 17:27:13 +05:30
describe('when selectedItem is any', () => {
2021-01-29 00:20:46 +05:30
beforeEach(() => {
createComponent({}, {}, mount);
});
it('sets dropdown text to Any', () => {
2021-02-22 17:27:13 +05:30
expect(findDropdownText().text()).toBe(ANY_OPTION.name);
2021-01-29 00:20:46 +05:30
});
});
2021-02-22 17:27:13 +05:30
describe('selectedItem is set', () => {
2021-01-29 00:20:46 +05:30
beforeEach(() => {
2021-02-22 17:27:13 +05:30
createComponent({}, { selectedItem: MOCK_GROUP }, mount);
2021-01-29 00:20:46 +05:30
});
2021-02-22 17:27:13 +05:30
it('sets dropdown text to the selectedItem selectedDisplayValue', () => {
expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.selectedDisplayValue]);
2021-01-29 00:20:46 +05:30
});
});
});
});
describe('actions', () => {
beforeEach(() => {
2021-02-22 17:27:13 +05:30
createComponent({}, { items: MOCK_GROUPS });
2021-01-29 00:20:46 +05:30
});
2021-02-22 17:27:13 +05:30
it('clicking "Any" dropdown item $emits @change with ANY_OPTION', () => {
2021-01-29 00:20:46 +05:30
findAnyDropdownItem().vm.$emit('click');
2021-02-22 17:27:13 +05:30
expect(wrapper.emitted('change')[0]).toEqual([ANY_OPTION]);
2021-01-29 00:20:46 +05:30
});
2021-02-22 17:27:13 +05:30
it('clicking result dropdown item $emits @change with result', () => {
2021-01-29 00:20:46 +05:30
findFirstGroupDropdownItem().vm.$emit('click');
2021-02-22 17:27:13 +05:30
expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]);
2021-01-29 00:20:46 +05:30
});
});
});