1 files changed, 28 insertions, 8 deletions

diff --git a/spec/frontend/serverless/components/functions_spec.js b/spec/frontend/serverless/components/functions_spec.js
index 7af33ceaadc..d8a80f8031e 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';
 
@@ -31,11 +34,11 @@ describe('functionsComponent', () => {
   });
 
   it('should render empty state when Knative is not installed', () => {
+    store.dispatch('receiveFunctionsSuccess', { knative_installed: false });
     component = shallowMount(functionsComponent, {
       localVue,
       store,
       propsData: {
-        installed: false,
         clustersPath: '',
         helpPath: '',
         statusPath: '',
@@ -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', () => {
@@ -52,7 +55,6 @@ describe('functionsComponent', () => {
       localVue,
       store,
       propsData: {
-        installed: true,
         clustersPath: '',
         helpPath: '',
         statusPath: '',
@@ -60,16 +62,15 @@ 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', () => {
-    store.dispatch('receiveFunctionsNoDataSuccess');
+    store.dispatch('receiveFunctionsNoDataSuccess', { knative_installed: true });
     component = shallowMount(functionsComponent, {
       localVue,
       store,
       propsData: {
-        installed: true,
         clustersPath: '',
         helpPath: '',
         statusPath: '',
@@ -88,12 +89,31 @@ describe('functionsComponent', () => {
     );
   });
 
+  it('should render functions and a loader when functions are partially fetched', () => {
+    store.dispatch('receiveFunctionsPartial', {
+      ...mockServerlessFunctions,
+      knative_installed: 'checking',
+    });
+    component = shallowMount(functionsComponent, {
+      localVue,
+      store,
+      propsData: {
+        clustersPath: '',
+        helpPath: '',
+        statusPath: '',
+      },
+      sync: false,
+    });
+
+    expect(component.find('.js-functions-wrapper').exists()).toBe(true);
+    expect(component.find('.js-functions-loader').exists()).toBe(true);
+  });
+
   it('should render the functions list', () => {
     component = shallowMount(functionsComponent, {
       localVue,
       store,
       propsData: {
-        installed: true,
         clustersPath: 'clustersPath',
         helpPath: 'helpPath',
         statusPath,
@@ -104,7 +124,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);
     });
   });
 });