1 files changed, 94 insertions, 0 deletions
diff --git a/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js b/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js
new file mode 100644
index 00000000000..4416dbd014a
--- /dev/null
+++ b/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js
@@ -0,0 +1,94 @@
+/**
+ * This file should only contain browser specific specs.
+ * If you need to add or update a spec, please see spec/frontend/monitoring/components/*.js
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/194244#note_343427737
+ * https://gitlab.com/groups/gitlab-org/-/epics/895#what-if-theres-a-karma-spec-which-is-simply-unmovable-to-jest-ie-it-is-dependent-on-a-running-browser-environment
+ */
+
+import Vue from 'vue';
+import { createLocalVue } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { createStore } from '~/monitoring/stores';
+import axios from '~/lib/utils/axios_utils';
+import { mockApiEndpoint, propsData } from '../mock_data';
+import { metricsDashboardPayload } from '../fixture_data';
+import { setupStoreWithData } from '../store_utils';
+
+const localVue = createLocalVue();
+
+describe('Dashboard', () => {
+  let DashboardComponent;
+  let mock;
+  let store;
+  let component;
+  let wrapper;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="prometheus-graphs"></div>
+      <div class="layout-page"></div>
+    `);
+
+    store = createStore();
+    mock = new MockAdapter(axios);
+    DashboardComponent = localVue.extend(Dashboard);
+  });
+
+  afterEach(() => {
+    if (component) {
+      component.$destroy();
+    }
+    if (wrapper) {
+      wrapper.destroy();
+    }
+    mock.restore();
+  });
+
+  describe('responds to window resizes', () => {
+    let promPanel;
+    let promGroup;
+    let panelToggle;
+    let chart;
+    beforeEach(() => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsDashboardPayload);
+
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: true,
+        },
+        store,
+      });
+
+      setupStoreWithData(component.$store);
+
+      return Vue.nextTick().then(() => {
+        [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');
+      });
+    });
+
+    it('setting chart size to zero when panel group is hidden', () => {
+      expect(promGroup.style.display).toBe('');
+      expect(chart.clientWidth).toBeGreaterThan(0);
+
+      panelToggle.click();
+      return Vue.nextTick().then(() => {
+        expect(promGroup.style.display).toBe('none');
+        expect(chart.clientWidth).toBe(0);
+        promPanel.style.width = '500px';
+      });
+    });
+
+    it('expanding chart panel group after resize displays chart', () => {
+      panelToggle.click();
+
+      expect(chart.clientWidth).toBeGreaterThan(0);
+    });
+  });
+});