diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-11 12:08:12 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-12-11 12:08:12 +0300 |
commit | 6b8040dc25fdc5fe614c3796a147517dd50bc7d8 (patch) | |
tree | 1930c21748fc632a7900659a71fcb7248097879f /spec/javascripts/monitoring | |
parent | 7b875aa3fd1645e2e881997256ba94c6cb73ab3d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/javascripts/monitoring')
-rw-r--r-- | spec/javascripts/monitoring/components/dashboard_spec.js | 78 | ||||
-rw-r--r-- | spec/javascripts/monitoring/components/graph_group_spec.js | 107 |
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(); + }); }); }); }); |