summaryrefslogtreecommitdiff
path: root/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js')
-rw-r--r--spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js95
1 files changed, 0 insertions, 95 deletions
diff --git a/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js b/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js
deleted file mode 100644
index b85f50ec998..00000000000
--- a/spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * 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 { createLocalVue } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
-import Dashboard from '~/monitoring/components/dashboard.vue';
-import { createStore } from '~/monitoring/stores';
-import { metricsDashboardPayload, dashboardProps } from '../fixture_data';
-import { mockApiEndpoint } from '../mock_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: {
- ...dashboardProps,
- hasMetrics: true,
- showPanels: true,
- },
- store,
- provide: { hasManagedPrometheus: false },
- });
-
- 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);
- });
- });
-});