136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
import Vue from 'vue';
|
|
import { head } from 'lodash';
|
|
|
|
import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
|
|
import { mount, createLocalVue } from '@vue/test-utils';
|
|
import { trimText } from 'helpers/text_helper';
|
|
import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
|
|
import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
|
|
|
|
const localVue = createLocalVue();
|
|
|
|
describe('ProjectSelector component', () => {
|
|
let wrapper;
|
|
let vm;
|
|
const allProjects = getJSONFixture('static/projects.json');
|
|
const searchResults = allProjects.slice(0, 5);
|
|
let selected = [];
|
|
selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8));
|
|
|
|
const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input');
|
|
|
|
beforeEach(() => {
|
|
wrapper = mount(Vue.extend(ProjectSelector), {
|
|
localVue,
|
|
propsData: {
|
|
projectSearchResults: searchResults,
|
|
selectedProjects: selected,
|
|
showNoResultsMessage: false,
|
|
showMinimumSearchQueryMessage: false,
|
|
showLoadingIndicator: false,
|
|
showSearchErrorMessage: false,
|
|
totalResults: searchResults.length,
|
|
},
|
|
attachToDocument: true,
|
|
});
|
|
|
|
({ vm } = wrapper);
|
|
});
|
|
|
|
afterEach(() => {
|
|
vm.$destroy();
|
|
});
|
|
|
|
it('renders the search results', () => {
|
|
expect(wrapper.findAll('.js-project-list-item').length).toBe(5);
|
|
});
|
|
|
|
it(`triggers a search when the search input value changes`, () => {
|
|
jest.spyOn(vm, '$emit').mockImplementation(() => {});
|
|
const query = 'my test query!';
|
|
const searchInput = findSearchInput();
|
|
|
|
searchInput.setValue(query);
|
|
searchInput.trigger('input');
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('searched', query);
|
|
});
|
|
|
|
it(`includes a placeholder in the search box`, () => {
|
|
const searchInput = findSearchInput();
|
|
|
|
expect(searchInput.attributes('placeholder')).toBe('Search your projects');
|
|
});
|
|
|
|
it(`triggers a "bottomReached" event when user has scrolled to the bottom of the list`, () => {
|
|
jest.spyOn(vm, '$emit').mockImplementation(() => {});
|
|
wrapper.find(GlInfiniteScroll).vm.$emit('bottomReached');
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('bottomReached');
|
|
});
|
|
|
|
it(`triggers a "projectClicked" event when a project is clicked`, () => {
|
|
jest.spyOn(vm, '$emit').mockImplementation(() => {});
|
|
wrapper.find(ProjectListItem).vm.$emit('click', head(searchResults));
|
|
|
|
expect(vm.$emit).toHaveBeenCalledWith('projectClicked', head(searchResults));
|
|
});
|
|
|
|
it(`shows a "no results" message if showNoResultsMessage === true`, () => {
|
|
wrapper.setProps({ showNoResultsMessage: true });
|
|
|
|
return vm.$nextTick().then(() => {
|
|
const noResultsEl = wrapper.find('.js-no-results-message');
|
|
|
|
expect(noResultsEl.exists()).toBe(true);
|
|
expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search');
|
|
});
|
|
});
|
|
|
|
it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, () => {
|
|
wrapper.setProps({ showMinimumSearchQueryMessage: true });
|
|
|
|
return vm.$nextTick().then(() => {
|
|
const minimumSearchEl = wrapper.find('.js-minimum-search-query-message');
|
|
|
|
expect(minimumSearchEl.exists()).toBe(true);
|
|
expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search');
|
|
});
|
|
});
|
|
|
|
it(`shows a error message if showSearchErrorMessage === true`, () => {
|
|
wrapper.setProps({ showSearchErrorMessage: true });
|
|
|
|
return vm.$nextTick().then(() => {
|
|
const errorMessageEl = wrapper.find('.js-search-error-message');
|
|
|
|
expect(errorMessageEl.exists()).toBe(true);
|
|
expect(trimText(errorMessageEl.text())).toEqual(
|
|
'Something went wrong, unable to search projects',
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('the search results legend', () => {
|
|
it.each`
|
|
count | total | expected
|
|
${0} | ${0} | ${'Showing 0 projects'}
|
|
${1} | ${0} | ${'Showing 1 project'}
|
|
${2} | ${0} | ${'Showing 2 projects'}
|
|
${2} | ${3} | ${'Showing 2 of 3 projects'}
|
|
`(
|
|
'is "$expected" given $count results are showing out of $total',
|
|
({ count, total, expected }) => {
|
|
wrapper.setProps({
|
|
projectSearchResults: searchResults.slice(0, count),
|
|
totalResults: total,
|
|
});
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
expect(wrapper.text()).toContain(expected);
|
|
});
|
|
},
|
|
);
|
|
});
|
|
});
|