Merge branch '9594-fix-uses-with-project-avatar' into 'master'

Remove getChildInstances in project_header_spec and project_search_spec

See merge request gitlab-org/gitlab-ee!9433

ee/spec/javascripts/operations/components/dashboard/project_header_spec.js

-import Vue from 'vue';
-import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { removeWhitespace } from 'spec/helpers/vue_component_helper';
-import { getChildInstances } from '../../helpers';
 import { mockOneProject, mockText } from '../../mock_data';
 
+const localVue = createLocalVue();
+
 describe('project header component', () => {
-  const ProjectHeaderComponent = Vue.extend(ProjectHeader);
-  const ProjectAvatarComponent = Vue.extend(ProjectAvatar);
-  let vm;
+  let wrapper;
 
-  beforeEach(() => {
-    vm = mountComponentWithStore(ProjectHeaderComponent, {
-      props: {
+  const factory = () => {
+    wrapper = shallowMount(localVue.extend(ProjectHeader), {
+      propsData: {
         project: mockOneProject,
       },
+      localVue,
+      sync: false,
     });
+  };
+
+  beforeEach(() => {
+    factory();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders project name with namespace', () => {
-    const name = vm.$el.querySelector('.js-name-with-namespace').innerText;
+    const name = wrapper.find('.js-name-with-namespace').text();
 
     expect(removeWhitespace(name).trim()).toBe(mockOneProject.name_with_namespace);
   });
@@ -32,35 +36,37 @@ describe('project header component', () => {
   it('links project name to project', () => {
     const path = mockOneProject.web_url;
 
-    expect(vm.$el.querySelector('.js-project-link').href).toBe(path);
+    expect(wrapper.find('.js-project-link').attributes('href')).toBe(path);
   });
 
   describe('wrapped components', () => {
     describe('project avatar', () => {
       it('renders', () => {
-        expect(getChildInstances(vm, ProjectAvatarComponent).length).toBe(1);
+        expect(wrapper.findAll(ProjectAvatar).length).toBe(1);
       });
 
       it('binds project', () => {
-        const [avatar] = getChildInstances(vm, ProjectAvatarComponent);
-
-        expect(avatar.project).toEqual(vm.project);
+        expect(wrapper.find(ProjectAvatar).props('project')).toEqual(mockOneProject);
       });
     });
   });
 
   describe('dropdown menu', () => {
     it('renders removal button', () => {
-      expect(vm.$el.querySelector('.js-remove-button').innerText.trim()).toBe(
-        mockText.REMOVE_PROJECT,
-      );
+      expect(
+        wrapper
+          .find('.js-remove-button')
+          .text()
+          .trim(),
+      ).toBe(mockText.REMOVE_PROJECT);
     });
 
     it('emits project removal link on click', () => {
-      const spy = spyOn(vm, '$emit');
-      vm.$el.querySelector('.js-remove-button').click();
+      wrapper.find('.js-remove-button').trigger('click');
 
-      expect(spy).toHaveBeenCalledWith('remove', mockOneProject.remove_path);
+      expect(wrapper.emittedByOrder()).toEqual([
+        { name: 'remove', args: [mockOneProject.remove_path] },
+      ]);
     });
   });
 });

ee/spec/javascripts/operations/components/dashboard/project_search_spec.js

 import Vue from 'vue';
 import store from 'ee/operations/store/index';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import ProjectSearch from 'ee/operations/components/dashboard/project_search.vue';
 import TokenizedInput from 'ee/operations/components/tokenized_input/input.vue';
 import { mockText, mockProjectData } from '../../mock_data';
@@ -10,7 +9,6 @@ import { getChildInstances, mouseEvent, clearState } from '../../helpers';
 describe('project search component', () => {
   const ProjectSearchComponent = Vue.extend(ProjectSearch);
   const TokenizedInputComponent = Vue.extend(TokenizedInput);
-  const ProjectAvatarComponent = Vue.extend(ProjectAvatar);
 
   const mockProjects = mockProjectData(1);
   const [mockOneProject] = mockProjects;
@@ -157,7 +155,7 @@ describe('project search component', () => {
       beforeEach(() => {
         store.state.projectSearchResults = mockProjects;
         vm = mount();
-        avatars = getChildInstances(vm, ProjectAvatarComponent);
+        avatars = vm.$el.querySelectorAll('.project-avatar');
       });
 
       it('renders project avatar component', () => {
@@ -166,8 +164,10 @@ describe('project search component', () => {
 
       it('binds project to project', () => {
         const [avatar] = avatars;
+        const identicon = avatar.querySelector('.identicon');
+        const [identiconLetter] = mockOneProject.name;
 
-        expect(avatar.project).toEqual(mockOneProject);
+        expect(identicon.textContent.trim()).toEqual(identiconLetter.toUpperCase());
       });
     });
   });

ee/spec/javascripts/operations/helpers.js

@@ -4,6 +4,11 @@ export function clearState(store) {
   store.replaceState(state());
 }
 
+/**
+ * @deprecated
+ * DO NOT USE! This causes issues when `vue-test-utils` is used elsewhere.
+ * This function will be removed in https://gitlab.com/gitlab-org/gitlab-ee/issues/9594.
+ */
 export function getChildInstances(vm, WrappedComponent) {
   return vm.$children.filter(child => child instanceof WrappedComponent);
 }