1 files changed, 72 insertions, 54 deletions

diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js
index 92829135c0f..81f5d90c310 100644
--- a/spec/frontend/monitoring/components/graph_group_spec.js
+++ b/spec/frontend/monitoring/components/graph_group_spec.js
@@ -1,13 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
 import GraphGroup from '~/monitoring/components/graph_group.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 
 describe('Graph group component', () => {
   let wrapper;
 
   const findGroup = () => wrapper.find({ ref: 'graph-group' });
   const findContent = () => wrapper.find({ ref: 'graph-group-content' });
-  const findCaretIcon = () => wrapper.find(Icon);
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findCaretIcon = () => wrapper.find(GlIcon);
   const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]');
 
   const createComponent = propsData => {
@@ -28,28 +29,28 @@ describe('Graph group component', () => {
       });
     });
 
+    it('should not show a loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
     it('should show the angle-down caret icon', () => {
       expect(findContent().isVisible()).toBe(true);
       expect(findCaretIcon().props('name')).toBe('angle-down');
     });
 
     it('should show the angle-right caret icon when the user collapses the group', () => {
-      wrapper.vm.collapse();
+      findToggleButton().trigger('click');
 
-      return wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findContent().isVisible()).toBe(false);
         expect(findCaretIcon().props('name')).toBe('angle-right');
       });
     });
 
-    it('should contain a tabindex', () => {
-      expect(findGroup().contains('[tabindex]')).toBe(true);
-    });
-
     it('should contain a tab index for the collapse button', () => {
       const groupToggle = findToggleButton();
 
-      expect(groupToggle.contains('[tabindex]')).toBe(true);
+      expect(groupToggle.is('[tabindex]')).toBe(true);
     });
 
     it('should show the open the group when collapseGroup is set to true', () => {
@@ -57,77 +58,94 @@ describe('Graph group component', () => {
         collapseGroup: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findContent().isVisible()).toBe(true);
         expect(findCaretIcon().props('name')).toBe('angle-down');
       });
     });
+  });
 
-    describe('When group is collapsed', () => {
-      beforeEach(() => {
-        createComponent({
-          name: 'panel',
-          collapseGroup: true,
-        });
+  describe('When group is collapsed', () => {
+    beforeEach(() => {
+      createComponent({
+        name: 'panel',
+        collapseGroup: true,
       });
+    });
 
-      it('should show the angle-down caret icon when collapseGroup is true', () => {
-        expect(wrapper.vm.caretIcon).toBe('angle-right');
-      });
+    it('should show the angle-down caret icon when collapseGroup is true', () => {
+      expect(findCaretIcon().props('name')).toBe('angle-right');
+    });
 
-      it('should show the angle-right caret icon when collapseGroup is false', () => {
-        wrapper.vm.collapse();
+    it('should show the angle-right caret icon when collapseGroup is false', () => {
+      findToggleButton().trigger('click');
 
-        expect(wrapper.vm.caretIcon).toBe('angle-down');
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCaretIcon().props('name')).toBe('angle-down');
       });
+    });
 
-      it('should call collapse the graph group content when enter is pressed on the caret icon', () => {
-        const graphGroupContent = findContent();
-        const button = findToggleButton();
+    it('should call collapse the graph group content when enter is pressed on the caret icon', () => {
+      const graphGroupContent = findContent();
+      const button = findToggleButton();
 
-        button.trigger('keyup.enter');
+      button.trigger('keyup.enter');
+
+      expect(graphGroupContent.isVisible()).toBe(false);
+    });
+  });
 
-        expect(graphGroupContent.isVisible()).toBe(false);
+  describe('When groups can not be collapsed', () => {
+    beforeEach(() => {
+      createComponent({
+        name: 'panel',
+        showPanels: false,
+        collapseGroup: false,
       });
     });
 
-    describe('When groups can not be collapsed', () => {
-      beforeEach(() => {
-        createComponent({
-          name: 'panel',
-          showPanels: false,
-          collapseGroup: false,
-        });
+    it('should not have a container when showPanels is false', () => {
+      expect(findGroup().exists()).toBe(false);
+      expect(findContent().exists()).toBe(true);
+    });
+  });
+
+  describe('When group is loading', () => {
+    beforeEach(() => {
+      createComponent({
+        name: 'panel',
+        isLoading: true,
       });
+    });
 
-      it('should not have a container when showPanels is false', () => {
-        expect(findGroup().exists()).toBe(false);
-        expect(findContent().exists()).toBe(true);
+    it('should show a loading icon', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('When group does not show a panel heading', () => {
+    beforeEach(() => {
+      createComponent({
+        name: 'panel',
+        showPanels: false,
+        collapseGroup: false,
       });
     });
 
-    describe('When group does not show a panel heading', () => {
-      beforeEach(() => {
-        createComponent({
-          name: 'panel',
-          showPanels: false,
-          collapseGroup: false,
-        });
+    it('should collapse the panel content', () => {
+      expect(findContent().isVisible()).toBe(true);
+      expect(findCaretIcon().exists()).toBe(false);
+    });
+
+    it('should show the panel content when collapse is set to false', () => {
+      wrapper.setProps({
+        collapseGroup: false,
       });
 
-      it('should collapse the panel content', () => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findContent().isVisible()).toBe(true);
         expect(findCaretIcon().exists()).toBe(false);
       });
-
-      it('should show the panel content when clicked', () => {
-        wrapper.vm.collapse();
-
-        return wrapper.vm.$nextTick(() => {
-          expect(findContent().isVisible()).toBe(true);
-          expect(findCaretIcon().exists()).toBe(false);
-        });
-      });
     });
   });
 });