From 2aa024af61787186d881b772fcd04d190eb93aec Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Sun, 19 May 2019 19:55:04 +0000 Subject: [PATCH] Use component selectors in serverless frontend tests --- .../components/function_row_spec.js | 29 +++++++++++-------- .../serverless/components/functions_spec.js | 9 ++++-- .../components/missing_prometheus_spec.js | 15 ++++++---- .../serverless/components/url_spec.js | 8 +++-- 4 files changed, 37 insertions(+), 24 deletions(-) diff --git a/spec/frontend/serverless/components/function_row_spec.js b/spec/frontend/serverless/components/function_row_spec.js index 414fdc5cd82..979f98c4832 100644 --- a/spec/frontend/serverless/components/function_row_spec.js +++ b/spec/frontend/serverless/components/function_row_spec.js @@ -1,27 +1,32 @@ import functionRowComponent from '~/serverless/components/function_row.vue'; import { shallowMount } from '@vue/test-utils'; +import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { mockServerlessFunction } from '../mock_data'; -const createComponent = func => - shallowMount(functionRowComponent, { propsData: { func }, sync: false }).vm; - describe('functionRowComponent', () => { + let wrapper; + + const createComponent = func => { + wrapper = shallowMount(functionRowComponent, { propsData: { func }, sync: false }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + it('Parses the function details correctly', () => { - const vm = createComponent(mockServerlessFunction); + createComponent(mockServerlessFunction); - expect(vm.$el.querySelector('b').innerHTML).toEqual(mockServerlessFunction.name); - expect(vm.$el.querySelector('span').innerHTML).toEqual(mockServerlessFunction.image); - expect(vm.$el.querySelector('timeago-stub').getAttribute('time')).not.toBe(null); - - vm.$destroy(); + expect(wrapper.find('b').text()).toBe(mockServerlessFunction.name); + expect(wrapper.find('span').text()).toBe(mockServerlessFunction.image); + expect(wrapper.find(Timeago).attributes('time')).not.toBe(null); }); it('handles clicks correctly', () => { - const vm = createComponent(mockServerlessFunction); + createComponent(mockServerlessFunction); + const { vm } = wrapper; expect(vm.checkClass(vm.$el.querySelector('p'))).toBe(true); // check somewhere inside the row - - vm.$destroy(); }); }); diff --git a/spec/frontend/serverless/components/functions_spec.js b/spec/frontend/serverless/components/functions_spec.js index 7af33ceaadc..6924fb9e91f 100644 --- a/spec/frontend/serverless/components/functions_spec.js +++ b/spec/frontend/serverless/components/functions_spec.js @@ -1,9 +1,12 @@ import Vuex from 'vuex'; +import { GlLoadingIcon } from '@gitlab/ui'; import AxiosMockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import functionsComponent from '~/serverless/components/functions.vue'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createStore } from '~/serverless/store'; +import EmptyState from '~/serverless/components/empty_state.vue'; +import EnvironmentRow from '~/serverless/components/environment_row.vue'; import { TEST_HOST } from 'helpers/test_constants'; import { mockServerlessFunctions } from '../mock_data'; @@ -43,7 +46,7 @@ describe('functionsComponent', () => { sync: false, }); - expect(component.vm.$el.querySelector('emptystate-stub')).not.toBe(null); + expect(component.find(EmptyState).exists()).toBe(true); }); it('should render a loading component', () => { @@ -60,7 +63,7 @@ describe('functionsComponent', () => { sync: false, }); - expect(component.vm.$el.querySelector('glloadingicon-stub')).not.toBe(null); + expect(component.find(GlLoadingIcon).exists()).toBe(true); }); it('should render empty state when there is no function data', () => { @@ -104,7 +107,7 @@ describe('functionsComponent', () => { component.vm.$store.dispatch('receiveFunctionsSuccess', mockServerlessFunctions); return component.vm.$nextTick().then(() => { - expect(component.vm.$el.querySelector('environmentrow-stub')).not.toBe(null); + expect(component.find(EnvironmentRow).exists()).toBe(true); }); }); }); diff --git a/spec/frontend/serverless/components/missing_prometheus_spec.js b/spec/frontend/serverless/components/missing_prometheus_spec.js index d0df6125290..5dbdccde2de 100644 --- a/spec/frontend/serverless/components/missing_prometheus_spec.js +++ b/spec/frontend/serverless/components/missing_prometheus_spec.js @@ -1,3 +1,4 @@ +import { GlButton } from '@gitlab/ui'; import missingPrometheusComponent from '~/serverless/components/missing_prometheus.vue'; import { shallowMount } from '@vue/test-utils'; @@ -9,27 +10,29 @@ const createComponent = missingData => missingData, }, sync: false, - }).vm; + }); describe('missingPrometheusComponent', () => { - let vm; + let wrapper; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('should render missing prometheus message', () => { - vm = createComponent(false); + wrapper = createComponent(false); + const { vm } = wrapper; expect(vm.$el.querySelector('.state-description').innerHTML.trim()).toContain( 'Function invocation metrics require Prometheus to be installed first.', ); - expect(vm.$el.querySelector('glbutton-stub').getAttribute('variant')).toEqual('success'); + expect(wrapper.find(GlButton).attributes('variant')).toBe('success'); }); it('should render no prometheus data message', () => { - vm = createComponent(true); + wrapper = createComponent(true); + const { vm } = wrapper; expect(vm.$el.querySelector('.state-description').innerHTML.trim()).toContain( 'Invocation metrics loading or not available at this time.', diff --git a/spec/frontend/serverless/components/url_spec.js b/spec/frontend/serverless/components/url_spec.js index d05a9bba103..706441e8a8b 100644 --- a/spec/frontend/serverless/components/url_spec.js +++ b/spec/frontend/serverless/components/url_spec.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import urlComponent from '~/serverless/components/url.vue'; import { shallowMount } from '@vue/test-utils'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; const createComponent = uri => shallowMount(Vue.extend(urlComponent), { @@ -8,15 +9,16 @@ const createComponent = uri => uri, }, sync: false, - }).vm; + }); describe('urlComponent', () => { it('should render correctly', () => { const uri = 'http://testfunc.apps.example.com'; - const vm = createComponent(uri); + const wrapper = createComponent(uri); + const { vm } = wrapper; expect(vm.$el.classList.contains('clipboard-group')).toBe(true); - expect(vm.$el.querySelector('clipboardbutton-stub').getAttribute('text')).toEqual(uri); + expect(wrapper.find(ClipboardButton).attributes('text')).toEqual(uri); expect(vm.$el.querySelector('.url-text-field').innerHTML).toEqual(uri);