summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorWinnie Hellmann <winnie@gitlab.com>2019-05-19 19:55:04 +0000
committerTim Zallmann <tzallmann@gitlab.com>2019-05-19 19:55:04 +0000
commit2aa024af61787186d881b772fcd04d190eb93aec (patch)
tree1970a0db58834ece2222bcbc392cb139cb9492a8
parent5fb7ef1729f9b4d9198c7441557e71e6da9952d6 (diff)
downloadgitlab-ce-2aa024af61787186d881b772fcd04d190eb93aec.tar.gz
Use component selectors in serverless frontend tests
-rw-r--r--spec/frontend/serverless/components/function_row_spec.js29
-rw-r--r--spec/frontend/serverless/components/functions_spec.js9
-rw-r--r--spec/frontend/serverless/components/missing_prometheus_spec.js15
-rw-r--r--spec/frontend/serverless/components/url_spec.js8
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', () => {
- it('Parses the function details correctly', () => {
- const vm = createComponent(mockServerlessFunction);
+ let wrapper;
- 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);
+ const createComponent = func => {
+ wrapper = shallowMount(functionRowComponent, { propsData: { func }, sync: false });
+ };
- vm.$destroy();
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ it('Parses the function details correctly', () => {
+ createComponent(mockServerlessFunction);
+
+ 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);