diff options
Diffstat (limited to 'spec/frontend')
6 files changed, 904 insertions, 0 deletions
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js new file mode 100644 index 00000000000..8a10857d0ff --- /dev/null +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -0,0 +1,573 @@ +import { shallowMount, createLocalVue, mount } from '@vue/test-utils'; +import { GlDropdownItem, GlButton, GlToast } from '@gitlab/ui'; +import VueDraggable from 'vuedraggable'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import statusCodes from '~/lib/utils/http_status'; +import { metricStates } from '~/monitoring/constants'; +import Dashboard from '~/monitoring/components/dashboard.vue'; +import DateTimePicker from '~/monitoring/components/date_time_picker/date_time_picker.vue'; +import GroupEmptyState from '~/monitoring/components/group_empty_state.vue'; +import { createStore } from '~/monitoring/stores'; +import * as types from '~/monitoring/stores/mutation_types'; +import * as monitoringUtils from '~/monitoring/utils'; +import { setupComponentStore, propsData } from '../init_utils'; +import { + metricsGroupsAPIResponse, + mockedQueryResultPayload, + mockApiEndpoint, + environmentData, + dashboardGitResponse, +} from '../mock_data'; + +const localVue = createLocalVue(); +const expectedPanelCount = 2; + +describe('Dashboard', () => { + let DashboardComponent; + let store; + let wrapper; + let mock; + + const createShallowWrapper = (props = {}, options = {}) => { + wrapper = shallowMount(localVue.extend(DashboardComponent), { + localVue, + sync: false, + propsData: { ...propsData, ...props }, + store, + ...options, + }); + }; + + const createMountedWrapper = (props = {}, options = {}) => { + wrapper = mount(localVue.extend(DashboardComponent), { + localVue, + sync: false, + propsData: { ...propsData, ...props }, + store, + ...options, + }); + }; + + beforeEach(() => { + store = createStore(); + DashboardComponent = localVue.extend(Dashboard); + mock = new MockAdapter(axios); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + mock.restore(); + }); + + describe('no metrics are available yet', () => { + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + + createShallowWrapper({}, { attachToDocument: true }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('shows the environment selector', () => { + expect(wrapper.vm.$el.querySelector('.js-environments-dropdown')).toBeTruthy(); + }); + }); + + describe('no data found', () => { + beforeEach(done => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + + createShallowWrapper({}, { attachToDocument: true }); + + wrapper.vm.$nextTick(done); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('shows the environment selector dropdown', () => { + expect(wrapper.vm.$el.querySelector('.js-environments-dropdown')).toBeTruthy(); + }); + }); + + describe('request information to the server', () => { + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + }); + + it('shows up a loading state', done => { + createShallowWrapper({ hasMetrics: true }, { attachToDocument: true }); + + wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.vm.emptyState).toEqual('loading'); + + done(); + }) + .catch(done.fail); + }); + + it('hides the group panels when showPanels is false', done => { + createMountedWrapper( + { hasMetrics: true, showPanels: false }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + setupComponentStore(wrapper); + + wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.vm.showEmptyState).toEqual(false); + expect(wrapper.vm.$el.querySelector('.prometheus-panel')).toEqual(null); + // TODO: The last expectation doesn't belong here, it belongs in a `group_group_spec.js` file + // Issue: https://gitlab.com/gitlab-org/gitlab/issues/118780 + // expect(wrapper.vm.$el.querySelector('.prometheus-graph-group')).toBeTruthy(); + + done(); + }) + .catch(done.fail); + }); + + it('fetches the metrics data with proper time window', done => { + const getTimeDiffSpy = jest.spyOn(monitoringUtils, 'getTimeDiff'); + jest.spyOn(store, 'dispatch'); + + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, + environmentData, + ); + + wrapper.vm + .$nextTick() + .then(() => { + expect(store.dispatch).toHaveBeenCalled(); + expect(getTimeDiffSpy).toHaveBeenCalled(); + + done(); + }) + .catch(done.fail); + }); + }); + + describe('when all requests have been commited by the store', () => { + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + setupComponentStore(wrapper); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the environments dropdown with a number of environments', done => { + wrapper.vm + .$nextTick() + .then(() => { + const environmentDropdownItems = wrapper + .find('.js-environments-dropdown') + .findAll(GlDropdownItem); + + expect(wrapper.vm.environments.length).toEqual(environmentData.length); + expect(environmentDropdownItems.length).toEqual(wrapper.vm.environments.length); + + environmentDropdownItems.wrappers.forEach((itemWrapper, index) => { + const anchorEl = itemWrapper.find('a'); + if (anchorEl.exists() && environmentData[index].metrics_path) { + const href = anchorEl.attributes('href'); + expect(href).toBe(environmentData[index].metrics_path); + } + }); + + done(); + }) + .catch(done.fail); + }); + + it('renders the environments dropdown with a single active element', done => { + wrapper.vm + .$nextTick() + .then(() => { + const environmentDropdownItems = wrapper + .find('.js-environments-dropdown') + .findAll(GlDropdownItem); + const activeItem = environmentDropdownItems.wrappers.filter(itemWrapper => + itemWrapper.find('.active').exists(), + ); + + expect(activeItem.length).toBe(1); + done(); + }) + .catch(done.fail); + }); + }); + + it('hides the environments dropdown list when there is no environments', done => { + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, + metricsGroupsAPIResponse, + ); + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, + mockedQueryResultPayload, + ); + + wrapper.vm + .$nextTick() + .then(() => { + const environmentDropdownItems = wrapper + .find('.js-environments-dropdown') + .findAll(GlDropdownItem); + + expect(environmentDropdownItems.length).toEqual(0); + done(); + }) + .catch(done.fail); + }); + + it('renders the datetimepicker dropdown', done => { + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + setupComponentStore(wrapper); + + wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.find(DateTimePicker).exists()).toBe(true); + done(); + }) + .catch(done.fail); + }); + + describe('when one of the metrics is missing', () => { + beforeEach(done => { + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + + createShallowWrapper({ hasMetrics: true }, { attachToDocument: true }); + setupComponentStore(wrapper); + + wrapper.vm.$nextTick(done); + }); + + it('shows a group empty area', () => { + const emptyGroup = wrapper.findAll({ ref: 'empty-group' }); + + expect(emptyGroup).toHaveLength(1); + expect(emptyGroup.is(GroupEmptyState)).toBe(true); + }); + + it('group empty area displays a NO_DATA state', () => { + expect( + wrapper + .findAll({ ref: 'empty-group' }) + .at(0) + .props('selectedState'), + ).toEqual(metricStates.NO_DATA); + }); + }); + + 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'); + const findRearrangeButton = () => wrapper.find('.js-rearrange-button'); + + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + }); + + beforeEach(done => { + createShallowWrapper({ hasMetrics: true }, { attachToDocument: true }); + + setupComponentStore(wrapper); + + wrapper.vm.$nextTick(done); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + 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('metrics can be swapped', done => { + const firstDraggable = findDraggables().at(0); + const mockMetrics = [...metricsGroupsAPIResponse[1].panels]; + + 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); + + wrapper.vm.$nextTick(() => { + const { panels } = wrapper.vm.dashboard.panel_groups[1]; + + expect(panels[1].title).toEqual(firstTitle); + expect(panels[0].title).toEqual(secondTitle); + done(); + }); + }); + + 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(() => { + 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(); + }); + }); + }); + }); + }); + + describe('cluster health', () => { + beforeEach(done => { + mock.onGet(propsData.metricsEndpoint).reply(statusCodes.OK, JSON.stringify({})); + createShallowWrapper({ hasMetrics: true }); + + // all_dashboards is not defined in health dashboards + wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined); + wrapper.vm.$nextTick(done); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders correctly', () => { + expect(wrapper.isVueInstance()).toBe(true); + expect(wrapper.exists()).toBe(true); + }); + }); + + describe('dashboard edit link', () => { + const findEditLink = () => wrapper.find('.js-edit-link'); + + beforeEach(done => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + + createShallowWrapper({ hasMetrics: true }, { attachToDocument: true }); + + wrapper.vm.$store.commit( + `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, + dashboardGitResponse, + ); + wrapper.vm.$nextTick(done); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('is not present for the default dashboard', () => { + expect(findEditLink().exists()).toBe(false); + }); + + it('is present for a custom dashboard, and links to its edit_path', done => { + const dashboard = dashboardGitResponse[1]; // non-default dashboard + const currentDashboard = dashboard.path; + + wrapper.setProps({ currentDashboard }); + wrapper.vm + .$nextTick() + .then(() => { + expect(findEditLink().exists()).toBe(true); + expect(findEditLink().attributes('href')).toBe(dashboard.project_blob_path); + done(); + }) + .catch(done.fail); + }); + }); + + describe('Dashboard dropdown', () => { + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + wrapper.vm.$store.commit( + `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, + dashboardGitResponse, + ); + }); + + it('shows the dashboard dropdown', done => { + wrapper.vm + .$nextTick() + .then(() => { + const dashboardDropdown = wrapper.find('.js-dashboards-dropdown'); + + expect(dashboardDropdown.exists()).toBe(true); + done(); + }) + .catch(done.fail); + }); + }); + + describe('external dashboard link', () => { + beforeEach(() => { + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + + createMountedWrapper( + { + hasMetrics: true, + showPanels: false, + showTimeWindowDropdown: false, + externalDashboardUrl: '/mockUrl', + }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + }); + + it('shows the link', done => { + wrapper.vm + .$nextTick() + .then(() => { + const externalDashboardButton = wrapper.find('.js-external-dashboard-link'); + + expect(externalDashboardButton.exists()).toBe(true); + expect(externalDashboardButton.is(GlButton)).toBe(true); + expect(externalDashboardButton.text()).toContain('View full dashboard'); + done(); + }) + .catch(done.fail); + }); + }); + + // https://gitlab.com/gitlab-org/gitlab-ce/issues/66922 + // eslint-disable-next-line jest/no-disabled-tests + describe.skip('link to chart', () => { + const currentDashboard = 'TEST_DASHBOARD'; + localVue.use(GlToast); + const link = () => wrapper.find('.js-chart-link'); + const clipboardText = () => link().element.dataset.clipboardText; + + beforeEach(done => { + mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse); + + createShallowWrapper({ hasMetrics: true, currentDashboard }, { attachToDocument: true }); + + setTimeout(done); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('adds a copy button to the dropdown', () => { + expect(link().text()).toContain('Generate link to chart'); + }); + + it('contains a link to the dashboard', () => { + expect(clipboardText()).toContain(`dashboard=${currentDashboard}`); + expect(clipboardText()).toContain(`group=`); + expect(clipboardText()).toContain(`title=`); + expect(clipboardText()).toContain(`y_label=`); + }); + + it('undefined parameter is stripped', done => { + wrapper.setProps({ currentDashboard: undefined }); + + wrapper.vm.$nextTick(() => { + expect(clipboardText()).not.toContain(`dashboard=`); + expect(clipboardText()).toContain(`y_label=`); + done(); + }); + }); + + it('null parameter is stripped', done => { + wrapper.setProps({ currentDashboard: null }); + + wrapper.vm.$nextTick(() => { + expect(clipboardText()).not.toContain(`dashboard=`); + expect(clipboardText()).toContain(`y_label=`); + done(); + }); + }); + + it('creates a toast when clicked', () => { + jest.spyOn(wrapper.vm.$toast, 'show').and.stub(); + + link().vm.$emit('click'); + + expect(wrapper.vm.$toast.show).toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/frontend/monitoring/components/dashboard_time_url_spec.js b/spec/frontend/monitoring/components/dashboard_time_url_spec.js new file mode 100644 index 00000000000..8dc450cf131 --- /dev/null +++ b/spec/frontend/monitoring/components/dashboard_time_url_spec.js @@ -0,0 +1,54 @@ +import { mount, createLocalVue } from '@vue/test-utils'; +import createFlash from '~/flash'; +import Dashboard from '~/monitoring/components/dashboard.vue'; +import { createStore } from '~/monitoring/stores'; +import { propsData } from '../init_utils'; + +const localVue = createLocalVue(); + +jest.mock('~/flash'); + +jest.mock('~/lib/utils/url_utility', () => ({ + getParameterValues: jest.fn().mockReturnValue('<script>alert("XSS")</script>'), +})); + +describe('dashboard invalid url parameters', () => { + let store; + let wrapper; + + const createMountedWrapper = (props = {}, options = {}) => { + wrapper = mount(localVue.extend(Dashboard), { + localVue, + sync: false, + propsData: { ...propsData, ...props }, + store, + ...options, + }); + }; + + beforeEach(() => { + store = createStore(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + it('shows an error message if invalid url parameters are passed', done => { + createMountedWrapper( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + wrapper.vm + .$nextTick() + .then(() => { + expect(createFlash).toHaveBeenCalled(); + + done(); + }) + .catch(done.fail); + }); +}); diff --git a/spec/frontend/monitoring/components/dashboard_time_window_spec.js b/spec/frontend/monitoring/components/dashboard_time_window_spec.js new file mode 100644 index 00000000000..d49af6f84cb --- /dev/null +++ b/spec/frontend/monitoring/components/dashboard_time_window_spec.js @@ -0,0 +1,75 @@ +import { mount, createLocalVue } from '@vue/test-utils'; +import { GlDropdownItem } from '@gitlab/ui'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import statusCodes from '~/lib/utils/http_status'; +import Dashboard from '~/monitoring/components/dashboard.vue'; +import { createStore } from '~/monitoring/stores'; +import { propsData, setupComponentStore } from '../init_utils'; +import { metricsGroupsAPIResponse, mockApiEndpoint } from '../mock_data'; + +const localVue = createLocalVue(); + +jest.mock('~/lib/utils/url_utility', () => ({ + getParameterValues: jest.fn().mockImplementation(param => { + if (param === 'start') return ['2019-10-01T18:27:47.000Z']; + if (param === 'end') return ['2019-10-01T18:57:47.000Z']; + return []; + }), + mergeUrlParams: jest.fn().mockReturnValue('#'), +})); + +describe('dashboard time window', () => { + let store; + let wrapper; + let mock; + + const createComponentWrapperMounted = (props = {}, options = {}) => { + wrapper = mount(localVue.extend(Dashboard), { + localVue, + sync: false, + propsData: { ...propsData, ...props }, + store, + ...options, + }); + }; + + beforeEach(() => { + store = createStore(); + mock = new MockAdapter(axios); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + mock.restore(); + }); + + it('shows an error message if invalid url parameters are passed', done => { + mock.onGet(mockApiEndpoint).reply(statusCodes.OK, metricsGroupsAPIResponse); + + createComponentWrapperMounted( + { hasMetrics: true }, + { attachToDocument: true, stubs: ['graph-group', 'panel-type'] }, + ); + + setupComponentStore(wrapper); + + wrapper.vm + .$nextTick() + .then(() => { + const timeWindowDropdownItems = wrapper + .find('.js-time-window-dropdown') + .findAll(GlDropdownItem); + const activeItem = timeWindowDropdownItems.wrappers.filter(itemWrapper => + itemWrapper.find('.active').exists(), + ); + + expect(activeItem.length).toBe(1); + + done(); + }) + .catch(done.fail); + }); +}); diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js new file mode 100644 index 00000000000..43ca17c3cbc --- /dev/null +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -0,0 +1,120 @@ +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 wrapper; + + const findGroup = () => wrapper.find({ ref: 'graph-group' }); + const findContent = () => wrapper.find({ ref: 'graph-group-content' }); + const findCaretIcon = () => wrapper.find(Icon); + + const createComponent = propsData => { + wrapper = shallowMount(localVue.extend(GraphGroup), { + propsData, + sync: false, + localVue, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + describe('When group is not collapsed', () => { + beforeEach(() => { + createComponent({ + name: 'panel', + collapseGroup: false, + }); + }); + + 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 the user collapses the group', done => { + wrapper.vm.collapse(); + + wrapper.vm.$nextTick(() => { + expect(findContent().isVisible()).toBe(false); + expect(findCaretIcon().props('name')).toBe('angle-right'); + done(); + }); + }); + + it('should show the open the group when collapseGroup is set to true', done => { + wrapper.setProps({ + collapseGroup: true, + }); + + wrapper.vm.$nextTick(() => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().props('name')).toBe('angle-down'); + done(); + }); + }); + + 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 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); + }); + }); + + describe('When group does not show a panel heading', () => { + beforeEach(() => { + createComponent({ + name: 'panel', + showPanels: false, + collapseGroup: false, + }); + }); + + it('should collapse the panel content', () => { + expect(findContent().isVisible()).toBe(true); + expect(findCaretIcon().exists()).toBe(false); + }); + + 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(); + }); + }); + }); + }); +}); diff --git a/spec/frontend/monitoring/init_utils.js b/spec/frontend/monitoring/init_utils.js new file mode 100644 index 00000000000..10db8b902b5 --- /dev/null +++ b/spec/frontend/monitoring/init_utils.js @@ -0,0 +1,56 @@ +import * as types from '~/monitoring/stores/mutation_types'; +import { + metricsGroupsAPIResponse, + mockedEmptyResult, + mockedQueryResultPayload, + mockedQueryResultPayloadCoresTotal, + mockApiEndpoint, + environmentData, +} from './mock_data'; + +export const propsData = { + hasMetrics: false, + documentationPath: '/path/to/docs', + settingsPath: '/path/to/settings', + clustersPath: '/path/to/clusters', + tagsPath: '/path/to/tags', + projectPath: '/path/to/project', + metricsEndpoint: mockApiEndpoint, + deploymentsEndpoint: null, + 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', + customMetricsAvailable: false, + customMetricsPath: '', + validateQueryPath: '', +}; + +export const setupComponentStore = wrapper => { + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRICS_DATA_SUCCESS}`, + metricsGroupsAPIResponse, + ); + + // Load 3 panels to the dashboard, one with an empty result + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, + mockedEmptyResult, + ); + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, + mockedQueryResultPayload, + ); + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_METRIC_RESULT_SUCCESS}`, + mockedQueryResultPayloadCoresTotal, + ); + + wrapper.vm.$store.commit( + `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, + environmentData, + ); +}; diff --git a/spec/frontend/monitoring/shared/prometheus_header_spec.js b/spec/frontend/monitoring/shared/prometheus_header_spec.js new file mode 100644 index 00000000000..b216bfb72d8 --- /dev/null +++ b/spec/frontend/monitoring/shared/prometheus_header_spec.js @@ -0,0 +1,26 @@ +import { shallowMount } from '@vue/test-utils'; +import PrometheusHeader from '~/monitoring/components/shared/prometheus_header.vue'; + +describe('Prometheus Header component', () => { + let prometheusHeader; + + beforeEach(() => { + prometheusHeader = shallowMount(PrometheusHeader, { + propsData: { + graphTitle: 'graph header', + }, + }); + }); + + afterEach(() => { + prometheusHeader.destroy(); + }); + + describe('Prometheus header component', () => { + it('should show a title', () => { + const title = prometheusHeader.find({ ref: 'title' }).text(); + + expect(title).toBe('graph header'); + }); + }); +}); |