1 files changed, 26 insertions, 7 deletions

diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js
index 90bd6f67196..3b94c4c6806 100644
--- a/spec/frontend/monitoring/components/group_empty_state_spec.js
+++ b/spec/frontend/monitoring/components/group_empty_state_spec.js
@@ -1,7 +1,13 @@
+import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import { metricStates } from '~/monitoring/constants';
 
+const MockGlEmptyState = {
+  props: GlEmptyState.props,
+  template: '<div><slot name="description"></slot></div>',
+};
+
 function createComponent(props) {
   return shallowMount(GroupEmptyState, {
     propsData: {
@@ -10,11 +16,20 @@ function createComponent(props) {
       settingsPath: '/path/to/settings',
       svgPath: '/path/to/empty-group-illustration.svg',
     },
+    stubs: {
+      GlEmptyState: MockGlEmptyState,
+    },
   });
 }
 
 describe('GroupEmptyState', () => {
-  const supportedStates = [
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each([
     metricStates.NO_DATA,
     metricStates.TIMEOUT,
     metricStates.CONNECTION_FAILED,
@@ -22,13 +37,17 @@ describe('GroupEmptyState', () => {
     metricStates.LOADING,
     metricStates.UNKNOWN_ERROR,
     'FOO STATE', // does not fail with unknown states
-  ];
+  ])('given state %s', selectedState => {
+    beforeEach(() => {
+      wrapper = createComponent({ selectedState });
+    });
 
-  it.each(supportedStates)('Renders an empty state for %s', selectedState => {
-    const wrapper = createComponent({ selectedState });
+    it('renders the slotted content', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
 
-    expect(wrapper.element).toMatchSnapshot();
-    // slot is not rendered by the stub, test it separately
-    expect(wrapper.vm.currentState.slottedDescription).toMatchSnapshot();
+    it('passes the expected props to GlEmptyState', () => {
+      expect(wrapper.find(MockGlEmptyState).props()).toMatchSnapshot();
+    });
   });
 });