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',
+      );
+    });
   });
 });