From 2a11f41f79f3fe5cc7e6bf962d95c79e07ebea8c Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Mon, 4 Feb 2019 22:27:13 -0600 Subject: [PATCH 1/3] Rewrite project_header_spec with vue-test-utils **Why?** It was using `getChildInstances` helper method which breaks things when other tests use vue-test-utils. --- .../dashboard/project_header_spec.js | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/ee/spec/javascripts/operations/components/dashboard/project_header_spec.js b/ee/spec/javascripts/operations/components/dashboard/project_header_spec.js index a9cafc81c8145b..3e7eeee6cb1086 100644 --- a/ee/spec/javascripts/operations/components/dashboard/project_header_spec.js +++ b/ee/spec/javascripts/operations/components/dashboard/project_header_spec.js @@ -1,30 +1,34 @@ -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] }, + ]); }); }); }); -- GitLab From e5b6764198f82a50a32db0bd9b66789a79bca8eb Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Mon, 4 Feb 2019 23:30:47 -0600 Subject: [PATCH 2/3] Remove getChildInstances call project_search_spec --- .../components/dashboard/project_search_spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ee/spec/javascripts/operations/components/dashboard/project_search_spec.js b/ee/spec/javascripts/operations/components/dashboard/project_search_spec.js index 79e9bf2abab45b..b2ca58ce7a9525 100644 --- a/ee/spec/javascripts/operations/components/dashboard/project_search_spec.js +++ b/ee/spec/javascripts/operations/components/dashboard/project_search_spec.js @@ -1,7 +1,6 @@ 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()); }); }); }); -- GitLab From 6af7acb5164d34b220283e30d6c1eb8d572c86cc Mon Sep 17 00:00:00 2001 From: Paul Slaughter Date: Tue, 5 Feb 2019 01:33:33 -0600 Subject: [PATCH 3/3] Add deprecation comment to getChildInstances --- ee/spec/javascripts/operations/helpers.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ee/spec/javascripts/operations/helpers.js b/ee/spec/javascripts/operations/helpers.js index 707388317a0f69..1253c7b53b2e1a 100644 --- a/ee/spec/javascripts/operations/helpers.js +++ b/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); } -- GitLab