diff options
Diffstat (limited to 'spec/frontend/monitoring')
35 files changed, 236 insertions, 240 deletions
diff --git a/spec/frontend/monitoring/alert_widget_spec.js b/spec/frontend/monitoring/alert_widget_spec.js index d004b1da0b6..fd9fb374274 100644 --- a/spec/frontend/monitoring/alert_widget_spec.js +++ b/spec/frontend/monitoring/alert_widget_spec.js @@ -28,12 +28,20 @@ describe('AlertWidget', () => { const nonFiringAlertResult = [ { - values: [[0, 1], [1, 42], [2, 41]], + values: [ + [0, 1], + [1, 42], + [2, 41], + ], }, ]; const firingAlertResult = [ { - values: [[0, 42], [1, 43], [2, 44]], + values: [ + [0, 42], + [1, 43], + [2, 44], + ], }, ]; const metricId = '5'; @@ -75,7 +83,7 @@ describe('AlertWidget', () => { }, }; - const createComponent = propsData => { + const createComponent = (propsData) => { wrapper = shallowMount(AlertWidget, { stubs: { GlTooltip, GlSprintf }, propsData: { @@ -88,10 +96,7 @@ describe('AlertWidget', () => { const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' }); const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' }); const findCurrentSettingsText = () => - wrapper - .find({ ref: 'alertCurrentSetting' }) - .text() - .replace(/\s\s+/g, ' '); + wrapper.find({ ref: 'alertCurrentSetting' }).text().replace(/\s\s+/g, ' '); const findBadge = () => wrapper.find(GlBadge); const findTooltip = () => wrapper.find(GlTooltip); @@ -103,7 +108,7 @@ describe('AlertWidget', () => { it('displays a loading spinner and disables form when fetching alerts', () => { let resolveReadAlert; mockReadAlert.mockReturnValue( - new Promise(resolve => { + new Promise((resolve) => { resolveReadAlert = resolve; }), ); @@ -126,7 +131,7 @@ describe('AlertWidget', () => { it('does not render loading spinner if showLoadingState is false', () => { let resolveReadAlert; mockReadAlert.mockReturnValue( - new Promise(resolve => { + new Promise((resolve) => { resolveReadAlert = resolve; }), ); @@ -300,11 +305,7 @@ describe('AlertWidget', () => { createComponent(propsWithManyAlerts); return waitForPromises().then(() => { - expect( - findTooltip() - .text() - .replace(/\s\s+/g, ' '), - ).toEqual('Firing: alert-label > 42'); + expect(findTooltip().text().replace(/\s\s+/g, ' ')).toEqual('Firing: alert-label > 42'); }); }); }); 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 17720aeb702..e873edaad3b 100644 --- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap +++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap @@ -37,6 +37,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` class="flex-grow-1" data-qa-selector="environments_dropdown" headertext="" + hideheaderborder="true" id="monitor-environments-dropdown" menu-class="monitor-environment-dropdown-menu" size="medium" diff --git a/spec/frontend/monitoring/components/alert_widget_form_spec.js b/spec/frontend/monitoring/components/alert_widget_form_spec.js index 6d71a9b09e5..6d87fb85f4d 100644 --- a/spec/frontend/monitoring/components/alert_widget_form_spec.js +++ b/spec/frontend/monitoring/components/alert_widget_form_spec.js @@ -76,11 +76,15 @@ describe('AlertWidgetForm', () => { }); 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); }); diff --git a/spec/frontend/monitoring/components/charts/annotations_spec.js b/spec/frontend/monitoring/components/charts/annotations_spec.js index fc90175d307..1eac0935fe4 100644 --- a/spec/frontend/monitoring/components/charts/annotations_spec.js +++ b/spec/frontend/monitoring/components/charts/annotations_spec.js @@ -36,7 +36,7 @@ describe('annotations spec', () => { }), ); - annotations.data.forEach(annotation => { + annotations.data.forEach((annotation) => { expect(annotation).toEqual(expect.any(Object)); }); @@ -58,7 +58,7 @@ describe('annotations spec', () => { }), ); - annotations.markLine.data.forEach(annotation => { + annotations.markLine.data.forEach((annotation) => { expect(annotation).toEqual(expect.any(Object)); }); @@ -83,7 +83,7 @@ describe('annotations spec', () => { }), ); - annotations.markLine.data.forEach(annotation => { + annotations.markLine.data.forEach((annotation) => { expect(annotation).toEqual(expect.any(Object)); }); diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index ebb49a2a0aa..dad3003d536 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -15,7 +15,7 @@ const TEST_LOWER = 9; describe('Anomaly chart component', () => { let wrapper; - const setupAnomalyChart = props => { + const setupAnomalyChart = (props) => { wrapper = shallowMount(Anomaly, { propsData: { ...props }, }); @@ -91,7 +91,7 @@ describe('Anomaly chart component', () => { expect(series.length).toEqual(2); // 1 upper + 1 lower boundaries expect(series[0].stack).toEqual(series[1].stack); - series.forEach(s => { + series.forEach((s) => { expect(s.type).toBe('line'); expect(s.lineStyle.width).toBe(0); expect(s.lineStyle.color).toMatch(/rgba\(.+\)/); diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js index a363fafdc31..40edde5f666 100644 --- a/spec/frontend/monitoring/components/charts/bar_spec.js +++ b/spec/frontend/monitoring/components/charts/bar_spec.js @@ -44,7 +44,7 @@ describe('Bar component', () => { it('should return chartData as array of arrays', () => { expect(chartData).toBeInstanceOf(Array); - chartData.forEach(item => { + chartData.forEach((item) => { expect(item).toBeInstanceOf(Array); }); }); diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index fbcff33d692..0c4b6e8990d 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -45,7 +45,7 @@ describe('Column component', () => { }); }; const findChart = () => wrapper.find(GlColumnChart); - const chartProps = prop => findChart().props(prop); + const chartProps = (prop) => findChart().props(prop); beforeEach(() => { createWrapper(); @@ -58,7 +58,7 @@ describe('Column component', () => { describe('xAxisLabel', () => { const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT - const useXAxisFormatter = date => { + const useXAxisFormatter = (date) => { const { xAxis } = chartProps('option'); const { formatter } = xAxis.axisLabel; return formatter(date); diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js index 850e2ca87db..9215f2e411f 100644 --- a/spec/frontend/monitoring/components/charts/gauge_spec.js +++ b/spec/frontend/monitoring/components/charts/gauge_spec.js @@ -49,7 +49,7 @@ describe('Gauge Chart component', () => { it.each(invalidCases)( 'if min has invalid value, defaults are used for both min and max', - invalidValue => { + (invalidValue) => { createWrapper({ minValue: invalidValue }); expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT); @@ -59,7 +59,7 @@ describe('Gauge Chart component', () => { it.each(invalidCases)( 'if max has invalid value, defaults are used for both min and max', - invalidValue => { + (invalidValue) => { createWrapper({ minValue: invalidValue }); expect(findGaugeChart().props('min')).toBe(MIN_DEFAULT); diff --git a/spec/frontend/monitoring/components/charts/options_spec.js b/spec/frontend/monitoring/components/charts/options_spec.js index 3372d27e4f9..064ce6f204c 100644 --- a/spec/frontend/monitoring/components/charts/options_spec.js +++ b/spec/frontend/monitoring/components/charts/options_spec.js @@ -145,7 +145,7 @@ describe('options spec', () => { expect(thresholds).toEqual([]); }); - it.each(invalidCases)('invalid values for thresholds are filtered out', invalidValue => { + it.each(invalidCases)('invalid values for thresholds are filtered out', (invalidValue) => { thresholds = getValidThresholds({ mode: 'absolute', range: { min: 0, max: 100 }, @@ -197,7 +197,7 @@ describe('options spec', () => { it.each(invalidCases)( 'when min has invalid value, empty result is returned', - invalidValue => { + (invalidValue) => { thresholds = getValidThresholds({ mode: 'absolute', range: { min: invalidValue, max: 100 }, @@ -210,7 +210,7 @@ describe('options spec', () => { it.each(invalidCases)( 'when max has invalid value, empty result is returned', - invalidValue => { + (invalidValue) => { thresholds = getValidThresholds({ mode: 'absolute', range: { min: 0, max: invalidValue }, @@ -244,7 +244,7 @@ describe('options spec', () => { it.each(invalidCases)( 'if invalid values are passed, empty result is returned', - invalidValue => { + (invalidValue) => { thresholds = getValidThresholds({ mode: 'absolute', range: { min: 0, max: 100 }, @@ -259,7 +259,7 @@ describe('options spec', () => { describe('mode', () => { it.each(invalidCases)( 'if invalid values are passed, empty result is returned', - invalidValue => { + (invalidValue) => { thresholds = getValidThresholds({ mode: invalidValue, range: { min: 0, max: 100 }, @@ -305,7 +305,7 @@ describe('options spec', () => { const outOfPercentBoundsValues = [-1, 0, 100, 101]; it.each(outOfPercentBoundsValues)( 'when values out of 0-100 range are passed, empty result is returned', - invalidValue => { + (invalidValue) => { thresholds = getValidThresholds({ mode: 'percentage', range: { min: 0, max: 1000 }, diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js index 2032258730a..4d4224a8b11 100644 --- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js +++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js @@ -6,7 +6,7 @@ import StackedColumnChart from '~/monitoring/components/charts/stacked_column.vu import { stackedColumnGraphData } from '../../graph_data'; jest.mock('~/lib/utils/icon_utils', () => ({ - getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)), + getSvgIconPathContent: jest.fn().mockImplementation((icon) => Promise.resolve(`${icon}-content`)), })); describe('Stacked column chart component', () => { @@ -26,7 +26,7 @@ describe('Stacked column chart component', () => { stubs: { GlPopover: true, }, - attachToDocument: true, + attachTo: document.body, }); beforeEach(() => { @@ -48,7 +48,7 @@ describe('Stacked column chart component', () => { data.forEach((series, index) => { const { values } = stackedColumnMockedData.metrics[index].result[0]; - expect(series.data).toEqual(values.map(value => value[1])); + expect(series.data).toEqual(values.map((value) => value[1])); }); }); diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index 8fcee80a2d8..b7e1cb91987 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -2,7 +2,7 @@ import { mount, shallowMount } from '@vue/test-utils'; import { setTestTimeout } from 'helpers/timeout'; import timezoneMock from 'timezone-mock'; import { GlLink } from '@gitlab/ui'; -import { TEST_HOST } from 'jest/helpers/test_constants'; +import { TEST_HOST } from 'helpers/test_constants'; import { GlAreaChart, GlLineChart, @@ -23,14 +23,14 @@ import { timeSeriesGraphData } from '../../graph_data'; jest.mock('lodash/throttle', () => // this throttle mock executes immediately - jest.fn(func => { + jest.fn((func) => { // eslint-disable-next-line no-param-reassign func.cancel = jest.fn(); return func; }), ); jest.mock('~/lib/utils/icon_utils', () => ({ - getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)), + getSvgIconPathContent: jest.fn().mockImplementation((icon) => Promise.resolve(`${icon}-content`)), })); describe('Time series component', () => { @@ -53,7 +53,7 @@ describe('Time series component', () => { stubs: { GlPopover: true, }, - attachToDocument: true, + attachTo: document.body, }); }; @@ -122,7 +122,7 @@ describe('Time series component', () => { }, ], }), - off: jest.fn(eChartEvent => { + off: jest.fn((eChartEvent) => { delete eChartMock.handlers[eChartEvent]; }), on: jest.fn((eChartEvent, fn) => { @@ -193,7 +193,7 @@ describe('Time series component', () => { it('does not throw error if data point is outside the zoom range', () => { const seriesDataWithoutValue = { ...mockLineSeriesData(), - seriesData: mockLineSeriesData().seriesData.map(data => ({ + seriesData: mockLineSeriesData().seriesData.map((data) => ({ ...data, value: undefined, })), @@ -270,7 +270,7 @@ describe('Time series component', () => { beforeEach(() => { wrapper.vm.formatTooltipText({ ...mockAnnotationsSeriesData, - seriesData: mockAnnotationsSeriesData.seriesData.map(data => ({ + seriesData: mockAnnotationsSeriesData.seriesData.map((data) => ({ ...data, data: annotationsMetadata, })), @@ -546,7 +546,7 @@ describe('Time series component', () => { describe('xAxisLabel', () => { const mockDate = Date.UTC(2020, 4, 26, 20); // 8:00 PM in GMT - const useXAxisFormatter = date => { + const useXAxisFormatter = (date) => { const { xAxis } = getChartOptions(); const { formatter } = xAxis.axisLabel; return formatter(date); @@ -620,7 +620,7 @@ describe('Time series component', () => { }, ]; - glChartComponents.forEach(dynamicComponent => { + glChartComponents.forEach((dynamicComponent) => { describe(`GitLab UI: ${dynamicComponent.chartType}`, () => { const findChartComponent = () => wrapper.find(dynamicComponent.component); @@ -705,7 +705,7 @@ describe('Time series component', () => { let lineColors; beforeEach(() => { - lineColors = wrapper.find(GlAreaChart).vm.series.map(item => item.lineStyle.color); + lineColors = wrapper.find(GlAreaChart).vm.series.map((item) => item.lineStyle.color); }); it('should contain different colors for contiguous time series', () => { @@ -727,7 +727,7 @@ describe('Time series component', () => { const legendColors = wrapper .find(GlChartLegend) .props('seriesInfo') - .map(item => item.color); + .map((item) => item.color); lineColors.forEach((color, index) => { expect(color).toBe(legendColors[index]); diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js index b22e05ec30a..43d5937a3a1 100644 --- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js +++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js @@ -107,7 +107,7 @@ describe('Actions menu', () => { describe('adding new metric from modal', () => { let origPage; - beforeEach(done => { + beforeEach((done) => { jest.spyOn(Tracking, 'event').mockReturnValue(); createShallowWrapper(); @@ -123,7 +123,7 @@ describe('Actions menu', () => { document.body.dataset.page = origPage; }); - it('is tracked', done => { + it('is tracked', (done) => { const submitButton = findAddMetricModalSubmitButton().vm; wrapper.vm.$nextTick(() => { @@ -219,7 +219,7 @@ describe('Actions menu', () => { }); }); - describe.each(ootbDashboards)('when current dashboard is OOTB', dashboard => { + describe.each(ootbDashboards)('when current dashboard is OOTB', (dashboard) => { beforeEach(() => { setupAllDashboards(store, dashboard.path); }); @@ -240,7 +240,7 @@ describe('Actions menu', () => { createShallowWrapper(); }); - describe.each(ootbDashboards)('when current dashboard is OOTB', dashboard => { + describe.each(ootbDashboards)('when current dashboard is OOTB', (dashboard) => { beforeEach(() => { setupAllDashboards(store, dashboard.path); }); diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js index f9a7a4d5a93..32fd9c45e8d 100644 --- a/spec/frontend/monitoring/components/dashboard_header_spec.js +++ b/spec/frontend/monitoring/components/dashboard_header_spec.js @@ -41,7 +41,7 @@ describe('Dashboard header', () => { const findActionsMenu = () => wrapper.find(ActionsMenu); - const setSearchTerm = searchTerm => { + const setSearchTerm = (searchTerm) => { store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm); }; @@ -147,13 +147,13 @@ describe('Dashboard header', () => { it('environments dropdown items can be checked', () => { const items = findEnvsDropdownItems(); - const checkItems = findEnvsDropdownItems().filter(item => item.props('isCheckItem')); + const checkItems = findEnvsDropdownItems().filter((item) => item.props('isCheckItem')); expect(items).toHaveLength(checkItems.length); }); it('checks the currently selected environment', () => { - const selectedItems = findEnvsDropdownItems().filter(item => item.props('isChecked')); + const selectedItems = findEnvsDropdownItems().filter((item) => item.props('isChecked')); expect(selectedItems).toHaveLength(1); expect(selectedItems.at(0).text()).toBe(currentEnvironmentName); @@ -218,7 +218,7 @@ describe('Dashboard header', () => { }); describe('timezone setting', () => { - const setupWithTimezone = value => { + const setupWithTimezone = (value) => { store = createStore({ dashboardTimezone: value }); createShallowWrapper(); }; @@ -295,7 +295,7 @@ describe('Dashboard header', () => { }); describe('adding metrics prop', () => { - it.each(ootbDashboards)('gets passed true if current dashboard is OOTB', dashboardPath => { + it.each(ootbDashboards)('gets passed true if current dashboard is OOTB', (dashboardPath) => { createShallowWrapper({ customMetricsAvailable: true }); store.state.monitoringDashboard.emptyState = false; @@ -308,7 +308,7 @@ describe('Dashboard header', () => { it.each(customDashboards)( 'gets passed false if current dashboard is custom', - dashboardPath => { + (dashboardPath) => { createShallowWrapper({ customMetricsAvailable: true }); store.state.monitoringDashboard.emptyState = false; diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index 1808faf8f0e..f64e05d3a2c 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -57,7 +57,7 @@ describe('Dashboard Panel', () => { const findTitle = () => wrapper.find({ ref: 'graphTitle' }); const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' }); const findMenuItems = () => wrapper.findAll(GlDropdownItem); - const findMenuItemByText = text => findMenuItems().filter(i => i.text() === text); + const findMenuItemByText = (text) => findMenuItems().filter((i) => i.text() === text); const findAlertsWidget = () => wrapper.find(AlertWidget); const createWrapper = (props, { mountFn = shallowMount, ...options } = {}) => { @@ -82,7 +82,7 @@ describe('Dashboard Panel', () => { }); }; - const setMetricsSavedToDb = val => + const setMetricsSavedToDb = (val) => monitoringDashboard.getters.metricsSavedToDb.mockReturnValue(val); beforeEach(() => { @@ -214,7 +214,7 @@ describe('Dashboard Panel', () => { }); describe('Supports different panel types', () => { - const dataWithType = type => { + const dataWithType = (type) => { return { ...graphData, type, @@ -777,11 +777,7 @@ describe('Dashboard Panel', () => { await wrapper.vm.$nextTick(); expect(findRunbookLinks().length).toBe(1); - expect( - findRunbookLinks() - .at(0) - .attributes('href'), - ).toBe(invalidUrl); + expect(findRunbookLinks().at(0).attributes('href')).toBe(invalidUrl); }); }); }); diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index 27e479ba498..db35f1cdde3 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -126,7 +126,7 @@ describe('Dashboard', () => { }); describe('panel containers layout', () => { - const findPanelLayoutWrapperAt = index => { + const findPanelLayoutWrapperAt = (index) => { return wrapper .find(GraphGroup) .findAll('[data-testid="dashboard-panel-layout-wrapper"]') @@ -225,7 +225,7 @@ describe('Dashboard', () => { describe('when the URL contains a reference to a panel', () => { let location; - const setSearch = search => { + const setSearch = (search) => { window.location = { ...location, search }; }; @@ -391,7 +391,7 @@ describe('Dashboard', () => { }); describe('when all panels in the first group are loading', () => { - const findGroupAt = i => wrapper.findAll(GraphGroup).at(i); + const findGroupAt = (i) => wrapper.findAll(GraphGroup).at(i); beforeEach(() => { setupStoreWithDashboard(store); @@ -434,7 +434,7 @@ describe('Dashboard', () => { setupStoreWithData(store); wrapper.vm.$nextTick(() => { - wrapper.findAll(GraphGroup).wrappers.forEach(groupWrapper => { + wrapper.findAll(GraphGroup).wrappers.forEach((groupWrapper) => { expect(groupWrapper.props('isLoading')).toBe(false); }); }); @@ -505,7 +505,7 @@ describe('Dashboard', () => { let group; let panel; - const mockKeyup = key => window.dispatchEvent(new KeyboardEvent('keyup', { key })); + const mockKeyup = (key) => window.dispatchEvent(new KeyboardEvent('keyup', { key })); const MockPanel = { template: `<div><slot name="top-left"/></div>`, @@ -532,7 +532,7 @@ describe('Dashboard', () => { it('displays a single panel and others are hidden', () => { const panels = wrapper.findAll(MockPanel); - const visiblePanels = panels.filter(w => w.isVisible()); + const visiblePanels = panels.filter((w) => w.isVisible()); expect(findExpandedPanel().isVisible()).toBe(true); // v-show for hiding panels is more performant than v-if @@ -587,18 +587,15 @@ describe('Dashboard', () => { }); it('group empty area displays a NO_DATA state', () => { - expect( - wrapper - .findAll({ ref: 'empty-group' }) - .at(0) - .props('selectedState'), - ).toEqual(metricStates.NO_DATA); + 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 findEnabledDraggables = () => findDraggables().filter((f) => !f.attributes('disabled')); const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel'); const findRearrangeButton = () => wrapper.find('.js-rearrange-button'); @@ -634,9 +631,7 @@ describe('Dashboard', () => { describe('when rearrange button is clicked', () => { const findFirstDraggableRemoveButton = () => - findDraggablePanels() - .at(0) - .find('.js-draggable-remove'); + findDraggablePanels().at(0).find('.js-draggable-remove'); beforeEach(() => { findRearrangeButton().vm.$emit('click'); @@ -668,11 +663,7 @@ describe('Dashboard', () => { }); it('shows a remove button, which removes a panel', () => { - expect( - findFirstDraggableRemoveButton() - .find('a') - .exists(), - ).toBe(true); + expect(findFirstDraggableRemoveButton().find('a').exists()).toBe(true); expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount); findFirstDraggableRemoveButton().trigger('click'); @@ -772,10 +763,7 @@ describe('Dashboard', () => { const panelIndex = 1; // skip expanded panel const getClipboardTextFirstPanel = () => - wrapper - .findAll(DashboardPanel) - .at(panelIndex) - .props('clipboardText'); + wrapper.findAll(DashboardPanel).at(panelIndex).props('clipboardText'); beforeEach(() => { setupStoreWithData(store); diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index ef5784183b2..6ed190051ce 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -1,3 +1,4 @@ +import { nextTick } from 'vue'; import { shallowMount } from '@vue/test-utils'; import { GlDropdownItem, GlIcon } from '@gitlab/ui'; @@ -27,18 +28,17 @@ describe('DashboardsDropdown', () => { ...props, defaultBranch, }, - sync: false, ...storeOpts, ...opts, }); } const findItems = () => wrapper.findAll(GlDropdownItem); - const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i); + const findItemAt = (i) => wrapper.findAll(GlDropdownItem).at(i); const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' }); const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' }); const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' }); - const setSearchTerm = searchTerm => wrapper.setData({ searchTerm }); + const setSearchTerm = (searchTerm) => wrapper.setData({ searchTerm }); beforeEach(() => { mockDashboards = dashboardGitResponse; @@ -72,22 +72,20 @@ describe('DashboardsDropdown', () => { expect(findNoItemsMsg().isVisible()).toBe(false); }); - it('filters dropdown items when searched for item exists in the list', () => { + it('filters dropdown items when searched for item exists in the list', async () => { const searchTerm = 'Overview'; setSearchTerm(searchTerm); + await nextTick(); - return wrapper.vm.$nextTick().then(() => { - expect(findItems()).toHaveLength(1); - }); + expect(findItems()).toHaveLength(1); }); - it('shows no items found message when searched for item does not exists in the list', () => { + it('shows no items found message when searched for item does not exists in the list', async () => { const searchTerm = 'does-not-exist'; setSearchTerm(searchTerm); + await nextTick(); - return wrapper.vm.$nextTick().then(() => { - expect(findNoItemsMsg().isVisible()).toBe(true); - }); + expect(findNoItemsMsg().isVisible()).toBe(true); }); }); @@ -105,7 +103,7 @@ describe('DashboardsDropdown', () => { describe('when the dashboard is missing a display name', () => { beforeEach(() => { - mockDashboards = dashboardGitResponse.map(d => ({ ...d, display_name: undefined })); + mockDashboards = dashboardGitResponse.map((d) => ({ ...d, display_name: undefined })); createComponent(); }); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 29115ffb817..4abb5b2e27b 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -1,3 +1,4 @@ +import { nextTick } from 'vue'; import { mount } from '@vue/test-utils'; import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue'; @@ -9,20 +10,19 @@ const createMountedWrapper = (props = {}) => { // Use `mount` to render native input elements wrapper = mount(DuplicateDashboardForm, { propsData: { ...props }, - sync: false, // We need to attach to document, so that `document.activeElement` is properly set in jsdom - attachToDocument: true, + attachTo: document.body, }); }; describe('DuplicateDashboardForm', () => { const defaultBranch = 'master'; - const findByRef = ref => wrapper.find({ ref }); + const findByRef = (ref) => wrapper.find({ ref }); const setValue = (ref, val) => { findByRef(ref).setValue(val); }; - const setChecked = value => { + const setChecked = (value) => { const input = wrapper.find(`.form-check-input[value="${value}"]`); input.element.checked = true; input.trigger('click'); @@ -47,34 +47,34 @@ describe('DuplicateDashboardForm', () => { describe('validates the file name', () => { const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback'); - it('when is empty', () => { + it('when is empty', async () => { setValue('fileName', ''); - return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); - expect(findInvalidFeedback().exists()).toBe(false); - }); + await nextTick(); + + expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); + expect(findInvalidFeedback().exists()).toBe(false); }); - it('when is valid', () => { + it('when is valid', async () => { setValue('fileName', 'my_dashboard.yml'); - return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); - expect(findInvalidFeedback().exists()).toBe(false); - }); + await nextTick(); + + expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); + expect(findInvalidFeedback().exists()).toBe(false); }); - it('when is not valid', () => { + it('when is not valid', async () => { setValue('fileName', 'my_dashboard.exe'); - return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid'); - expect(findInvalidFeedback().text()).toBeTruthy(); - }); + await nextTick(); + + expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid'); + expect(findInvalidFeedback().text()).toBeTruthy(); }); }); describe('emits `change` event', () => { const lastChange = () => - wrapper.vm.$nextTick().then(() => { + nextTick().then(() => { wrapper.find('form').trigger('change'); // Resolves to the last emitted change @@ -133,19 +133,19 @@ describe('DuplicateDashboardForm', () => { expect(lastChange()).resolves.toMatchObject({ branch: defaultBranch, }), - wrapper.vm.$nextTick(() => { + nextTick(() => { expect(findByRef('branchName').isVisible()).toBe(false); }), ]); }); - it('when `new` branch option is chosen, focuses on the branch name input', () => { + it('when `new` branch option is chosen, focuses on the branch name input', async () => { setChecked(wrapper.vm.$options.radioVals.NEW); - return wrapper.vm.$nextTick().then(() => { - wrapper.find('form').trigger('change'); - expect(document.activeElement).toBe(findByRef('branchName').element); - }); + await nextTick(); + + wrapper.find('form').trigger('change'); + expect(document.activeElement).toBe(findByRef('branchName').element); }); }); }); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js index d8ffb4443ac..7e7065da179 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js @@ -1,3 +1,5 @@ +import Vuex from 'vuex'; +import Vue from 'vue'; import { shallowMount } from '@vue/test-utils'; import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui'; @@ -8,6 +10,8 @@ import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_ import { dashboardGitResponse } from '../mock_data'; +Vue.use(Vuex); + describe('duplicate dashboard modal', () => { let wrapper; let mockDashboards; @@ -15,25 +19,28 @@ describe('duplicate dashboard modal', () => { let duplicateDashboardAction; let okEvent; - function createComponent(opts = {}) { - const storeOpts = { - methods: { - duplicateSystemDashboard: jest.fn(), - }, - computed: { - allDashboards: () => mockDashboards, - selectedDashboard: () => mockSelectedDashboard, + function createComponent() { + const store = new Vuex.Store({ + modules: { + monitoringDashboard: { + namespaced: true, + actions: { + duplicateSystemDashboard: duplicateDashboardAction, + }, + getters: { + allDashboards: () => mockDashboards, + selectedDashboard: () => mockSelectedDashboard, + }, + }, }, - }; + }); return shallowMount(DuplicateDashboardModal, { propsData: { defaultBranch: 'master', modalId: 'id', }, - sync: false, - ...storeOpts, - ...opts, + store, }); } @@ -51,12 +58,7 @@ describe('duplicate dashboard modal', () => { preventDefault: jest.fn(), }; - wrapper = createComponent({ - methods: { - // Mock vuex actions - duplicateSystemDashboard: duplicateDashboardAction, - }, - }); + wrapper = createComponent(); wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn(); }); @@ -65,34 +67,33 @@ describe('duplicate dashboard modal', () => { expect(findDuplicateDashboardForm().exists()).toBe(true); }); - it('saves a new dashboard', () => { + it('saves a new dashboard', async () => { findModal().vm.$emit('ok', okEvent); - return waitForPromises().then(() => { - expect(okEvent.preventDefault).toHaveBeenCalled(); - expect(wrapper.emitted().dashboardDuplicated).toBeTruthy(); - expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); - expect(findAlert().exists()).toBe(false); - }); + await waitForPromises(); + expect(okEvent.preventDefault).toHaveBeenCalled(); + expect(wrapper.emitted().dashboardDuplicated).toBeTruthy(); + expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]); + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); + expect(findAlert().exists()).toBe(false); }); - it('handles error when a new dashboard is not saved', () => { + it('handles error when a new dashboard is not saved', async () => { const errMsg = 'An error occurred'; duplicateDashboardAction.mockRejectedValueOnce(errMsg); findModal().vm.$emit('ok', okEvent); - return waitForPromises().then(() => { - expect(okEvent.preventDefault).toHaveBeenCalled(); + await waitForPromises(); - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(errMsg); + expect(okEvent.preventDefault).toHaveBeenCalled(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); - }); + expect(findAlert().exists()).toBe(true); + expect(findAlert().text()).toBe(errMsg); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); }); it('updates the form on changes', () => { @@ -101,9 +102,7 @@ describe('duplicate dashboard modal', () => { commitMessage: 'A commit message', }; - findModal() - .find(DuplicateDashboardForm) - .vm.$emit('change', formVals); + findModal().find(DuplicateDashboardForm).vm.$emit('change', formVals); // Binding's second argument contains the modal id expect(wrapper.vm.form).toEqual(formVals); diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js index 01089752933..cb06a1a6b64 100644 --- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js +++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js @@ -76,7 +76,7 @@ describe('Embed Group', () => { expect(wrapper.find('.gl-card-body').classes()).not.toContain('d-none'); }); - it('collapses when clicked', done => { + it('collapses when clicked', (done) => { metricsWithDataGetter.mockReturnValue([1]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); @@ -134,7 +134,7 @@ describe('Embed Group', () => { }); it('passes the correct props to the Embed components', () => { - expect(wrapper.findAll(MetricEmbed).wrappers.map(item => item.props())).toEqual( + expect(wrapper.findAll(MetricEmbed).wrappers.map((item) => item.props())).toEqual( multipleEmbedProps(), ); }); diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index ebcd6c0df3a..c57461c2d09 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -11,7 +11,7 @@ describe('Graph group component', () => { const findCaretIcon = () => wrapper.find(GlIcon); const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]'); - const createComponent = propsData => { + const createComponent = (propsData) => { wrapper = shallowMount(GraphGroup, { propsData, }); diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js index 4a550efe23c..1dd2ed4e141 100644 --- a/spec/frontend/monitoring/components/group_empty_state_spec.js +++ b/spec/frontend/monitoring/components/group_empty_state_spec.js @@ -35,7 +35,7 @@ describe('GroupEmptyState', () => { metricStates.LOADING, metricStates.UNKNOWN_ERROR, 'FOO STATE', // does not fail with unknown states - ])('given state %s', selectedState => { + ])('given state %s', (selectedState) => { beforeEach(() => { wrapper = createComponent({ selectedState }); }); diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js index b771d63d51f..2daad77d513 100644 --- a/spec/frontend/monitoring/components/links_section_spec.js +++ b/spec/frontend/monitoring/components/links_section_spec.js @@ -12,7 +12,7 @@ describe('Links Section component', () => { store, }); }; - const setState = links => { + const setState = (links) => { store.state.monitoringDashboard = { ...store.state.monitoringDashboard, emptyState: null, diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js index 8a478362b5e..a03d29309d4 100644 --- a/spec/frontend/monitoring/components/refresh_button_spec.js +++ b/spec/frontend/monitoring/components/refresh_button_spec.js @@ -17,9 +17,9 @@ describe('RefreshButton', () => { const findRefreshBtn = () => wrapper.find(GlButton); const findDropdown = () => wrapper.find(GlDropdown); const findOptions = () => findDropdown().findAll(GlDropdownItem); - const findOptionAt = index => findOptions().at(index); + const findOptionAt = (index) => findOptions().at(index); - const expectFetchDataToHaveBeenCalledTimes = times => { + const expectFetchDataToHaveBeenCalledTimes = (times) => { const refreshCalls = dispatch.mock.calls.filter(([action, payload]) => { return action === 'monitoringDashboard/fetchDashboardData' && payload === undefined; }); diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js index cc384aef231..f5db17ce367 100644 --- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js +++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js @@ -10,11 +10,14 @@ describe('Custom variable component', () => { label: 'Select environment', value: 'Production', options: { - values: [{ text: 'Production', value: 'prod' }, { text: 'Canary', value: 'canary' }], + values: [ + { text: 'Production', value: 'prod' }, + { text: 'Canary', value: 'canary' }, + ], }, }; - const createShallowWrapper = props => { + const createShallowWrapper = (props) => { wrapper = shallowMount(DropdownField, { propsData: { ...defaultProps, @@ -54,9 +57,7 @@ describe('Custom variable component', () => { createShallowWrapper(); jest.spyOn(wrapper.vm, '$emit'); - findDropdownItems() - .at(1) - .vm.$emit('click'); + findDropdownItems().at(1).vm.$emit('click'); return wrapper.vm.$nextTick(() => { expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', 'canary'); diff --git a/spec/frontend/monitoring/fixture_data.js b/spec/frontend/monitoring/fixture_data.js index 18ec74550b4..0f3dbaac493 100644 --- a/spec/frontend/monitoring/fixture_data.js +++ b/spec/frontend/monitoring/fixture_data.js @@ -35,7 +35,7 @@ const firstPanel = metricsDashboardViewModel.panelGroups[0].panels[0]; export const graphData = { ...firstPanel, - metrics: firstPanel.metrics.map(metric => ({ + metrics: firstPanel.metrics.map((metric) => ({ ...metric, result: metricsResult, state: metricStates.OK, @@ -44,7 +44,7 @@ export const graphData = { export const graphDataEmpty = { ...firstPanel, - metrics: firstPanel.metrics.map(metric => ({ + metrics: firstPanel.metrics.map((metric) => ({ ...metric, result: [], state: metricStates.NO_DATA, diff --git a/spec/frontend/monitoring/graph_data.js b/spec/frontend/monitoring/graph_data.js index 494fdb1b159..0b23ee41927 100644 --- a/spec/frontend/monitoring/graph_data.js +++ b/spec/frontend/monitoring/graph_data.js @@ -4,8 +4,8 @@ import { panelTypes, metricStates } from '~/monitoring/constants'; const initTime = 1435781450; // "Wed, 01 Jul 2015 20:10:50 GMT" const intervalSeconds = 120; -const makeValue = val => [initTime, val]; -const makeValues = vals => vals.map((val, i) => [initTime + intervalSeconds * i, val]); +const makeValue = (val) => [initTime, val]; +const makeValues = (vals) => vals.map((val, i) => [initTime + intervalSeconds * i, val]); // Raw Promethues Responses diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js index aea8815fb10..ca06c96c7d6 100644 --- a/spec/frontend/monitoring/mock_data.js +++ b/spec/frontend/monitoring/mock_data.js @@ -1,7 +1,8 @@ +// The path below needs to be relative because we import the mock-data to karma +import { TEST_HOST } from '../__helpers__/test_constants'; import invalidUrl from '~/lib/utils/invalid_url'; // This import path needs to be relative for now because this mock data is used in // Karma specs too, where the helpers/test_constants alias can not be resolved -import { TEST_HOST } from '../helpers/test_constants'; export const mockProjectDir = '/frontend-fixtures/environments-project'; export const mockApiEndpoint = `${TEST_HOST}/monitoring/mock`; diff --git a/spec/frontend/monitoring/requests/index_spec.js b/spec/frontend/monitoring/requests/index_spec.js index a91c209875a..078de5f15d1 100644 --- a/spec/frontend/monitoring/requests/index_spec.js +++ b/spec/frontend/monitoring/requests/index_spec.js @@ -1,5 +1,5 @@ import MockAdapter from 'axios-mock-adapter'; -import { backoffMockImplementation } from 'jest/helpers/backoff_helper'; +import { backoffMockImplementation } from 'helpers/backoff_helper'; import axios from '~/lib/utils/axios_utils'; import statusCodes from '~/lib/utils/http_status'; import * as commonUtils from '~/lib/utils/common_utils'; @@ -31,7 +31,7 @@ describe('monitoring metrics_requests', () => { it('returns a dashboard response', () => { mock.onGet(dashboardEndpoint).reply(statusCodes.OK, response); - return getDashboard(dashboardEndpoint, params).then(data => { + return getDashboard(dashboardEndpoint, params).then((data) => { expect(data).toEqual(metricsDashboardResponse); }); }); @@ -41,7 +41,7 @@ describe('monitoring metrics_requests', () => { mock.onGet(dashboardEndpoint).replyOnce(statusCodes.NO_CONTENT); mock.onGet(dashboardEndpoint).reply(statusCodes.OK, response); - return getDashboard(dashboardEndpoint, params).then(data => { + return getDashboard(dashboardEndpoint, params).then((data) => { expect(data).toEqual(metricsDashboardResponse); expect(mock.history.get).toHaveLength(3); }); @@ -50,7 +50,7 @@ describe('monitoring metrics_requests', () => { it('rejects after getting an error', () => { mock.onGet(dashboardEndpoint).reply(500); - return getDashboard(dashboardEndpoint, params).catch(error => { + return getDashboard(dashboardEndpoint, params).catch((error) => { expect(error).toEqual(expect.any(Error)); expect(mock.history.get).toHaveLength(1); }); @@ -74,7 +74,7 @@ describe('monitoring metrics_requests', () => { it('returns a dashboard response', () => { mock.onGet(prometheusEndpoint).reply(statusCodes.OK, response); - return getPrometheusQueryData(prometheusEndpoint, params).then(data => { + return getPrometheusQueryData(prometheusEndpoint, params).then((data) => { expect(data).toEqual(response.data); }); }); @@ -85,7 +85,7 @@ describe('monitoring metrics_requests', () => { mock.onGet(prometheusEndpoint).replyOnce(statusCodes.NO_CONTENT); mock.onGet(prometheusEndpoint).reply(statusCodes.OK, response); // 3rd attempt - return getPrometheusQueryData(prometheusEndpoint, params).then(data => { + return getPrometheusQueryData(prometheusEndpoint, params).then((data) => { expect(data).toEqual(response.data); expect(mock.history.get).toHaveLength(3); }); @@ -97,7 +97,7 @@ describe('monitoring metrics_requests', () => { error: 'An error ocurred', }); - return getPrometheusQueryData(prometheusEndpoint, params).catch(error => { + return getPrometheusQueryData(prometheusEndpoint, params).catch((error) => { expect(error).toEqual(new Error('Request failed with status code 500')); }); }); @@ -109,7 +109,7 @@ describe('monitoring metrics_requests', () => { error: 'An error ocurred', }); - return getPrometheusQueryData(prometheusEndpoint, params).catch(error => { + return getPrometheusQueryData(prometheusEndpoint, params).catch((error) => { expect(error).toEqual(new Error('Request failed with status code 401')); }); }); @@ -123,7 +123,7 @@ describe('monitoring metrics_requests', () => { error: 'An error ocurred', }); // 3rd attempt - return getPrometheusQueryData(prometheusEndpoint, params).catch(error => { + return getPrometheusQueryData(prometheusEndpoint, params).catch((error) => { expect(error).toEqual(new Error('Request failed with status code 500')); expect(mock.history.get).toHaveLength(3); }); @@ -140,7 +140,7 @@ describe('monitoring metrics_requests', () => { error: reason, }); - return getPrometheusQueryData(prometheusEndpoint, params).catch(error => { + return getPrometheusQueryData(prometheusEndpoint, params).catch((error) => { expect(error).toEqual(new Error(reason)); expect(mock.history.get).toHaveLength(1); }); diff --git a/spec/frontend/monitoring/router_spec.js b/spec/frontend/monitoring/router_spec.js index 8b97c8ed125..c30c4c56a6c 100644 --- a/spec/frontend/monitoring/router_spec.js +++ b/spec/frontend/monitoring/router_spec.js @@ -63,12 +63,7 @@ describe('Monitoring router', () => { }); expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect( - wrapper - .find(DashboardPage) - .find(Dashboard) - .exists(), - ).toBe(true); + expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); }); }); @@ -91,12 +86,7 @@ describe('Monitoring router', () => { }); expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect( - wrapper - .find(DashboardPage) - .find(Dashboard) - .exists(), - ).toBe(true); + expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); }); }); diff --git a/spec/frontend/monitoring/store/actions_spec.js b/spec/frontend/monitoring/store/actions_spec.js index 5c7ab4e6a1f..319441b5ba2 100644 --- a/spec/frontend/monitoring/store/actions_spec.js +++ b/spec/frontend/monitoring/store/actions_spec.js @@ -1,6 +1,6 @@ import MockAdapter from 'axios-mock-adapter'; import testAction from 'helpers/vuex_action_helper'; -import { backoffMockImplementation } from 'jest/helpers/backoff_helper'; +import { backoffMockImplementation } from 'helpers/backoff_helper'; import Tracking from '~/tracking'; import axios from '~/lib/utils/axios_utils'; import statusCodes from '~/lib/utils/http_status'; @@ -88,7 +88,7 @@ describe('Monitoring store actions', () => { // Setup describe('setGettingStartedEmptyState', () => { - it('should commit SET_GETTING_STARTED_EMPTY_STATE mutation', done => { + it('should commit SET_GETTING_STARTED_EMPTY_STATE mutation', (done) => { testAction( setGettingStartedEmptyState, null, @@ -105,7 +105,7 @@ describe('Monitoring store actions', () => { }); describe('setInitialState', () => { - it('should commit SET_INITIAL_STATE mutation', done => { + it('should commit SET_INITIAL_STATE mutation', (done) => { testAction( setInitialState, { @@ -233,7 +233,7 @@ describe('Monitoring store actions', () => { }; }); - it('dispatches a failure', done => { + it('dispatches a failure', (done) => { result() .then(() => { expect(commit).toHaveBeenCalledWith( @@ -250,7 +250,7 @@ describe('Monitoring store actions', () => { .catch(done.fail); }); - it('dispatches a failure action when a message is returned', done => { + it('dispatches a failure action when a message is returned', (done) => { result() .then(() => { expect(dispatch).toHaveBeenCalledWith( @@ -265,7 +265,7 @@ describe('Monitoring store actions', () => { .catch(done.fail); }); - it('does not show a flash error when showErrorBanner is disabled', done => { + it('does not show a flash error when showErrorBanner is disabled', (done) => { state.showErrorBanner = false; result() @@ -322,7 +322,7 @@ describe('Monitoring store actions', () => { state.timeRange = defaultTimeRange; }); - it('commits empty state when state.groups is empty', done => { + it('commits empty state when state.groups is empty', (done) => { const localGetters = { metricsWithData: () => [], }; @@ -353,7 +353,7 @@ describe('Monitoring store actions', () => { .catch(done.fail); }); - it('dispatches fetchPrometheusMetric for each panel query', done => { + it('dispatches fetchPrometheusMetric for each panel query', (done) => { state.dashboard.panelGroups = convertObjectPropsToCamelCase( metricsDashboardResponse.dashboard.panel_groups, ); @@ -390,7 +390,7 @@ describe('Monitoring store actions', () => { done(); }); - it('dispatches fetchPrometheusMetric for each panel query, handles an error', done => { + it('dispatches fetchPrometheusMetric for each panel query, handles an error', (done) => { state.dashboard.panelGroups = metricsDashboardViewModel.panelGroups; const metric = state.dashboard.panelGroups[0].panels[0].metrics[0]; @@ -449,7 +449,7 @@ describe('Monitoring store actions', () => { }; }); - it('commits result', done => { + it('commits result', (done) => { mock.onGet(prometheusEndpointPath).reply(200, { data }); // One attempt testAction( @@ -485,7 +485,7 @@ describe('Monitoring store actions', () => { step: 60, }; - it('uses calculated step', done => { + it('uses calculated step', (done) => { mock.onGet(prometheusEndpointPath).reply(200, { data }); // One attempt testAction( @@ -527,7 +527,7 @@ describe('Monitoring store actions', () => { step: 7, }; - it('uses metric step', done => { + it('uses metric step', (done) => { mock.onGet(prometheusEndpointPath).reply(200, { data }); // One attempt testAction( @@ -558,7 +558,7 @@ describe('Monitoring store actions', () => { }); }); - it('commits failure, when waiting for results and getting a server error', done => { + it('commits failure, when waiting for results and getting a server error', (done) => { mock.onGet(prometheusEndpointPath).reply(500); const error = new Error('Request failed with status code 500'); @@ -583,7 +583,7 @@ describe('Monitoring store actions', () => { }, ], [], - ).catch(e => { + ).catch((e) => { expect(e).toEqual(error); done(); }); @@ -991,7 +991,7 @@ describe('Monitoring store actions', () => { state.dashboardsEndpoint = '/dashboards.json'; }); - it('Succesful POST request resolves', done => { + it('Succesful POST request resolves', (done) => { mock.onPost(state.dashboardsEndpoint).reply(statusCodes.CREATED, { dashboard: dashboardGitResponse[1], }); @@ -1004,7 +1004,7 @@ describe('Monitoring store actions', () => { .catch(done.fail); }); - it('Succesful POST request resolves to a dashboard', done => { + it('Succesful POST request resolves to a dashboard', (done) => { const mockCreatedDashboard = dashboardGitResponse[1]; const params = { @@ -1026,7 +1026,7 @@ describe('Monitoring store actions', () => { }); testAction(duplicateSystemDashboard, params, state, [], []) - .then(result => { + .then((result) => { expect(mock.history.post).toHaveLength(1); expect(mock.history.post[0].data).toEqual(expectedPayload); expect(result).toEqual(mockCreatedDashboard); @@ -1036,10 +1036,10 @@ describe('Monitoring store actions', () => { .catch(done.fail); }); - it('Failed POST request throws an error', done => { + it('Failed POST request throws an error', (done) => { mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST); - testAction(duplicateSystemDashboard, {}, state, [], []).catch(err => { + testAction(duplicateSystemDashboard, {}, state, [], []).catch((err) => { expect(mock.history.post).toHaveLength(1); expect(err).toEqual(expect.any(String)); @@ -1047,14 +1047,14 @@ describe('Monitoring store actions', () => { }); }); - it('Failed POST request throws an error with a description', done => { + it('Failed POST request throws an error with a description', (done) => { const backendErrorMsg = 'This file already exists!'; mock.onPost(state.dashboardsEndpoint).reply(statusCodes.BAD_REQUEST, { error: backendErrorMsg, }); - testAction(duplicateSystemDashboard, {}, state, [], []).catch(err => { + testAction(duplicateSystemDashboard, {}, state, [], []).catch((err) => { expect(mock.history.post).toHaveLength(1); expect(err).toEqual(expect.any(String)); expect(err).toEqual(expect.stringContaining(backendErrorMsg)); @@ -1067,7 +1067,7 @@ describe('Monitoring store actions', () => { // Variables manipulation describe('updateVariablesAndFetchData', () => { - it('should commit UPDATE_VARIABLE_VALUE mutation and fetch data', done => { + it('should commit UPDATE_VARIABLE_VALUE mutation and fetch data', (done) => { testAction( updateVariablesAndFetchData, { pod: 'POD' }, diff --git a/spec/frontend/monitoring/store/getters_spec.js b/spec/frontend/monitoring/store/getters_spec.js index 509de8a4596..771ec0ea549 100644 --- a/spec/frontend/monitoring/store/getters_spec.js +++ b/spec/frontend/monitoring/store/getters_spec.js @@ -365,7 +365,7 @@ describe('Monitoring store Getters', () => { describe('selectedDashboard', () => { const { selectedDashboard } = getters; - const localGetters = localState => ({ + const localGetters = (localState) => ({ fullDashboardPath: getters.fullDashboardPath(localState), }); diff --git a/spec/frontend/monitoring/store/mutations_spec.js b/spec/frontend/monitoring/store/mutations_spec.js index 8d1351fc909..571828eb67c 100644 --- a/spec/frontend/monitoring/store/mutations_spec.js +++ b/spec/frontend/monitoring/store/mutations_spec.js @@ -465,7 +465,10 @@ describe('Monitoring mutations', () => { }); expect(variable.options).toEqual({ - values: [{ text: 'prometheus', value: 'prometheus' }, { text: 'node', value: 'node' }], + values: [ + { text: 'prometheus', value: 'prometheus' }, + { text: 'node', value: 'node' }, + ], }); }); }); @@ -509,7 +512,7 @@ describe('Monitoring mutations', () => { }); describe('panel preview metric', () => { - const getPreviewMetricAt = i => stateCopy.panelPreviewGraphData.metrics[i]; + const getPreviewMetricAt = (i) => stateCopy.panelPreviewGraphData.metrics[i]; beforeEach(() => { stateCopy.panelPreviewGraphData = { diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js index b97948fa1bf..58bb87cb332 100644 --- a/spec/frontend/monitoring/store/utils_spec.js +++ b/spec/frontend/monitoring/store/utils_spec.js @@ -127,7 +127,7 @@ describe('mapToDashboardViewModel', () => { let dashboard; - const setupWithPanel = panel => { + const setupWithPanel = (panel) => { dashboard = { panel_groups: [ { @@ -340,7 +340,7 @@ describe('mapToDashboardViewModel', () => { ], }); - const getMappedMetric = dashboard => { + const getMappedMetric = (dashboard) => { return mapToDashboardViewModel(dashboard).panelGroups[0].panels[0].metrics[0]; }; @@ -775,7 +775,11 @@ describe('normalizeQueryResponseData', () => { job: 'prometheus', instance: 'localhost:9090', }, - values: [[1435781430.781, '1'], [1435781445.781, '2'], [1435781460.781, '3']], + values: [ + [1435781430.781, '1'], + [1435781445.781, '2'], + [1435781460.781, '3'], + ], }, { metric: { @@ -783,7 +787,11 @@ describe('normalizeQueryResponseData', () => { job: 'node', instance: 'localhost:9091', }, - values: [[1435781430.781, '4'], [1435781445.781, '5'], [1435781460.781, '6']], + values: [ + [1435781430.781, '4'], + [1435781445.781, '5'], + [1435781460.781, '6'], + ], }, ], }; @@ -840,7 +848,10 @@ describe('normalizeQueryResponseData', () => { job: 'prometheus', instance: 'localhost:9090', }, - values: [[1435781430.781, '1'], [1435781460.781, 'NaN']], + values: [ + [1435781430.781, '1'], + [1435781460.781, 'NaN'], + ], }, ], }; @@ -849,7 +860,10 @@ describe('normalizeQueryResponseData', () => { { metric: { __name__: 'up', instance: 'localhost:9090', job: 'prometheus' }, value: ['2015-07-01T20:11:00.781Z', NaN], - values: [['2015-07-01T20:10:30.781Z', 1], ['2015-07-01T20:11:00.781Z', NaN]], + values: [ + ['2015-07-01T20:10:30.781Z', 1], + ['2015-07-01T20:11:00.781Z', NaN], + ], }, ]); }); diff --git a/spec/frontend/monitoring/store_utils.js b/spec/frontend/monitoring/store_utils.js index 6c8267e6a3c..911ccc78f7b 100644 --- a/spec/frontend/monitoring/store_utils.js +++ b/spec/frontend/monitoring/store_utils.js @@ -15,7 +15,7 @@ export const setMetricResult = ({ store, result, group = 0, panel = 0, metric = }); }; -const setEnvironmentData = store => { +const setEnvironmentData = (store) => { store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, environmentData); }; @@ -28,14 +28,14 @@ export const setupAllDashboards = (store, path) => { } }; -export const setupStoreWithDashboard = store => { +export const setupStoreWithDashboard = (store) => { store.commit( `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, metricsDashboardPayload, ); }; -export const setupStoreWithLinks = store => { +export const setupStoreWithLinks = (store) => { store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, { ...metricsDashboardPayload, links: [ @@ -47,7 +47,7 @@ export const setupStoreWithLinks = store => { }); }; -export const setupStoreWithData = store => { +export const setupStoreWithData = (store) => { setupAllDashboards(store); setupStoreWithDashboard(store); diff --git a/spec/frontend/monitoring/utils_spec.js b/spec/frontend/monitoring/utils_spec.js index fd7d09f7f72..cd49e4c7968 100644 --- a/spec/frontend/monitoring/utils_spec.js +++ b/spec/frontend/monitoring/utils_spec.js @@ -1,4 +1,4 @@ -import { TEST_HOST } from 'jest/helpers/test_constants'; +import { TEST_HOST } from 'helpers/test_constants'; import * as monitoringUtils from '~/monitoring/utils'; import * as urlUtils from '~/lib/utils/url_utility'; import { mockProjectDir, barMockData } from './mock_data'; @@ -295,7 +295,7 @@ describe('monitoring/utils', () => { ${'NOT_A_GROUP'} | ${title} | ${yLabel} | ${'group'} ${group} | ${'NOT_A_TITLE'} | ${yLabel} | ${'title'} ${group} | ${title} | ${'NOT_A_Y_LABEL'} | ${'y_label'} - `('throws an error when $missingField is incorrect', params => { + `('throws an error when $missingField is incorrect', (params) => { const search = `?group=${params.group}&title=${params.title}&y_label=${params.yLabel}`; expect(() => expandedPanelPayloadFromUrl(metricsDashboardViewModel, search)).toThrow(); }); @@ -308,7 +308,7 @@ describe('monitoring/utils', () => { const [panelGroup] = metricsDashboardViewModel.panelGroups; const [panel] = panelGroup.panels; - const getUrlParams = url => urlUtils.queryToObject(url.split('?')[1]); + const getUrlParams = (url) => urlUtils.queryToObject(url.split('?')[1]); it('returns URL for a panel when query parameters are given', () => { const params = getUrlParams(panelToUrl(dashboard, {}, panelGroup.group, panel)); |