Skip to content

G
gitlab-ce
Commit 3d7b3300 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Lin Jen-Shin
Browse files
Options

Revert "Merge branch 'winh-fix-flaky-dashboard_spec' into 'master'" 

This reverts merge request !32571
parent 222d9e62
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 190 deletions
spec/frontend/environment.js
View file @ 3d7b3300
......@@ -40,7 +40,6 @@ class CustomEnvironment extends JSDOMEnvironment {
this.global.fixturesBasePath = `${ROOT_PATH}/tmp/tests/frontend/fixtures${IS_EE ? '-ee' : ''}`;
this.global.staticFixturesBasePath = `${ROOT_PATH}/spec/frontend/fixtures`;
this.global.IS_EE = IS_EE;
// Not yet supported by JSDOM: https://github.com/jsdom/jsdom/issues/317
this.global.document.createRange = () => ({
......
spec/frontend/test_setup.js
View file @ 3d7b3300
......@@ -73,9 +73,6 @@ expect.extend(customMatchers);
// Tech debt issue TBD
testUtilsConfig.logModifiedComponents = false;
// Stub for URL.createObjectURL
window.URL.createObjectURL = function createObjectURL() {};
// Basic stub for MutationObserver
global.MutationObserver = () => ({
disconnect: () => {},
......
spec/frontend/monitoring/components/dashboard_spec.js → spec/javascripts/monitoring/components/dashboard_spec.js
View file @ 3d7b3300
import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { GlToast, GlDropdownItem } from '@gitlab/ui';
import { GlToast } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter';
import Dashboard from '~/monitoring/components/dashboard.vue';
import GraphGroup from '~/monitoring/components/graph_group.vue';
import EmptyState from '~/monitoring/components/empty_state.vue';
import { timeWindows } from '~/monitoring/constants';
import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
import * as types from '~/monitoring/stores/mutation_types';
import { createStore } from '~/monitoring/stores';
import axios from '~/lib/utils/axios_utils';
// TODO: replace with dynamic fixture
// https://gitlab.com/gitlab-org/gitlab-ce/issues/62785
import MonitoringMock, {
metricsGroupsAPIResponse,
mockApiEndpoint,
environmentData,
singleGroupResponse,
dashboardGitResponse,
} from '../../../../spec/javascripts/monitoring/mock_data';
/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
// see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/32571#note_211860465
function setupComponentStore(component) {
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
metricsGroupsAPIResponse,
);
component.$store.commit(
`monitoringDashboard/${types.SET_QUERY_RESULT}`,
mockedQueryResultPayload,
);
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
}
// Mock imported files while retaining the original behaviour
// See https://github.com/facebook/jest/issues/936#issuecomment-265074320
function mockMonitoringUtils() {
const original = require.requireActual('~/monitoring/utils');
return {
...original, // Pass down all the exported objects
getTimeDiff: jest.spyOn(original, 'getTimeDiff'),
};
}
jest.mock('~/monitoring/utils', () => mockMonitoringUtils());
const monitoringUtils = require.requireMock('~/monitoring/utils');
function mockUrlUtility() {
const original = require.requireActual('~/lib/utils/url_utility');
return {
...original, // Pass down all the exported objects
getParameterValues: jest.spyOn(original, 'getParameterValues'),
};
}
jest.mock('~/lib/utils/url_utility', () => mockUrlUtility());
const urlUtility = require.requireMock('~/lib/utils/url_utility');
} from '../mock_data';
const localVue = createLocalVue();
const propsData = {
......@@ -128,7 +83,7 @@ describe('Dashboard', () => {
});
it('shows the environment selector', () => {
expect(component.$el.querySelector('#monitor-environments-dropdown')).toBeTruthy();
expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
});
});
......@@ -140,7 +95,7 @@ describe('Dashboard', () => {
store,
});
expect(component.$el.querySelector('#monitor-environments-dropdown')).toBeTruthy();
expect(component.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
});
});
......@@ -162,27 +117,47 @@ describe('Dashboard', () => {
});
});
it('hides the legend when showLegend is false', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showLegend: false,
},
store,
});
setTimeout(() => {
expect(component.showEmptyState).toEqual(false);
expect(component.$el.querySelector('.legend-group')).toEqual(null);
expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
done();
});
});
it('hides the group panels when showPanels is false', done => {
const wrapper = shallowMount(DashboardComponent, {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
},
store,
sync: false,
localVue,
});
setImmediate(() => {
expect(wrapper.find(EmptyState).exists()).toBe(false);
expect(wrapper.find(GraphGroup).exists()).toBe(true);
expect(wrapper.find(GraphGroup).props().showPanels).toBe(false);
setTimeout(() => {
expect(component.showEmptyState).toEqual(false);
expect(component.$el.querySelector('.prometheus-panel')).toEqual(null);
expect(component.$el.querySelector('.prometheus-graph-group')).toBeTruthy();
done();
});
});
it('renders the environments dropdown with a number of environments', () => {
const wrapper = shallowMount(DashboardComponent, {
it('renders the environments dropdown with a number of environments', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
......@@ -191,30 +166,38 @@ describe('Dashboard', () => {
store,
});
store.commit(
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
store.commit(
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
singleGroupResponse,
);
Vue.nextTick(() => {
const dropdownMenuEnvironments = wrapper
.find('.js-environments-dropdown')
.findAll(GlDropdownItem);
Vue.nextTick()
.then(() => {
const dropdownMenuEnvironments = component.$el.querySelectorAll(
'.js-environments-dropdown .dropdown-item',
);
expect(environmentData.length).toBeGreaterThan(0);
expect(dropdownMenuEnvironments.length).toEqual(environmentData.length);
dropdownMenuEnvironments.wrappers.forEach((value, index) => {
expect(value.attributes('href')).toEqual(environmentData[index].metrics_path);
});
});
expect(component.environments.length).toEqual(environmentData.length);
expect(dropdownMenuEnvironments.length).toEqual(component.environments.length);
Array.from(dropdownMenuEnvironments).forEach((value, index) => {
if (environmentData[index].metrics_path) {
expect(value).toHaveAttr('href', environmentData[index].metrics_path);
}
});
done();
})
.catch(done.fail);
});
it('hides the environments dropdown list when there is no environments', () => {
const wrapper = shallowMount(DashboardComponent, {
it('hides the environments dropdown list when there is no environments', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
......@@ -223,48 +206,54 @@ describe('Dashboard', () => {
store,
});
const findEnvironmentsDropdownItems = () => wrapper.find('#monitor-environments-wrapper');
store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, []);
store.commit(
component.$store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, []);
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
singleGroupResponse,
);
return Vue.nextTick(() => {
expect(findEnvironmentsDropdownItems(wrapper).exists()).toEqual(false);
});
Vue.nextTick()
.then(() => {
const dropdownMenuEnvironments = component.$el.querySelectorAll(
'.js-environments-dropdown .dropdown-item',
);
expect(dropdownMenuEnvironments.length).toEqual(0);
done();
})
.catch(done.fail);
});
it('renders the environments dropdown with a single active element', () => {
const wrapper = shallowMount(DashboardComponent, {
it('renders the environments dropdown with a single active element', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
},
store,
sync: false,
localVue,
});
store.commit(
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
store.commit(
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
singleGroupResponse,
);
Vue.nextTick(() => {
const activeDropdownMenuEnvironments = wrapper
.find('#monitor-environments-dropdown')
.findAll(GlDropdownItem)
.filter(item => item.attributes('active') === 'true');
Vue.nextTick()
.then(() => {
const dropdownItems = component.$el.querySelectorAll(
'.js-environments-dropdown .dropdown-item.active',
);
expect(activeDropdownMenuEnvironments.length).toEqual(1);
});
expect(dropdownItems.length).toEqual(1);
done();
})
.catch(done.fail);
});
it('hides the dropdown', done => {
......@@ -288,40 +277,33 @@ describe('Dashboard', () => {
});
it('renders the time window dropdown with a set of options', done => {
const wrapper = shallowMount(DashboardComponent, {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
sync: false,
},
store,
});
const numberOfTimeWindows = Object.keys(timeWindows).length;
setImmediate(() => {
const timeWindowDropdown = wrapper.find('.js-time-window-dropdown');
const timeWindowDropdownEls = wrapper
.find('.js-time-window-dropdown')
.findAll(GlDropdownItem);
setTimeout(() => {
const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown');
const timeWindowDropdownEls = component.$el.querySelectorAll(
'.js-time-window-dropdown .dropdown-item',
);
expect(timeWindowDropdown.exists()).toBe(true);
expect(timeWindowDropdown).not.toBeNull();
expect(timeWindowDropdownEls.length).toEqual(numberOfTimeWindows);
done();
});
});
it('fetches the metrics data with proper time window', () => {
jest.spyOn(store, 'dispatch').mockImplementationOnce(() => {});
store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
shallowMount(DashboardComponent, {
it('fetches the metrics data with proper time window', done => {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
......@@ -330,49 +312,75 @@ describe('Dashboard', () => {
store,
});
const defaultRange = monitoringUtils.getTimeDiff();
return Vue.nextTick().then(() => {
expect(store.dispatch).toHaveBeenCalledWith('monitoringDashboard/fetchData', defaultRange);
});
spyOn(component.$store, 'dispatch').and.stub();
const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff').and.callThrough();
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
component.$mount();
Vue.nextTick()
.then(() => {
expect(component.$store.dispatch).toHaveBeenCalled();
expect(getTimeDiffSpy).toHaveBeenCalled();
done();
})
.catch(done.fail);
});
it('shows a specific time window selected from the url params', done => {
const start = 1564439536;
const end = 1564441336;
monitoringUtils.getTimeDiff.mockReturnValueOnce({
spyOnDependency(Dashboard, 'getTimeDiff').and.returnValue({
start,
end,
});
urlUtility.getParameterValues.mockImplementationOnce(param => {
spyOnDependency(Dashboard, 'getParameterValues').and.callFake(param => {
if (param === 'start') return [start];
if (param === 'end') return [end];
return [];
});
const wrapper = shallowMount(DashboardComponent, {
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
},
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true },
store,
});
setImmediate(() => {
const activeTimeWindowItems = wrapper
.find('.js-time-window-dropdown')
.findAll(GlDropdownItem)
.filter(item => item.attributes('active') === 'true');
setTimeout(() => {
const selectedTimeWindow = component.$el.querySelector('.js-time-window-dropdown .active');
expect(selectedTimeWindow.textContent.trim()).toEqual('30 minutes');
done();
});
});
expect(activeTimeWindowItems.length).toEqual(1);
expect(activeTimeWindowItems.wrappers[0].text().trim()).toEqual('30 minutes');
it('defaults to the eight hours time window for non valid url parameters', done => {
spyOnDependency(Dashboard, 'getParameterValues').and.returnValue([
'<script>alert("XSS")</script>',
]);
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: { ...propsData, hasMetrics: true },
store,
});
Vue.nextTick(() => {
expect(component.selectedTimeWindowKey).toEqual(timeWindowsKeyNames.eightHours);
done();
});
});
});
describe('link to chart', () => {
// https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
// eslint-disable-next-line jasmine/no-disabled-tests
xdescribe('link to chart', () => {
let wrapper;
const currentDashboard = 'TEST_DASHBOARD';
localVue.use(GlToast);
......@@ -384,13 +392,13 @@ describe('Dashboard', () => {
wrapper = shallowMount(DashboardComponent, {
localVue,
sync: false,
attachToDocument: true,
propsData: { ...propsData, hasMetrics: true, currentDashboard },
store,
});
setImmediate(() => {
done();
});
setTimeout(done);
});
afterEach(() => {
......@@ -429,7 +437,7 @@ describe('Dashboard', () => {
});
it('creates a toast when clicked', () => {
jest.spyOn(wrapper.vm.$toast, 'show').mockImplementation(() => {});
spyOn(wrapper.vm.$toast, 'show').and.stub();
link().vm.$emit('click');
......@@ -440,6 +448,11 @@ describe('Dashboard', () => {
describe('when the window resizes', () => {
beforeEach(() => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
jasmine.clock().install();
});
afterEach(() => {
jasmine.clock().uninstall();
});
it('sets elWidth to page width when the sidebar is resized', done => {
......@@ -460,7 +473,7 @@ describe('Dashboard', () => {
Vue.nextTick()
.then(() => {
jest.advanceTimersByTime(1000);
jasmine.clock().tick(1000);
return Vue.nextTick();
})
.then(() => {
......@@ -472,12 +485,11 @@ describe('Dashboard', () => {
});
describe('external dashboard link', () => {
let wrapper;
beforeEach(done => {
beforeEach(() => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
wrapper = shallowMount(DashboardComponent, {
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
......@@ -486,53 +498,61 @@ describe('Dashboard', () => {
externalDashboardUrl: '/mockUrl',
},
store,
sync: false,
localVue,
});
setImmediate(done);
});
it('shows the link', () => {
expect(wrapper.find('.js-external-dashboard-link').text()).toContain('View full dashboard');
it('shows the link', done => {
setTimeout(() => {
expect(component.$el.querySelector('.js-external-dashboard-link').innerText).toContain(
'View full dashboard',
);
done();
});
});
});
describe('Dashboard dropdown', () => {
let wrapper;
beforeEach(done => {
beforeEach(() => {
mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
wrapper = shallowMount(DashboardComponent, {
propsData: { ...propsData, hasMetrics: true, showPanels: false },
component = new DashboardComponent({
el: document.querySelector('.prometheus-graphs'),
propsData: {
...propsData,
hasMetrics: true,
showPanels: false,
},
store,
sync: false,
localVue,
});
setImmediate(() => {
store.dispatch('monitoringDashboard/setFeatureFlags', {
prometheusEndpoint: false,
multipleDashboardsEnabled: true,
});
component.$store.dispatch('monitoringDashboard/setFeatureFlags', {
prometheusEndpoint: false,
multipleDashboardsEnabled: true,
});
store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
singleGroupResponse,
);
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
environmentData,
);
store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse);
done();
});
component.$store.commit(
`monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`,
singleGroupResponse,
);
component.$store.commit(
`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
dashboardGitResponse,
);
});
it('shows the dashboard dropdown', () => {
expect(wrapper.find('.js-dashboards-dropdown').exists()).toEqual(true);
it('shows the dashboard dropdown', done => {
setTimeout(() => {
const dashboardDropdown = component.$el.querySelector('.js-dashboards-dropdown');
expect(dashboardDropdown).not.toEqual(null);
done();
});
});
});
......@@ -557,25 +577,13 @@ describe('Dashboard', () => {
const data = mockGraphData.queries[0].result[0].values;
const firstRow = `${data[0][0]},${data[0][1]}`;
expect(component.csvText(mockGraphData)).toContain(`${header}\r\n${firstRow}`);
expect(component.csvText(mockGraphData)).toMatch(`^${header}\r\n${firstRow}`);
});
});
describe('downloadCsv', () => {
let spy;
beforeEach(() => {
spy = jest.spyOn(window.URL, 'createObjectURL');
});
afterEach(() => {
spy.mockRestore();
});
it('creates a string containing a URL that represents the object', () => {
component.downloadCsv(mockGraphData);
expect(spy).toHaveBeenCalled();
it('produces a link with a Blob', () => {
expect(component.downloadCsv(mockGraphData)).toContain(`blob:`);
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7