1 files changed, 25 insertions, 27 deletions

diff --git a/spec/frontend/serverless/components/functions_spec.js b/spec/frontend/serverless/components/functions_spec.js
index 01dd512c5d3..846fd63e918 100644
--- a/spec/frontend/serverless/components/functions_spec.js
+++ b/spec/frontend/serverless/components/functions_spec.js
@@ -1,5 +1,6 @@
-import { GlLoadingIcon } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon, GlAlert, GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -15,17 +16,16 @@ describe('functionsComponent', () => {
 
   let component;
   let store;
-  let localVue;
   let axiosMock;
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
     axiosMock.onGet(statusPath).reply(200);
 
-    localVue = createLocalVue();
-    localVue.use(Vuex);
+    Vue.use(Vuex);
 
     store = createStore({});
+    component = shallowMount(functionsComponent, { store, stubs: { GlSprintf } });
   });
 
   afterEach(() => {
@@ -33,23 +33,26 @@ describe('functionsComponent', () => {
     axiosMock.restore();
   });
 
-  it('should render empty state when Knative is not installed', () => {
-    store.dispatch('receiveFunctionsSuccess', { knative_installed: false });
-    component = shallowMount(functionsComponent, { localVue, store });
+  it('should render deprecation notice', () => {
+    expect(component.findComponent(GlAlert).text()).toBe(
+      'Serverless was deprecated in GitLab 14.3.',
+    );
+  });
+
+  it('should render empty state when Knative is not installed', async () => {
+    await store.dispatch('receiveFunctionsSuccess', { knative_installed: false });
 
-    expect(component.find(EmptyState).exists()).toBe(true);
+    expect(component.findComponent(EmptyState).exists()).toBe(true);
   });
 
-  it('should render a loading component', () => {
-    store.dispatch('requestFunctionsLoading');
-    component = shallowMount(functionsComponent, { localVue, store });
+  it('should render a loading component', async () => {
+    await store.dispatch('requestFunctionsLoading');
 
-    expect(component.find(GlLoadingIcon).exists()).toBe(true);
+    expect(component.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
-  it('should render empty state when there is no function data', () => {
-    store.dispatch('receiveFunctionsNoDataSuccess', { knative_installed: true });
-    component = shallowMount(functionsComponent, { localVue, store });
+  it('should render empty state when there is no function data', async () => {
+    await store.dispatch('receiveFunctionsNoDataSuccess', { knative_installed: true });
 
     expect(
       component.vm.$el
@@ -62,27 +65,22 @@ describe('functionsComponent', () => {
     );
   });
 
-  it('should render functions and a loader when functions are partially fetched', () => {
-    store.dispatch('receiveFunctionsPartial', {
+  it('should render functions and a loader when functions are partially fetched', async () => {
+    await store.dispatch('receiveFunctionsPartial', {
       ...mockServerlessFunctions,
       knative_installed: 'checking',
     });
 
-    component = shallowMount(functionsComponent, { localVue, store });
-
     expect(component.find('.js-functions-wrapper').exists()).toBe(true);
     expect(component.find('.js-functions-loader').exists()).toBe(true);
   });
 
-  it('should render the functions list', () => {
+  it('should render the functions list', async () => {
     store = createStore({ clustersPath: 'clustersPath', helpPath: 'helpPath', statusPath });
 
-    component = shallowMount(functionsComponent, { localVue, store });
-
-    component.vm.$store.dispatch('receiveFunctionsSuccess', mockServerlessFunctions);
+    await component.vm.$store.dispatch('receiveFunctionsSuccess', mockServerlessFunctions);
 
-    return component.vm.$nextTick().then(() => {
-      expect(component.find(EnvironmentRow).exists()).toBe(true);
-    });
+    await nextTick();
+    expect(component.findComponent(EnvironmentRow).exists()).toBe(true);
   });
 });