Add caret icons to the monitoring dashboard

The carets will function as a button that will allow the panels
from the monitoring dashboard to collapse and show panels

1 files changed, 47 insertions, 0 deletions

diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js
new file mode 100644
index 00000000000..068c4b5302c
--- /dev/null
+++ b/spec/javascripts/monitoring/components/graph_group_spec.js
@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import GraphGroup from '~/monitoring/components/graph_group.vue';
+
+describe('Graph group component', () => {
+  let graphGroup;
+
+  afterEach(() => {
+    graphGroup.destroy();
+  });
+
+  describe('When groups can be collapsed', () => {
+    beforeEach(() => {
+      graphGroup = shallowMount(GraphGroup, {
+        propsData: {
+          name: 'panel',
+          collapseGroup: true,
+        },
+      });
+    });
+
+    it('should show the angle-down caret icon when collapseGroup is true', () => {
+      expect(graphGroup.vm.caretIcon).toBe('angle-down');
+    });
+
+    it('should show the angle-right caret icon when collapseGroup is false', () => {
+      graphGroup.vm.collapse();
+
+      expect(graphGroup.vm.caretIcon).toBe('angle-right');
+    });
+  });
+
+  describe('When groups can not be collapsed', () => {
+    beforeEach(() => {
+      graphGroup = shallowMount(GraphGroup, {
+        propsData: {
+          name: 'panel',
+          collapseGroup: true,
+          showPanels: false,
+        },
+      });
+    });
+
+    it('should not contain a prometheus-graph-group container when showPanels is false', () => {
+      expect(graphGroup.vm.$el.querySelector('.prometheus-graph-group')).toBe(null);
+    });
+  });
+});