Use component selectors in serverless frontend tests

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(wrapper.find('b').text()).toBe(mockServerlessFunction.name);
-    expect(vm.$el.querySelector('span').innerHTML).toEqual(mockServerlessFunction.image);
+    expect(wrapper.find('span').text()).toBe(mockServerlessFunction.image);
-    expect(vm.$el.querySelector('timeago-stub').getAttribute('time')).not.toBe(null);
+    expect(wrapper.find(Timeago).attributes('time')).not.toBe(null);
-
-    vm.$destroy();
   });
 
   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();
   });
 });

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);
     });
   });
 });

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.',

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);