124 lines
3.8 KiB
JavaScript
124 lines
3.8 KiB
JavaScript
import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import Vue from 'vue';
|
|
import Vuex from 'vuex';
|
|
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
|
|
import ProjectsDropdown from '~/projects/commit/components/projects_dropdown.vue';
|
|
|
|
Vue.use(Vuex);
|
|
|
|
describe('ProjectsDropdown', () => {
|
|
let wrapper;
|
|
let store;
|
|
const spyFetchProjects = jest.fn();
|
|
const projectsMockData = [
|
|
{ id: '1', name: '_project_1_', refsUrl: '_project_1_/refs' },
|
|
{ id: '2', name: '_project_2_', refsUrl: '_project_2_/refs' },
|
|
{ id: '3', name: '_project_3_', refsUrl: '_project_3_/refs' },
|
|
];
|
|
|
|
const createComponent = (term, state = {}) => {
|
|
store = new Vuex.Store({
|
|
getters: {
|
|
sortedProjects: () => projectsMockData,
|
|
},
|
|
state,
|
|
});
|
|
|
|
wrapper = extendedWrapper(
|
|
shallowMount(ProjectsDropdown, {
|
|
store,
|
|
propsData: {
|
|
value: term,
|
|
},
|
|
}),
|
|
);
|
|
};
|
|
|
|
const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
|
|
const findSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
|
|
const findDropdownItemByIndex = (index) => wrapper.findAllComponents(GlDropdownItem).at(index);
|
|
const findNoResults = () => wrapper.findByTestId('empty-result-message');
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
spyFetchProjects.mockReset();
|
|
});
|
|
|
|
describe('No projects found', () => {
|
|
beforeEach(() => {
|
|
createComponent('_non_existent_project_');
|
|
});
|
|
|
|
it('renders empty results message', () => {
|
|
expect(findNoResults().text()).toBe('No matching results');
|
|
});
|
|
|
|
it('shows GlSearchBoxByType with default attributes', () => {
|
|
expect(findSearchBoxByType().exists()).toBe(true);
|
|
expect(findSearchBoxByType().vm.$attrs).toMatchObject({
|
|
placeholder: 'Search projects',
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Search term is empty', () => {
|
|
beforeEach(() => {
|
|
createComponent('');
|
|
});
|
|
|
|
it('renders all projects when search term is empty', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(3);
|
|
expect(findDropdownItemByIndex(0).text()).toBe('_project_1_');
|
|
expect(findDropdownItemByIndex(1).text()).toBe('_project_2_');
|
|
expect(findDropdownItemByIndex(2).text()).toBe('_project_3_');
|
|
});
|
|
|
|
it('should not be selected on the inactive project', () => {
|
|
expect(wrapper.vm.isSelected('_project_1_')).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('Projects found', () => {
|
|
beforeEach(() => {
|
|
createComponent('_project_1_', { targetProjectId: '1' });
|
|
});
|
|
|
|
it('renders only the project searched for', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(1);
|
|
expect(findDropdownItemByIndex(0).text()).toBe('_project_1_');
|
|
});
|
|
|
|
it('should not display empty results message', () => {
|
|
expect(findNoResults().exists()).toBe(false);
|
|
});
|
|
|
|
it('should signify this project is selected', () => {
|
|
expect(findDropdownItemByIndex(0).props('isChecked')).toBe(true);
|
|
});
|
|
|
|
it('should signify the project is not selected', () => {
|
|
expect(wrapper.vm.isSelected('_not_selected_project_')).toBe(false);
|
|
});
|
|
|
|
describe('Custom events', () => {
|
|
it('should emit selectProject if a project is clicked', () => {
|
|
findDropdownItemByIndex(0).vm.$emit('click');
|
|
|
|
expect(wrapper.emitted('selectProject')).toEqual([['1']]);
|
|
expect(wrapper.vm.filterTerm).toBe('_project_1_');
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('Case insensitive for search term', () => {
|
|
beforeEach(() => {
|
|
createComponent('_PrOjEcT_1_');
|
|
});
|
|
|
|
it('renders only the project searched for', () => {
|
|
expect(findAllDropdownItems()).toHaveLength(1);
|
|
expect(findDropdownItemByIndex(0).text()).toBe('_project_1_');
|
|
});
|
|
});
|
|
});
|