1 files changed, 17 insertions, 6 deletions
diff --git a/spec/frontend/monitoring/components/empty_state_spec.js b/spec/frontend/monitoring/components/empty_state_spec.js
index e985e5fb443..abb8b21e9f4 100644
--- a/spec/frontend/monitoring/components/empty_state_spec.js
+++ b/spec/frontend/monitoring/components/empty_state_spec.js
@@ -1,10 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
+import { dashboardEmptyStates } from '~/monitoring/constants';
 import EmptyState from '~/monitoring/components/empty_state.vue';
 
 function createComponent(props) {
   return shallowMount(EmptyState, {
     propsData: {
-      ...props,
       settingsPath: '/settingsPath',
       clustersPath: '/clustersPath',
       documentationPath: '/documentationPath',
@@ -13,30 +14,40 @@ function createComponent(props) {
       emptyNoDataSvgPath: '/path/to/no-data.svg',
       emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
       emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
+      ...props,
     },
   });
 }
 
 describe('EmptyState', () => {
+  it('shows loading state with a loading icon', () => {
+    const wrapper = createComponent({
+      selectedState: dashboardEmptyStates.LOADING,
+    });
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.find(GlEmptyState).exists()).toBe(false);
+  });
+
   it('shows gettingStarted state', () => {
     const wrapper = createComponent({
-      selectedState: 'gettingStarted',
+      selectedState: dashboardEmptyStates.GETTING_STARTED,
     });
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('shows loading state', () => {
+  it('shows unableToConnect state', () => {
     const wrapper = createComponent({
-      selectedState: 'loading',
+      selectedState: dashboardEmptyStates.UNABLE_TO_CONNECT,
     });
 
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('shows unableToConnect state', () => {
+  it('shows noData state', () => {
     const wrapper = createComponent({
-      selectedState: 'unableToConnect',
+      selectedState: dashboardEmptyStates.NO_DATA,
     });
 
     expect(wrapper.element).toMatchSnapshot();