Add latest changes from gitlab-org/gitlab@master

2 files changed, 125 insertions, 60 deletions

diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index 3529a3d72ba..7d6a1d7b097 100644
--- a/spec/javascripts/monitoring/components/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -4,11 +4,13 @@ import { GlToast } from '@gitlab/ui';
 import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+import EmptyState from '~/monitoring/components/empty_state.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 import { createStore } from '~/monitoring/stores';
 import axios from '~/lib/utils/axios_utils';
 import {
   metricsGroupsAPIResponse,
+  mockedEmptyResult,
   mockedQueryResultPayload,
   mockedQueryResultPayloadCoresTotal,
   mockApiEndpoint,
@@ -29,6 +31,7 @@ const propsData = {
   emptyGettingStartedSvgPath: '/path/to/getting-started.svg',
   emptyLoadingSvgPath: '/path/to/loading.svg',
   emptyNoDataSvgPath: '/path/to/no-data.svg',
+  emptyNoDataSmallSvgPath: '/path/to/no-data-small.svg',
   emptyUnableToConnectSvgPath: '/path/to/unable-to-connect.svg',
   environmentsEndpoint: '/root/hello-prometheus/environments/35',
   currentEnvironmentName: 'production',
@@ -43,15 +46,17 @@ const resetSpy = spy => {
   }
 };
 
-export default propsData;
+let expectedPanelCount;
 
 function setupComponentStore(component) {
+  // Load 2 panel groups
   component.$store.commit(
     `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
     metricsGroupsAPIResponse,
   );
 
-  // Load 2 panels to the dashboard
+  // Load 3 panels to the dashboard, one with an empty result
+  component.$store.commit(`monitoringDashboard/${types.SET_QUERY_RESULT}`, mockedEmptyResult);
   component.$store.commit(
     `monitoringDashboard/${types.SET_QUERY_RESULT}`,
     mockedQueryResultPayload,
@@ -61,6 +66,8 @@ function setupComponentStore(component) {
     mockedQueryResultPayloadCoresTotal,
   );
 
+  expectedPanelCount = 2;
+
   component.$store.commit(
     `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
     environmentData,
@@ -126,13 +133,9 @@ describe('Dashboard', () => {
 
   describe('no data found', () => {
     it('shows the environment selector dropdown', () => {
-      component = new DashboardComponent({
-        el: document.querySelector('.prometheus-graphs'),
-        propsData: { ...propsData, showEmptyState: true },
-        store,
-      });
+      createComponentWrapper();
 
-      expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+      expect(wrapper.find('.js-environments-dropdown').exists()).toBeTruthy();
     });
   });
 
@@ -389,9 +392,36 @@ describe('Dashboard', () => {
     });
   });
 
-  describe('drag and drop function', () => {
-    let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
+  describe('when one of the metrics is missing', () => {
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+    });
+
+    beforeEach(done => {
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
+      setupComponentStore(wrapper.vm);
+
+      wrapper.vm.$nextTick(done);
+    });
 
+    it('shows a group empty area', () => {
+      const emptyGroup = wrapper.findAll({ ref: 'empty-group' });
+
+      expect(emptyGroup).toHaveLength(1);
+      expect(emptyGroup.is(EmptyState)).toBe(true);
+    });
+
+    it('group empty area displays a "noDataGroup"', () => {
+      expect(
+        wrapper
+          .findAll({ ref: 'empty-group' })
+          .at(0)
+          .props('selectedState'),
+      ).toEqual('noDataGroup');
+    });
+  });
+
+  describe('drag and drop function', () => {
     const findDraggables = () => wrapper.findAll(VueDraggable);
     const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
     const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
@@ -399,10 +429,6 @@ describe('Dashboard', () => {
 
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
-      expectedPanelCount = metricsGroupsAPIResponse.reduce(
-        (acc, group) => group.panels.length + acc,
-        0,
-      );
     });
 
     beforeEach(done => {
@@ -417,10 +443,6 @@ describe('Dashboard', () => {
       wrapper.destroy();
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('wraps vuedraggable', () => {
       expect(findDraggablePanels().exists()).toBe(true);
       expect(findDraggablePanels().length).toEqual(expectedPanelCount);
@@ -459,22 +481,20 @@ describe('Dashboard', () => {
 
         it('metrics can be swapped', done => {
           const firstDraggable = findDraggables().at(0);
-          const mockMetrics = [...metricsGroupsAPIResponse[0].panels];
-          const value = () => firstDraggable.props('value');
+          const mockMetrics = [...metricsGroupsAPIResponse[1].panels];
 
-          expect(value().length).toBe(mockMetrics.length);
-          value().forEach((metric, i) => {
-            expect(metric.title).toBe(mockMetrics[i].title);
-          });
+          const firstTitle = mockMetrics[0].title;
+          const secondTitle = mockMetrics[1].title;
 
           // swap two elements and `input` them
           [mockMetrics[0], mockMetrics[1]] = [mockMetrics[1], mockMetrics[0]];
           firstDraggable.vm.$emit('input', mockMetrics);
 
-          firstDraggable.vm.$nextTick(() => {
-            value().forEach((metric, i) => {
-              expect(metric.title).toBe(mockMetrics[i].title);
-            });
+          wrapper.vm.$nextTick(() => {
+            const { panels } = wrapper.vm.dashboard.panel_groups[1];
+
+            expect(panels[1].title).toEqual(firstTitle);
+            expect(panels[0].title).toEqual(secondTitle);
             done();
           });
         });
@@ -584,7 +604,7 @@ describe('Dashboard', () => {
       setupComponentStore(component);
 
       return Vue.nextTick().then(() => {
-        promPanel = component.$el.querySelector('.prometheus-panel');
+        [, promPanel] = component.$el.querySelectorAll('.prometheus-panel');
         promGroup = promPanel.querySelector('.prometheus-graph-group');
         panelToggle = promPanel.querySelector('.js-graph-group-toggle');
         chart = promGroup.querySelector('.position-relative svg');
diff --git a/spec/javascripts/monitoring/components/graph_group_spec.js b/spec/javascripts/monitoring/components/graph_group_spec.js
index 04371091ca8..43ca17c3cbc 100644
--- a/spec/javascripts/monitoring/components/graph_group_spec.js
+++ b/spec/javascripts/monitoring/components/graph_group_spec.js
@@ -1,16 +1,18 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GraphGroup from '~/monitoring/components/graph_group.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 const localVue = createLocalVue();
 
 describe('Graph group component', () => {
-  let graphGroup;
+  let wrapper;
 
-  const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
-  const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
+  const findGroup = () => wrapper.find({ ref: 'graph-group' });
+  const findContent = () => wrapper.find({ ref: 'graph-group-content' });
+  const findCaretIcon = () => wrapper.find(Icon);
 
   const createComponent = propsData => {
-    graphGroup = shallowMount(localVue.extend(GraphGroup), {
+    wrapper = shallowMount(localVue.extend(GraphGroup), {
       propsData,
       sync: false,
       localVue,
@@ -18,57 +20,100 @@ describe('Graph group component', () => {
   };
 
   afterEach(() => {
-    graphGroup.destroy();
+    wrapper.destroy();
   });
 
-  describe('When groups can be collapsed', () => {
+  describe('When group is not collapsed', () => {
     beforeEach(() => {
       createComponent({
         name: 'panel',
-        collapseGroup: true,
+        collapseGroup: false,
       });
     });
 
-    it('should show the angle-down caret icon when collapseGroup is true', () => {
-      expect(graphGroup.vm.caretIcon).toBe('angle-down');
+    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 collapseGroup is false', () => {
-      graphGroup.vm.collapse();
+    it('should show the angle-right caret icon when the user collapses the group', done => {
+      wrapper.vm.collapse();
 
-      expect(graphGroup.vm.caretIcon).toBe('angle-right');
+      wrapper.vm.$nextTick(() => {
+        expect(findContent().isVisible()).toBe(false);
+        expect(findCaretIcon().props('name')).toBe('angle-right');
+        done();
+      });
     });
-  });
 
-  describe('When groups can not be collapsed', () => {
-    beforeEach(() => {
-      createComponent({
-        name: 'panel',
+    it('should show the open the group when collapseGroup is set to true', done => {
+      wrapper.setProps({
         collapseGroup: true,
-        showPanels: false,
+      });
+
+      wrapper.vm.$nextTick(() => {
+        expect(findContent().isVisible()).toBe(true);
+        expect(findCaretIcon().props('name')).toBe('angle-down');
+        done();
       });
     });
 
-    it('should not contain a prometheus-panel container when showPanels is false', () => {
-      expect(findPrometheusPanel().exists()).toBe(false);
+    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-right caret icon when collapseGroup is false', () => {
+        wrapper.vm.collapse();
+
+        expect(wrapper.vm.caretIcon).toBe('angle-down');
+      });
     });
-  });
 
-  describe('When collapseGroup prop is updated', () => {
-    beforeEach(() => {
-      createComponent({ name: 'panel', 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);
+      });
     });
 
-    it('previously collapsed group should respond to the prop change', done => {
-      expect(findPrometheusGroup().exists()).toBe(false);
+    describe('When group does not show a panel heading', () => {
+      beforeEach(() => {
+        createComponent({
+          name: 'panel',
+          showPanels: false,
+          collapseGroup: false,
+        });
+      });
 
-      graphGroup.setProps({
-        collapseGroup: true,
+      it('should collapse the panel content', () => {
+        expect(findContent().isVisible()).toBe(true);
+        expect(findCaretIcon().exists()).toBe(false);
       });
 
-      graphGroup.vm.$nextTick(() => {
-        expect(findPrometheusGroup().exists()).toBe(true);
-        done();
+      it('should show the panel content when clicked', done => {
+        wrapper.vm.collapse();
+
+        wrapper.vm.$nextTick(() => {
+          expect(findContent().isVisible()).toBe(true);
+          expect(findCaretIcon().exists()).toBe(false);
+          done();
+        });
       });
     });
   });