diff options
Diffstat (limited to 'spec/frontend/monitoring')
14 files changed, 12 insertions, 865 deletions
diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap deleted file mode 100644 index 2a8ce1d3f30..00000000000 --- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1`] = ` -<gl-badge-stub - class="d-flex-center text-truncate" - size="md" - variant="danger" -> - <gl-icon-stub - class="flex-shrink-0" - name="warning" - size="16" - /> - - <span - class="text-truncate gl-pl-2" - > - Firing: - alert-label > 42 - - </span> -</gl-badge-stub> -`; - -exports[`AlertWidget Alert not firing displays a warning icon and matches snapshot 1`] = ` -<gl-badge-stub - class="d-flex-center text-truncate" - size="md" - variant="neutral" -> - <gl-icon-stub - class="flex-shrink-0" - name="warning" - size="16" - /> - - <span - class="text-truncate gl-pl-2" - > - alert-label > 42 - </span> -</gl-badge-stub> -`; diff --git a/spec/frontend/monitoring/alert_widget_spec.js b/spec/frontend/monitoring/alert_widget_spec.js deleted file mode 100644 index 9bf9e8ad7cc..00000000000 --- a/spec/frontend/monitoring/alert_widget_spec.js +++ /dev/null @@ -1,423 +0,0 @@ -import { GlLoadingIcon, GlTooltip, GlSprintf, GlBadge } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import waitForPromises from 'helpers/wait_for_promises'; -import createFlash from '~/flash'; -import AlertWidget from '~/monitoring/components/alert_widget.vue'; - -const mockReadAlert = jest.fn(); -const mockCreateAlert = jest.fn(); -const mockUpdateAlert = jest.fn(); -const mockDeleteAlert = jest.fn(); - -jest.mock('~/flash'); -jest.mock( - '~/monitoring/services/alerts_service', - () => - function AlertsServiceMock() { - return { - readAlert: mockReadAlert, - createAlert: mockCreateAlert, - updateAlert: mockUpdateAlert, - deleteAlert: mockDeleteAlert, - }; - }, -); - -describe('AlertWidget', () => { - let wrapper; - - const nonFiringAlertResult = [ - { - values: [ - [0, 1], - [1, 42], - [2, 41], - ], - }, - ]; - const firingAlertResult = [ - { - values: [ - [0, 42], - [1, 43], - [2, 44], - ], - }, - ]; - const metricId = '5'; - const alertPath = 'my/alert.json'; - - const relevantQueries = [ - { - metricId, - label: 'alert-label', - alert_path: alertPath, - result: nonFiringAlertResult, - }, - ]; - - const firingRelevantQueries = [ - { - metricId, - label: 'alert-label', - alert_path: alertPath, - result: firingAlertResult, - }, - ]; - - const defaultProps = { - alertsEndpoint: '', - relevantQueries, - alertsToManage: {}, - modalId: 'alert-modal-1', - }; - - const propsWithAlert = { - relevantQueries, - }; - - const propsWithAlertData = { - relevantQueries, - alertsToManage: { - [alertPath]: { operator: '>', threshold: 42, alert_path: alertPath, metricId }, - }, - }; - - const createComponent = (propsData) => { - wrapper = shallowMount(AlertWidget, { - stubs: { GlTooltip, GlSprintf }, - propsData: { - ...defaultProps, - ...propsData, - }, - }); - }; - const hasLoadingIcon = () => wrapper.find(GlLoadingIcon).exists(); - const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' }); - const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' }); - const findCurrentSettingsText = () => - wrapper.find({ ref: 'alertCurrentSetting' }).text().replace(/\s\s+/g, ' '); - const findBadge = () => wrapper.find(GlBadge); - const findTooltip = () => wrapper.find(GlTooltip); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - it('displays a loading spinner and disables form when fetching alerts', () => { - let resolveReadAlert; - mockReadAlert.mockReturnValue( - new Promise((resolve) => { - resolveReadAlert = resolve; - }), - ); - createComponent(defaultProps); - return wrapper.vm - .$nextTick() - .then(() => { - expect(hasLoadingIcon()).toBe(true); - expect(findWidgetForm().props('disabled')).toBe(true); - - resolveReadAlert({ operator: '==', threshold: 42 }); - }) - .then(() => waitForPromises()) - .then(() => { - expect(hasLoadingIcon()).toBe(false); - expect(findWidgetForm().props('disabled')).toBe(false); - }); - }); - - it('does not render loading spinner if showLoadingState is false', () => { - let resolveReadAlert; - mockReadAlert.mockReturnValue( - new Promise((resolve) => { - resolveReadAlert = resolve; - }), - ); - createComponent({ - ...defaultProps, - showLoadingState: false, - }); - return wrapper.vm - .$nextTick() - .then(() => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - - resolveReadAlert({ operator: '==', threshold: 42 }); - }) - .then(() => waitForPromises()) - .then(() => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - }); - }); - - it('displays an error message when fetch fails', () => { - mockReadAlert.mockRejectedValue(); - createComponent(propsWithAlert); - expect(hasLoadingIcon()).toBe(true); - - return waitForPromises().then(() => { - expect(createFlash).toHaveBeenCalled(); - expect(hasLoadingIcon()).toBe(false); - }); - }); - - describe('Alert not firing', () => { - it('displays a warning icon and matches snapshot', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - createComponent(propsWithAlertData); - - return waitForPromises().then(() => { - expect(findBadge().element).toMatchSnapshot(); - }); - }); - - it('displays an alert summary when there is a single alert', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - createComponent(propsWithAlertData); - return waitForPromises().then(() => { - expect(findCurrentSettingsText()).toEqual('alert-label > 42'); - }); - }); - - it('displays a combined alert summary when there are multiple alerts', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - const propsWithManyAlerts = { - relevantQueries: [ - ...relevantQueries, - ...[ - { - metricId: '6', - alert_path: 'my/alert2.json', - label: 'alert-label2', - result: [{ values: [] }], - }, - ], - ], - alertsToManage: { - 'my/alert.json': { - operator: '>', - threshold: 42, - alert_path: alertPath, - metricId, - }, - 'my/alert2.json': { - operator: '==', - threshold: 900, - alert_path: 'my/alert2.json', - metricId: '6', - }, - }, - }; - createComponent(propsWithManyAlerts); - return waitForPromises().then(() => { - expect(findCurrentSettingsText()).toContain('2 alerts applied'); - }); - }); - }); - - describe('Alert firing', () => { - it('displays a warning icon and matches snapshot', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - propsWithAlertData.relevantQueries = firingRelevantQueries; - createComponent(propsWithAlertData); - - return waitForPromises().then(() => { - expect(findBadge().element).toMatchSnapshot(); - }); - }); - - it('displays an alert summary when there is a single alert', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - propsWithAlertData.relevantQueries = firingRelevantQueries; - createComponent(propsWithAlertData); - return waitForPromises().then(() => { - expect(findCurrentSettingsText()).toEqual('Firing: alert-label > 42'); - }); - }); - - it('displays a combined alert summary when there are multiple alerts', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - const propsWithManyAlerts = { - relevantQueries: [ - ...firingRelevantQueries, - ...[ - { - metricId: '6', - alert_path: 'my/alert2.json', - label: 'alert-label2', - result: [{ values: [] }], - }, - ], - ], - alertsToManage: { - 'my/alert.json': { - operator: '>', - threshold: 42, - alert_path: alertPath, - metricId, - }, - 'my/alert2.json': { - operator: '==', - threshold: 900, - alert_path: 'my/alert2.json', - metricId: '6', - }, - }, - }; - createComponent(propsWithManyAlerts); - - return waitForPromises().then(() => { - expect(findCurrentSettingsText()).toContain('2 alerts applied, 1 firing'); - }); - }); - - it('should display tooltip with thresholds summary', () => { - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - const propsWithManyAlerts = { - relevantQueries: [ - ...firingRelevantQueries, - ...[ - { - metricId: '6', - alert_path: 'my/alert2.json', - label: 'alert-label2', - result: [{ values: [] }], - }, - ], - ], - alertsToManage: { - 'my/alert.json': { - operator: '>', - threshold: 42, - alert_path: alertPath, - metricId, - }, - 'my/alert2.json': { - operator: '==', - threshold: 900, - alert_path: 'my/alert2.json', - metricId: '6', - }, - }, - }; - createComponent(propsWithManyAlerts); - - return waitForPromises().then(() => { - expect(findTooltip().text().replace(/\s\s+/g, ' ')).toEqual('Firing: alert-label > 42'); - }); - }); - }); - - it('creates an alert with an appropriate handler', () => { - const alertParams = { - operator: '<', - threshold: 4, - prometheus_metric_id: '5', - }; - mockReadAlert.mockResolvedValue({ operator: '>', threshold: 42 }); - const fakeAlertPath = 'foo/bar'; - mockCreateAlert.mockResolvedValue({ alert_path: fakeAlertPath, ...alertParams }); - createComponent({ - alertsToManage: { - [fakeAlertPath]: { - alert_path: fakeAlertPath, - operator: '<', - threshold: 4, - prometheus_metric_id: '5', - metricId: '5', - }, - }, - }); - - findWidgetForm().vm.$emit('create', alertParams); - - expect(mockCreateAlert).toHaveBeenCalledWith(alertParams); - }); - - it('updates an alert with an appropriate handler', () => { - const alertParams = { operator: '<', threshold: 4, alert_path: alertPath }; - const newAlertParams = { operator: '==', threshold: 12 }; - mockReadAlert.mockResolvedValue(alertParams); - mockUpdateAlert.mockResolvedValue({ ...alertParams, ...newAlertParams }); - createComponent({ - ...propsWithAlertData, - alertsToManage: { - [alertPath]: { - alert_path: alertPath, - operator: '==', - threshold: 12, - metricId: '5', - }, - }, - }); - - findWidgetForm().vm.$emit('update', { - alert: alertPath, - ...newAlertParams, - prometheus_metric_id: '5', - }); - - expect(mockUpdateAlert).toHaveBeenCalledWith(alertPath, newAlertParams); - }); - - it('deletes an alert with an appropriate handler', () => { - const alertParams = { alert_path: alertPath, operator: '>', threshold: 42 }; - mockReadAlert.mockResolvedValue(alertParams); - mockDeleteAlert.mockResolvedValue({}); - createComponent({ - ...propsWithAlert, - alertsToManage: { - [alertPath]: { - alert_path: alertPath, - operator: '>', - threshold: 42, - metricId: '5', - }, - }, - }); - - findWidgetForm().vm.$emit('delete', { alert: alertPath }); - - return wrapper.vm.$nextTick().then(() => { - expect(mockDeleteAlert).toHaveBeenCalledWith(alertPath); - expect(findAlertErrorMessage().exists()).toBe(false); - }); - }); - - describe('when delete fails', () => { - beforeEach(() => { - const alertParams = { alert_path: alertPath, operator: '>', threshold: 42 }; - mockReadAlert.mockResolvedValue(alertParams); - mockDeleteAlert.mockRejectedValue(); - - createComponent({ - ...propsWithAlert, - alertsToManage: { - [alertPath]: { - alert_path: alertPath, - operator: '>', - threshold: 42, - metricId: '5', - }, - }, - }); - - findWidgetForm().vm.$emit('delete', { alert: alertPath }); - return wrapper.vm.$nextTick(); - }); - - it('shows error message', () => { - expect(findAlertErrorMessage().text()).toEqual('Error deleting alert'); - }); - - it('dismisses error message on cancel', () => { - findWidgetForm().vm.$emit('cancel'); - - return wrapper.vm.$nextTick().then(() => { - expect(findAlertErrorMessage().exists()).toBe(false); - }); - }); - }); -}); diff --git a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap index 47b6c463377..aaa0a91ffe0 100644 --- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap +++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap @@ -8,8 +8,6 @@ exports[`Dashboard template matches the default snapshot 1`] = ` metricsdashboardbasepath="/monitoring/monitor-project/-/environments/1/metrics" metricsendpoint="/monitoring/monitor-project/-/environments/1/additional_metrics.json" > - <alerts-deprecation-warning-stub /> - <div class="prometheus-graphs-header d-sm-flex flex-sm-wrap pt-2 pr-1 pb-0 pl-2 border-bottom bg-gray-light" > diff --git a/spec/frontend/monitoring/components/alert_widget_form_spec.js b/spec/frontend/monitoring/components/alert_widget_form_spec.js deleted file mode 100644 index e0ef1040f6b..00000000000 --- a/spec/frontend/monitoring/components/alert_widget_form_spec.js +++ /dev/null @@ -1,242 +0,0 @@ -import { GlLink } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import INVALID_URL from '~/lib/utils/invalid_url'; -import AlertWidgetForm from '~/monitoring/components/alert_widget_form.vue'; -import ModalStub from '../stubs/modal_stub'; - -describe('AlertWidgetForm', () => { - let wrapper; - - const metricId = '8'; - const alertPath = 'alert'; - const relevantQueries = [{ metricId, alert_path: alertPath, label: 'alert-label' }]; - const dataTrackingOptions = { - create: { action: 'click_button', label: 'create_alert' }, - delete: { action: 'click_button', label: 'delete_alert' }, - update: { action: 'click_button', label: 'update_alert' }, - }; - - const defaultProps = { - disabled: false, - relevantQueries, - modalId: 'alert-modal-1', - }; - - const propsWithAlertData = { - ...defaultProps, - alertsToManage: { - alert: { - alert_path: alertPath, - operator: '<', - threshold: 5, - metricId, - runbookUrl: INVALID_URL, - }, - }, - configuredAlert: metricId, - }; - - function createComponent(props = {}) { - const propsData = { - ...defaultProps, - ...props, - }; - - wrapper = shallowMount(AlertWidgetForm, { - propsData, - stubs: { - GlModal: ModalStub, - }, - }); - } - - const modal = () => wrapper.find(ModalStub); - const modalTitle = () => modal().attributes('title'); - const submitButton = () => modal().find(GlLink); - const findRunbookField = () => modal().find('[data-testid="alertRunbookField"]'); - const findThresholdField = () => modal().find('[data-qa-selector="alert_threshold_field"]'); - const submitButtonTrackingOpts = () => - JSON.parse(submitButton().attributes('data-tracking-options')); - const stubEvent = { preventDefault: jest.fn() }; - - afterEach(() => { - if (wrapper) wrapper.destroy(); - }); - - it('disables the form when disabled prop is set', () => { - createComponent({ disabled: true }); - - expect(modal().attributes('ok-disabled')).toBe('true'); - }); - - it('disables the form if no query is selected', () => { - createComponent(); - - expect(modal().attributes('ok-disabled')).toBe('true'); - }); - - it('shows correct title and button text', () => { - createComponent(); - - expect(modalTitle()).toBe('Add alert'); - expect(submitButton().text()).toBe('Add'); - }); - - it('sets tracking options for create alert', () => { - createComponent(); - - expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.create); - }); - - it('emits a "create" event when form submitted without existing alert', async () => { - createComponent(defaultProps); - - modal().vm.$emit('shown'); - - findThresholdField().vm.$emit('input', 900); - findRunbookField().vm.$emit('input', INVALID_URL); - - modal().vm.$emit('ok', stubEvent); - - expect(wrapper.emitted().create[0]).toEqual([ - { - alert: undefined, - operator: '>', - threshold: 900, - prometheus_metric_id: '8', - runbookUrl: INVALID_URL, - }, - ]); - }); - - it('resets form when modal is dismissed (hidden)', () => { - createComponent(defaultProps); - - modal().vm.$emit('shown'); - - findThresholdField().vm.$emit('input', 800); - findRunbookField().vm.$emit('input', INVALID_URL); - - modal().vm.$emit('hidden'); - - expect(wrapper.vm.selectedAlert).toEqual({}); - expect(wrapper.vm.operator).toBe(null); - expect(wrapper.vm.threshold).toBe(null); - expect(wrapper.vm.prometheusMetricId).toBe(null); - expect(wrapper.vm.runbookUrl).toBe(null); - }); - - it('sets selectedAlert to the provided configuredAlert on modal show', () => { - createComponent(propsWithAlertData); - - modal().vm.$emit('shown'); - - expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]); - }); - - it('sets selectedAlert to the first relevantQueries if there is only one option on modal show', () => { - createComponent({ - ...propsWithAlertData, - configuredAlert: '', - }); - - modal().vm.$emit('shown'); - - expect(wrapper.vm.selectedAlert).toEqual(propsWithAlertData.alertsToManage[alertPath]); - }); - - it('does not set selectedAlert to the first relevantQueries if there is more than one option on modal show', () => { - createComponent({ - relevantQueries: [ - { - metricId: '8', - alertPath: 'alert', - label: 'alert-label', - }, - { - metricId: '9', - alertPath: 'alert', - label: 'alert-label', - }, - ], - }); - - modal().vm.$emit('shown'); - - expect(wrapper.vm.selectedAlert).toEqual({}); - }); - - describe('with existing alert', () => { - beforeEach(() => { - createComponent(propsWithAlertData); - - modal().vm.$emit('shown'); - }); - - it('sets tracking options for delete alert', () => { - expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.delete); - }); - - it('updates button text', () => { - expect(modalTitle()).toBe('Edit alert'); - expect(submitButton().text()).toBe('Delete'); - }); - - it('emits "delete" event when form values unchanged', () => { - modal().vm.$emit('ok', stubEvent); - - expect(wrapper.emitted().delete[0]).toEqual([ - { - alert: 'alert', - operator: '<', - threshold: 5, - prometheus_metric_id: '8', - runbookUrl: INVALID_URL, - }, - ]); - }); - }); - - it('emits "update" event when form changed', () => { - const updatedRunbookUrl = `${INVALID_URL}/test`; - - createComponent(propsWithAlertData); - - modal().vm.$emit('shown'); - - findRunbookField().vm.$emit('input', updatedRunbookUrl); - findThresholdField().vm.$emit('input', 11); - - modal().vm.$emit('ok', stubEvent); - - expect(wrapper.emitted().update[0]).toEqual([ - { - alert: 'alert', - operator: '<', - threshold: 11, - prometheus_metric_id: '8', - runbookUrl: updatedRunbookUrl, - }, - ]); - }); - - it('sets tracking options for update alert', async () => { - createComponent(propsWithAlertData); - - modal().vm.$emit('shown'); - - findThresholdField().vm.$emit('input', 11); - - await wrapper.vm.$nextTick(); - - expect(submitButtonTrackingOpts()).toEqual(dataTrackingOptions.update); - }); - - describe('alert runbooks', () => { - it('shows the runbook field', () => { - createComponent(); - - expect(findRunbookField().exists()).toBe(true); - }); - }); -}); diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index c44fd8dce33..8dc6132709e 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -159,10 +159,6 @@ describe('Anomaly chart component', () => { const { deploymentData } = getTimeSeriesProps(); expect(deploymentData).toEqual(anomalyDeploymentData); }); - it('"thresholds" keeps the same value', () => { - const { thresholds } = getTimeSeriesProps(); - expect(thresholds).toEqual(inputThresholds); - }); it('"projectPath" keeps the same value', () => { const { projectPath } = getTimeSeriesProps(); expect(projectPath).toEqual(mockProjectPath); diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index ea6e4f4a5ed..27f7489aa49 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -643,7 +643,6 @@ describe('Time series component', () => { expect(props.data).toBe(wrapper.vm.chartData); expect(props.option).toBe(wrapper.vm.chartOptions); expect(props.formatTooltipText).toBe(wrapper.vm.formatTooltipText); - expect(props.thresholds).toBe(wrapper.vm.thresholds); }); it('receives a tooltip title', () => { diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js index 8af6075a416..400ac2e8f85 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js @@ -28,7 +28,6 @@ describe('dashboard invalid url parameters', () => { }, }, options, - provide: { hasManagedPrometheus: false }, }); }; diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index c8951dff9ed..9a73dc820af 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -5,7 +5,6 @@ import Vuex from 'vuex'; import { setTestTimeout } from 'helpers/timeout'; import axios from '~/lib/utils/axios_utils'; import invalidUrl from '~/lib/utils/invalid_url'; -import AlertWidget from '~/monitoring/components/alert_widget.vue'; import MonitorAnomalyChart from '~/monitoring/components/charts/anomaly.vue'; import MonitorBarChart from '~/monitoring/components/charts/bar.vue'; @@ -28,7 +27,6 @@ import { barGraphData, } from '../graph_data'; import { - mockAlert, mockLogsHref, mockLogsPath, mockNamespace, @@ -56,7 +54,6 @@ describe('Dashboard Panel', () => { const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' }); const findMenuItems = () => wrapper.findAll(GlDropdownItem); const findMenuItemByText = (text) => findMenuItems().filter((i) => i.text() === text); - const findAlertsWidget = () => wrapper.find(AlertWidget); const createWrapper = (props, { mountFn = shallowMount, ...options } = {}) => { wrapper = mountFn(DashboardPanel, { @@ -80,9 +77,6 @@ describe('Dashboard Panel', () => { }); }; - const setMetricsSavedToDb = (val) => - monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val); - beforeEach(() => { setTestTimeout(1000); @@ -601,42 +595,6 @@ describe('Dashboard Panel', () => { }); }); - describe('panel alerts', () => { - beforeEach(() => { - mockGetterReturnValue('metricsSavedToDb', []); - - createWrapper(); - }); - - describe.each` - desc | metricsSavedToDb | props | isShown - ${'with permission and no metrics in db'} | ${[]} | ${{}} | ${false} - ${'with permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{}} | ${true} - ${'without permission and related metrics in db'} | ${[graphData.metrics[0].metricId]} | ${{ prometheusAlertsAvailable: false }} | ${false} - ${'with permission and unrelated metrics in db'} | ${['another_metric_id']} | ${{}} | ${false} - `('$desc', ({ metricsSavedToDb, isShown, props }) => { - const showsDesc = isShown ? 'shows' : 'does not show'; - - beforeEach(() => { - setMetricsSavedToDb(metricsSavedToDb); - createWrapper({ - alertsEndpoint: '/endpoint', - prometheusAlertsAvailable: true, - ...props, - }); - return wrapper.vm.$nextTick(); - }); - - it(`${showsDesc} alert widget`, () => { - expect(findAlertsWidget().exists()).toBe(isShown); - }); - - it(`${showsDesc} alert configuration`, () => { - expect(findMenuItemByText('Alerts').exists()).toBe(isShown); - }); - }); - }); - describe('When graphData contains links', () => { const findManageLinksItem = () => wrapper.find({ ref: 'manageLinksItem' }); const mockLinks = [ @@ -730,13 +688,6 @@ describe('Dashboard Panel', () => { describe('Runbook url', () => { const findRunbookLinks = () => wrapper.findAll('[data-testid="runbookLink"]'); - const { metricId } = graphData.metrics[0]; - const { alert_path: alertPath } = mockAlert; - - const mockRunbookAlert = { - ...mockAlert, - metricId, - }; beforeEach(() => { mockGetterReturnValue('metricsSavedToDb', []); @@ -747,62 +698,5 @@ describe('Dashboard Panel', () => { expect(findRunbookLinks().length).toBe(0); }); - - describe('when alerts are present', () => { - beforeEach(() => { - setMetricsSavedToDb([metricId]); - - createWrapper({ - alertsEndpoint: '/endpoint', - prometheusAlertsAvailable: true, - }); - }); - - it('does not show a runbook link when a runbook is not set', async () => { - findAlertsWidget().vm.$emit('setAlerts', alertPath, { - ...mockRunbookAlert, - runbookUrl: '', - }); - - await wrapper.vm.$nextTick(); - - expect(findRunbookLinks().length).toBe(0); - }); - - it('shows a runbook link when a runbook is set', async () => { - findAlertsWidget().vm.$emit('setAlerts', alertPath, mockRunbookAlert); - - await wrapper.vm.$nextTick(); - - expect(findRunbookLinks().length).toBe(1); - expect(findRunbookLinks().at(0).attributes('href')).toBe(invalidUrl); - }); - }); - - describe('managed alert deprecation feature flag', () => { - beforeEach(() => { - setMetricsSavedToDb([metricId]); - }); - - it('shows alerts when alerts are not deprecated', () => { - createWrapper( - { alertsEndpoint: '/endpoint', prometheusAlertsAvailable: true }, - { provide: { glFeatures: { managedAlertsDeprecation: false } } }, - ); - - expect(findAlertsWidget().exists()).toBe(true); - expect(findMenuItemByText('Alerts').exists()).toBe(true); - }); - - it('hides alerts when alerts are deprecated', () => { - createWrapper( - { alertsEndpoint: '/endpoint', prometheusAlertsAvailable: true }, - { provide: { glFeatures: { managedAlertsDeprecation: true } } }, - ); - - expect(findAlertsWidget().exists()).toBe(false); - expect(findMenuItemByText('Alerts').exists()).toBe(false); - }); - }); }); }); diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index f899580b3df..9331048bce3 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -46,7 +46,6 @@ describe('Dashboard', () => { stubs: { DashboardHeader, }, - provide: { hasManagedPrometheus: false }, ...options, }); }; @@ -60,9 +59,6 @@ describe('Dashboard', () => { 'dashboard-panel': true, 'dashboard-header': DashboardHeader, }, - provide: { - hasManagedPrometheus: false, - }, ...options, }); }; @@ -412,7 +408,7 @@ describe('Dashboard', () => { }); }); - describe('when all requests have been commited by the store', () => { + describe('when all requests have been committed by the store', () => { beforeEach(() => { store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, { currentEnvironmentName: 'production', @@ -460,7 +456,7 @@ describe('Dashboard', () => { it('shows the links section', () => { expect(wrapper.vm.shouldShowLinksSection).toBe(true); - expect(wrapper.find(LinksSection)).toExist(); + expect(wrapper.findComponent(LinksSection).exists()).toBe(true); }); }); @@ -807,29 +803,4 @@ describe('Dashboard', () => { expect(dashboardPanel.exists()).toBe(true); }); }); - - describe('alerts deprecation', () => { - beforeEach(() => { - setupStoreWithData(store); - }); - - const findDeprecationNotice = () => wrapper.findByTestId('alerts-deprecation-warning'); - - it.each` - managedAlertsDeprecation | hasManagedPrometheus | isVisible - ${false} | ${false} | ${false} - ${false} | ${true} | ${true} - ${true} | ${false} | ${false} - ${true} | ${true} | ${false} - `( - 'when the deprecation feature flag is $managedAlertsDeprecation and has managed prometheus is $hasManagedPrometheus', - ({ hasManagedPrometheus, managedAlertsDeprecation, isVisible }) => { - createMountedWrapper( - {}, - { provide: { hasManagedPrometheus, glFeatures: { managedAlertsDeprecation } } }, - ); - expect(findDeprecationNotice().exists()).toBe(isVisible); - }, - ); - }); }); diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js index bea263f143a..e6785f34597 100644 --- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js +++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js @@ -31,7 +31,6 @@ describe('dashboard invalid url parameters', () => { store, stubs: { 'graph-group': true, 'dashboard-panel': true, 'dashboard-header': DashboardHeader }, ...options, - provide: { hasManagedPrometheus: false }, }); }; diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js index 8fc287c50e4..e37abf6722a 100644 --- a/spec/frontend/monitoring/components/links_section_spec.js +++ b/spec/frontend/monitoring/components/links_section_spec.js @@ -1,5 +1,7 @@ import { GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; + import LinksSection from '~/monitoring/components/links_section.vue'; import { createStore } from '~/monitoring/stores'; @@ -26,12 +28,12 @@ describe('Links Section component', () => { createShallowWrapper(); }); - it('does not render a section if no links are present', () => { + it('does not render a section if no links are present', async () => { setState(); - return wrapper.vm.$nextTick(() => { - expect(findLinks()).not.toExist(); - }); + await nextTick(); + + expect(findLinks().length).toBe(0); }); it('renders a link inside a section', () => { diff --git a/spec/frontend/monitoring/components/variables/text_field_spec.js b/spec/frontend/monitoring/components/variables/text_field_spec.js index 28e02dff4bf..c879803fddd 100644 --- a/spec/frontend/monitoring/components/variables/text_field_spec.js +++ b/spec/frontend/monitoring/components/variables/text_field_spec.js @@ -15,12 +15,12 @@ describe('Text variable component', () => { }); }; - const findInput = () => wrapper.find(GlFormInput); + const findInput = () => wrapper.findComponent(GlFormInput); it('renders a text input when all props are passed', () => { createShallowWrapper(); - expect(findInput()).toExist(); + expect(findInput().exists()).toBe(true); }); it('always has a default value', () => { diff --git a/spec/frontend/monitoring/pages/dashboard_page_spec.js b/spec/frontend/monitoring/pages/dashboard_page_spec.js index dbe9cc21ad5..c5a8b50ee60 100644 --- a/spec/frontend/monitoring/pages/dashboard_page_spec.js +++ b/spec/frontend/monitoring/pages/dashboard_page_spec.js @@ -29,7 +29,7 @@ describe('monitoring/pages/dashboard_page', () => { }); }; - const findDashboardComponent = () => wrapper.find(Dashboard); + const findDashboardComponent = () => wrapper.findComponent(Dashboard); beforeEach(() => { buildRouter(); @@ -60,7 +60,7 @@ describe('monitoring/pages/dashboard_page', () => { smallEmptyState: false, }; - expect(findDashboardComponent()).toExist(); + expect(findDashboardComponent().exists()).toBe(true); expect(allProps).toMatchObject(findDashboardComponent().props()); }); }); diff --git a/spec/frontend/monitoring/router_spec.js b/spec/frontend/monitoring/router_spec.js index 2a712d4361f..b027d60f61e 100644 --- a/spec/frontend/monitoring/router_spec.js +++ b/spec/frontend/monitoring/router_spec.js @@ -20,8 +20,6 @@ const MockApp = { template: `<router-view :dashboard-props="dashboardProps"/>`, }; -const provide = { hasManagedPrometheus: false }; - describe('Monitoring router', () => { let router; let store; @@ -39,7 +37,6 @@ describe('Monitoring router', () => { localVue, store, router, - provide, }); }; |