Add latest changes from gitlab-org/gitlab@master

1 files changed, 96 insertions, 6 deletions

diff --git a/spec/javascripts/monitoring/components/dashboard_spec.js b/spec/javascripts/monitoring/components/dashboard_spec.js
index ab3ab477708..1b2b01d1c8c 100644
--- a/spec/javascripts/monitoring/components/dashboard_spec.js
+++ b/spec/javascripts/monitoring/components/dashboard_spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlToast } from '@gitlab/ui';
+import VueDraggable from 'vuedraggable';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
@@ -51,11 +52,6 @@ describe('Dashboard', () => {
       <div class="layout-page"></div>
     `);
 
-    window.gon = {
-      ...window.gon,
-      ee: false,
-    };
-
     store = createStore();
     mock = new MockAdapter(axios);
     DashboardComponent = Vue.extend(Dashboard);
@@ -378,7 +374,101 @@ describe('Dashboard', () => {
     });
   });
 
-  // https://gitlab.com/gitlab-org/gitlab-foss/issues/66922
+  describe('drag and drop function', () => {
+    let wrapper;
+    let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
+    const findDraggables = () => wrapper.findAll(VueDraggable);
+    const findEnabledDraggables = () => findDraggables().filter(f => !f.attributes('disabled'));
+    const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
+    const findRearrangeButton = () => wrapper.find('.js-rearrange-button');
+
+    beforeEach(done => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+      expectedPanelCount = metricsGroupsAPIResponse.data.reduce(
+        (acc, d) => d.metrics.length + acc,
+        0,
+      );
+      store.dispatch('monitoringDashboard/setFeatureFlags', { additionalPanelTypesEnabled: true });
+
+      wrapper = shallowMount(DashboardComponent, {
+        localVue,
+        sync: false,
+        propsData: { ...propsData, hasMetrics: true },
+        store,
+      });
+
+      // not using $nextTicket becuase we must wait for the dashboard
+      // to be populated with the mock data results.
+      setTimeout(done);
+    });
+
+    it('wraps vuedraggable', () => {
+      expect(findDraggablePanels().exists()).toBe(true);
+      expect(findDraggablePanels().length).toEqual(expectedPanelCount);
+    });
+
+    it('is disabled by default', () => {
+      expect(findRearrangeButton().exists()).toBe(false);
+      expect(findEnabledDraggables().length).toBe(0);
+    });
+
+    describe('when rearrange is enabled', () => {
+      beforeEach(done => {
+        wrapper.setProps({ rearrangePanelsAvailable: true });
+        wrapper.vm.$nextTick(done);
+      });
+
+      it('displays rearrange button', () => {
+        expect(findRearrangeButton().exists()).toBe(true);
+      });
+
+      describe('when rearrange button is clicked', () => {
+        const findFirstDraggableRemoveButton = () =>
+          findDraggablePanels()
+            .at(0)
+            .find('.js-draggable-remove');
+
+        beforeEach(done => {
+          findRearrangeButton().vm.$emit('click');
+          wrapper.vm.$nextTick(done);
+        });
+
+        it('it enables draggables', () => {
+          expect(findRearrangeButton().attributes('pressed')).toBeTruthy();
+          expect(findEnabledDraggables()).toEqual(findDraggables());
+        });
+
+        it('shows a remove button, which removes a panel', done => {
+          expect(findFirstDraggableRemoveButton().isEmpty()).toBe(false);
+
+          expect(findDraggablePanels().length).toEqual(expectedPanelCount);
+          findFirstDraggableRemoveButton().trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            // At present graphs will not be removed in backend
+            // See https://gitlab.com/gitlab-org/gitlab/issues/27835
+            expect(findDraggablePanels().length).toEqual(expectedPanelCount - 1);
+            done();
+          });
+        });
+
+        it('it disables draggables when clicked again', done => {
+          findRearrangeButton().vm.$emit('click');
+          wrapper.vm.$nextTick(() => {
+            expect(findRearrangeButton().attributes('pressed')).toBeFalsy();
+            expect(findEnabledDraggables().length).toBe(0);
+            done();
+          });
+        });
+      });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+  });
+
+  // https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
   // eslint-disable-next-line jasmine/no-disabled-tests
   xdescribe('link to chart', () => {
     let wrapper;