diff options
Diffstat (limited to 'spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js')
-rw-r--r-- | spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js | 60 |
1 files changed, 30 insertions, 30 deletions
diff --git a/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js b/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js index 7f5f1a778d7..f8271866ca1 100644 --- a/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js +++ b/spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js @@ -2,7 +2,9 @@ import Vue from 'vue'; import _ from 'underscore'; import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue'; import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue'; -import { shallowMount } from '@vue/test-utils'; + +import { GlSearchBoxByType } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; import { trimText } from 'spec/helpers/text_helper'; describe('ProjectSelector component', () => { @@ -14,10 +16,12 @@ describe('ProjectSelector component', () => { let selected = []; selected = selected.concat(allProjects.slice(0, 3)).concat(allProjects.slice(5, 8)); + const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input'); + beforeEach(() => { jasmine.clock().install(); - wrapper = shallowMount(Vue.extend(ProjectSelector), { + wrapper = mount(Vue.extend(ProjectSelector), { propsData: { projectSearchResults: searchResults, selectedProjects: selected, @@ -26,6 +30,7 @@ describe('ProjectSelector component', () => { showLoadingIndicator: false, showSearchErrorMessage: false, }, + sync: false, attachToDocument: true, }); @@ -44,7 +49,8 @@ describe('ProjectSelector component', () => { it(`triggers a (debounced) search when the search input value changes`, () => { spyOn(vm, '$emit'); const query = 'my test query!'; - const searchInput = wrapper.find('.js-project-selector-input'); + const searchInput = findSearchInput(); + searchInput.setValue(query); searchInput.trigger('input'); @@ -56,7 +62,7 @@ describe('ProjectSelector component', () => { it(`debounces the search input`, () => { spyOn(vm, '$emit'); - const searchInput = wrapper.find('.js-project-selector-input'); + const searchInput = findSearchInput(); const updateSearchQuery = (count = 0) => { if (count === 10) { @@ -77,9 +83,9 @@ describe('ProjectSelector component', () => { }); it(`includes a placeholder in the search box`, () => { - expect(wrapper.find('.js-project-selector-input').attributes('placeholder')).toBe( - 'Search your projects', - ); + const searchInput = findSearchInput(); + + expect(searchInput.attributes('placeholder')).toBe('Search your projects'); }); it(`triggers a "projectClicked" event when a project is clicked`, () => { @@ -92,41 +98,35 @@ describe('ProjectSelector component', () => { it(`shows a "no results" message if showNoResultsMessage === true`, () => { wrapper.setProps({ showNoResultsMessage: true }); - expect(wrapper.contains('.js-no-results-message')).toBe(true); + return vm.$nextTick().then(() => { + const noResultsEl = wrapper.find('.js-no-results-message'); - const noResultsEl = wrapper.find('.js-no-results-message'); - - expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search'); + 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 }); - expect(wrapper.contains('.js-minimum-search-query-message')).toBe(true); - - const minimumSearchEl = wrapper.find('.js-minimum-search-query-message'); + return vm.$nextTick().then(() => { + const minimumSearchEl = wrapper.find('.js-minimum-search-query-message'); - expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search'); + 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 }); - expect(wrapper.contains('.js-search-error-message')).toBe(true); - - const errorMessageEl = wrapper.find('.js-search-error-message'); - - expect(trimText(errorMessageEl.text())).toEqual( - 'Something went wrong, unable to search projects', - ); - }); + return vm.$nextTick().then(() => { + const errorMessageEl = wrapper.find('.js-search-error-message'); - it(`focuses the input element when the focusSearchInput() method is called`, () => { - const input = wrapper.find('.js-project-selector-input'); - - expect(document.activeElement).not.toBe(input.element); - vm.focusSearchInput(); - - expect(document.activeElement).toBe(input.element); + expect(errorMessageEl.exists()).toBe(true); + expect(trimText(errorMessageEl.text())).toEqual( + 'Something went wrong, unable to search projects', + ); + }); }); }); |