diff options
Diffstat (limited to 'spec/frontend/monitoring')
22 files changed, 93 insertions, 130 deletions
diff --git a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap index 59c17daacff..2a8ce1d3f30 100644 --- a/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap +++ b/spec/frontend/monitoring/__snapshots__/alert_widget_spec.js.snap @@ -13,7 +13,7 @@ exports[`AlertWidget Alert firing displays a warning icon and matches snapshot 1 /> <span - class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me" + class="text-truncate gl-pl-2" > Firing: alert-label > 42 @@ -35,7 +35,7 @@ exports[`AlertWidget Alert not firing displays a warning icon and matches snapsh /> <span - class="text-truncate gl-pl-1-deprecated-no-really-do-not-use-me" + class="text-truncate gl-pl-2" > alert-label > 42 </span> diff --git a/spec/frontend/monitoring/alert_widget_spec.js b/spec/frontend/monitoring/alert_widget_spec.js index 193dbb3e63f..d004b1da0b6 100644 --- a/spec/frontend/monitoring/alert_widget_spec.js +++ b/spec/frontend/monitoring/alert_widget_spec.js @@ -84,7 +84,7 @@ describe('AlertWidget', () => { }, }); }; - const hasLoadingIcon = () => wrapper.contains(GlLoadingIcon); + const hasLoadingIcon = () => wrapper.find(GlLoadingIcon).exists(); const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' }); const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' }); const findCurrentSettingsText = () => 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 7ef956f8e05..a28ecac00fd 100644 --- a/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap +++ b/spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap @@ -32,7 +32,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` <div class="mb-2 pr-2 d-flex d-sm-block" > - <gl-new-dropdown-stub + <gl-dropdown-stub category="tertiary" class="flex-grow-1" data-qa-selector="environments_dropdown" @@ -47,12 +47,12 @@ exports[`Dashboard template matches the default snapshot 1`] = ` <div class="d-flex flex-column overflow-hidden" > - <gl-new-dropdown-header-stub> + <gl-dropdown-section-header-stub> Environment - </gl-new-dropdown-header-stub> + </gl-dropdown-section-header-stub> <gl-search-box-by-type-stub - class="m-2" + class="gl-m-3" clearbuttontitle="Clear" value="" /> @@ -69,7 +69,7 @@ exports[`Dashboard template matches the default snapshot 1`] = ` </div> </div> - </gl-new-dropdown-stub> + </gl-dropdown-stub> </div> <div diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index 15a52d03bcd..ebb49a2a0aa 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -46,9 +46,8 @@ describe('Anomaly chart component', () => { }); }); - it('is a Vue instance', () => { + it('renders correctly', () => { expect(findTimeSeries().exists()).toBe(true); - expect(findTimeSeries().isVueInstance()).toBe(true); }); describe('receives props correctly', () => { diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js index e39e6e7e2c2..a363fafdc31 100644 --- a/spec/frontend/monitoring/components/charts/bar_spec.js +++ b/spec/frontend/monitoring/components/charts/bar_spec.js @@ -1,7 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { GlBarChart } from '@gitlab/ui/dist/charts'; import Bar from '~/monitoring/components/charts/bar.vue'; -import { barMockData } from '../../mock_data'; +import { barGraphData } from '../../graph_data'; jest.mock('~/lib/utils/icon_utils', () => ({ getSvgIconPathContent: jest.fn().mockResolvedValue('mockSvgPathContent'), @@ -10,11 +10,14 @@ jest.mock('~/lib/utils/icon_utils', () => ({ describe('Bar component', () => { let barChart; let store; + let graphData; beforeEach(() => { + graphData = barGraphData(); + barChart = shallowMount(Bar, { propsData: { - graphData: barMockData, + graphData, }, store, }); @@ -31,15 +34,11 @@ describe('Bar component', () => { beforeEach(() => { glbarChart = barChart.find(GlBarChart); - chartData = barChart.vm.chartData[barMockData.metrics[0].label]; - }); - - it('is a Vue instance', () => { - expect(glbarChart.isVueInstance()).toBe(true); + chartData = barChart.vm.chartData[graphData.metrics[0].label]; }); it('should display a label on the x axis', () => { - expect(glbarChart.vm.xAxisTitle).toBe(barMockData.xLabel); + expect(glbarChart.props('xAxisTitle')).toBe(graphData.xLabel); }); it('should return chartData as array of arrays', () => { diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index a2056d96dcf..16e2080c000 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -95,10 +95,6 @@ describe('Column component', () => { describe('wrapped components', () => { describe('GitLab UI column chart', () => { - it('is a Vue instance', () => { - expect(findChart().isVueInstance()).toBe(true); - }); - it('receives data properties needed for proper chart render', () => { expect(chartProps('data').values).toEqual(dataValues); }); diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js index 27a2021e9be..c8375810a7b 100644 --- a/spec/frontend/monitoring/components/charts/heatmap_spec.js +++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js @@ -24,21 +24,14 @@ describe('Heatmap component', () => { }; describe('wrapped chart', () => { - let glHeatmapChart; - beforeEach(() => { createWrapper(); - glHeatmapChart = findChart(); }); afterEach(() => { wrapper.destroy(); }); - it('is a Vue instance', () => { - expect(glHeatmapChart.isVueInstance()).toBe(true); - }); - it('should display a label on the x axis', () => { expect(wrapper.vm.xAxisName).toBe(graphData.xLabel); }); diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js index bb2fbc68eaa..24a2af87eb8 100644 --- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js +++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js @@ -3,13 +3,15 @@ import timezoneMock from 'timezone-mock'; import { cloneDeep } from 'lodash'; import { GlStackedColumnChart, GlChartLegend } from '@gitlab/ui/dist/charts'; import StackedColumnChart from '~/monitoring/components/charts/stacked_column.vue'; -import { stackedColumnMockedData } from '../../mock_data'; +import { stackedColumnGraphData } from '../../graph_data'; jest.mock('~/lib/utils/icon_utils', () => ({ getSvgIconPathContent: jest.fn().mockImplementation(icon => Promise.resolve(`${icon}-content`)), })); describe('Stacked column chart component', () => { + const stackedColumnMockedData = stackedColumnGraphData(); + let wrapper; const findChart = () => wrapper.find(GlStackedColumnChart); @@ -63,9 +65,9 @@ describe('Stacked column chart component', () => { const groupBy = findChart().props('groupBy'); expect(groupBy).toEqual([ - '2020-01-30T12:00:00.000Z', - '2020-01-30T12:01:00.000Z', - '2020-01-30T12:02:00.000Z', + '2015-07-01T20:10:50.000Z', + '2015-07-01T20:12:50.000Z', + '2015-07-01T20:14:50.000Z', ]); }); diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index 6f9a89feb3e..7f0ff534db3 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -632,9 +632,8 @@ describe('Time series component', () => { return wrapper.vm.$nextTick(); }); - it('is a Vue instance', () => { + it('exists', () => { expect(findChartComponent().exists()).toBe(true); - expect(findChartComponent().isVueInstance()).toBe(true); }); it('receives data properties needed for proper chart render', () => { diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js index 024b2cbd7f1..b22e05ec30a 100644 --- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js +++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlNewDropdownItem } from '@gitlab/ui'; +import { GlDropdownItem } from '@gitlab/ui'; import { createStore } from '~/monitoring/stores'; import { DASHBOARD_PAGE, PANEL_NEW_PAGE } from '~/monitoring/router/constants'; import { setupAllDashboards, setupStoreWithData } from '../store_utils'; @@ -146,8 +146,8 @@ describe('Actions menu', () => { }); describe('add panel item', () => { - const GlNewDropdownItemStub = { - extends: GlNewDropdownItem, + const GlDropdownItemStub = { + extends: GlDropdownItem, props: { to: [String, Object], }, @@ -164,7 +164,7 @@ describe('Actions menu', () => { }, { mocks: { $route }, - stubs: { GlNewDropdownItem: GlNewDropdownItemStub }, + stubs: { GlDropdownItem: GlDropdownItemStub }, }, ); }); diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js index 5cf24706ebd..f9a7a4d5a93 100644 --- a/spec/frontend/monitoring/components/dashboard_header_spec.js +++ b/spec/frontend/monitoring/components/dashboard_header_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlNewDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui'; +import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui'; import { createStore } from '~/monitoring/stores'; import * as types from '~/monitoring/stores/mutation_types'; import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue'; @@ -31,7 +31,7 @@ describe('Dashboard header', () => { const findDashboardDropdown = () => wrapper.find(DashboardsDropdown); const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' }); - const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlNewDropdownItem); + const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem); const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType); const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }); const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon); diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js index 587ddd23d3f..08c69701bd2 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js @@ -68,7 +68,7 @@ describe('dashboard invalid url parameters', () => { it('form exists and can be submitted', () => { expect(findForm().exists()).toBe(true); expect(findSubmitBtn().exists()).toBe(true); - expect(findSubmitBtn().is('[disabled]')).toBe(false); + expect(findSubmitBtn().props('disabled')).toBe(false); }); it('form has a text area with a default value', () => { @@ -109,7 +109,7 @@ describe('dashboard invalid url parameters', () => { }); it('submit button is disabled', () => { - expect(findSubmitBtn().is('[disabled]')).toBe(true); + expect(findSubmitBtn().props('disabled')).toBe(true); }); }); }); diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index fb96bcc042f..8947a6c1570 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -2,7 +2,7 @@ import Vuex from 'vuex'; import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import { setTestTimeout } from 'helpers/timeout'; -import { GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui'; +import { GlDropdownItem } from '@gitlab/ui'; import invalidUrl from '~/lib/utils/invalid_url'; import axios from '~/lib/utils/axios_utils'; import AlertWidget from '~/monitoring/components/alert_widget.vue'; @@ -15,10 +15,14 @@ import { mockNamespace, mockNamespacedData, mockTimeRange, - barMockData, } from '../mock_data'; import { dashboardProps, graphData, graphDataEmpty } from '../fixture_data'; -import { anomalyGraphData, singleStatGraphData, heatmapGraphData } from '../graph_data'; +import { + anomalyGraphData, + singleStatGraphData, + heatmapGraphData, + barGraphData, +} from '../graph_data'; import { panelTypes } from '~/monitoring/constants'; @@ -137,7 +141,6 @@ describe('Dashboard Panel', () => { it('The Empty Chart component is rendered and is a Vue instance', () => { expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); - expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true); }); }); @@ -166,7 +169,6 @@ describe('Dashboard Panel', () => { it('The Empty Chart component is rendered and is a Vue instance', () => { expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); - expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true); }); }); @@ -222,13 +224,11 @@ describe('Dashboard Panel', () => { it('empty chart is rendered for empty results', () => { createWrapper({ graphData: graphDataEmpty }); expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); - expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true); }); it('area chart is rendered by default', () => { createWrapper(); expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); - expect(wrapper.find(MonitorTimeSeriesChart).isVueInstance()).toBe(true); }); describe.each` @@ -240,7 +240,7 @@ describe('Dashboard Panel', () => { ${dataWithType(panelTypes.COLUMN)} | ${MonitorColumnChart} | ${false} ${dataWithType(panelTypes.STACKED_COLUMN)} | ${MonitorStackedColumnChart} | ${false} ${heatmapGraphData()} | ${MonitorHeatmapChart} | ${false} - ${barMockData} | ${MonitorBarChart} | ${false} + ${barGraphData()} | ${MonitorBarChart} | ${false} `('when $data.type data is provided', ({ data, component, hasCtxMenu }) => { const attrs = { attr1: 'attr1Value', attr2: 'attr2Value' }; @@ -250,7 +250,6 @@ describe('Dashboard Panel', () => { it(`renders the chart component and binds attributes`, () => { expect(wrapper.find(component).exists()).toBe(true); - expect(wrapper.find(component).isVueInstance()).toBe(true); expect(wrapper.find(component).attributes()).toMatchObject(attrs); }); @@ -544,7 +543,6 @@ describe('Dashboard Panel', () => { }); it('it renders a time series chart with no errors', () => { - expect(wrapper.find(MonitorTimeSeriesChart).isVueInstance()).toBe(true); expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); }); }); diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index f37d95317ab..b7a0ea46b61 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -645,7 +645,7 @@ describe('Dashboard', () => { it('it enables draggables', () => { expect(findRearrangeButton().attributes('pressed')).toBeTruthy(); - expect(findEnabledDraggables()).toEqual(findDraggables()); + expect(findEnabledDraggables().wrappers).toEqual(findDraggables().wrappers); }); it('metrics can be swapped', () => { @@ -668,7 +668,11 @@ describe('Dashboard', () => { }); it('shows a remove button, which removes a panel', () => { - expect(findFirstDraggableRemoveButton().isEmpty()).toBe(false); + expect( + findFirstDraggableRemoveButton() + .find('a') + .exists(), + ).toBe(true); expect(findDraggablePanels().length).toEqual(metricsDashboardPanelCount); findFirstDraggableRemoveButton().trigger('click'); @@ -703,8 +707,7 @@ describe('Dashboard', () => { }); it('renders correctly', () => { - expect(wrapper.isVueInstance()).toBe(true); - expect(wrapper.exists()).toBe(true); + expect(wrapper.html()).not.toBe(''); }); }); diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index 89adbad386f..ef5784183b2 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import { GlNewDropdownItem, GlIcon } from '@gitlab/ui'; +import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue'; @@ -33,8 +33,8 @@ describe('DashboardsDropdown', () => { }); } - const findItems = () => wrapper.findAll(GlNewDropdownItem); - const findItemAt = i => wrapper.findAll(GlNewDropdownItem).at(i); + const findItems = () => wrapper.findAll(GlDropdownItem); + 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' }); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 29e4c4514fe..29115ffb817 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -50,7 +50,7 @@ describe('DuplicateDashboardForm', () => { it('when is empty', () => { setValue('fileName', ''); return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true); + expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); expect(findInvalidFeedback().exists()).toBe(false); }); }); @@ -58,7 +58,7 @@ describe('DuplicateDashboardForm', () => { it('when is valid', () => { setValue('fileName', 'my_dashboard.yml'); return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true); + expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid'); expect(findInvalidFeedback().exists()).toBe(false); }); }); @@ -66,7 +66,7 @@ describe('DuplicateDashboardForm', () => { it('when is not valid', () => { setValue('fileName', 'my_dashboard.exe'); return wrapper.vm.$nextTick(() => { - expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true); + expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid'); expect(findInvalidFeedback().text()).toBeTruthy(); }); }); @@ -144,7 +144,7 @@ describe('DuplicateDashboardForm', () => { return wrapper.vm.$nextTick().then(() => { wrapper.find('form').trigger('change'); - expect(findByRef('branchName').is(':focus')).toBe(true); + expect(document.activeElement).toBe(findByRef('branchName').element); }); }); }); diff --git a/spec/frontend/monitoring/components/embeds/embed_group_spec.js b/spec/frontend/monitoring/components/embeds/embed_group_spec.js index 49c10483c45..b63995ec2d4 100644 --- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js +++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js @@ -1,6 +1,6 @@ import { createLocalVue, mount, shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlDeprecatedButton, GlCard } from '@gitlab/ui'; +import { GlButton, GlCard } from '@gitlab/ui'; import { TEST_HOST } from 'helpers/test_constants'; import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue'; import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue'; @@ -71,16 +71,16 @@ describe('Embed Group', () => { it('is expanded by default', () => { metricsWithDataGetter.mockReturnValue([1]); - mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } }); + mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); expect(wrapper.find('.card-body').classes()).not.toContain('d-none'); }); it('collapses when clicked', done => { metricsWithDataGetter.mockReturnValue([1]); - mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } }); + mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - wrapper.find(GlDeprecatedButton).trigger('click'); + wrapper.find(GlButton).trigger('click'); wrapper.vm.$nextTick(() => { expect(wrapper.find('.card-body').classes()).toContain('d-none'); @@ -148,16 +148,16 @@ describe('Embed Group', () => { describe('button text', () => { it('has a singular label when there is one embed', () => { metricsWithDataGetter.mockReturnValue([1]); - mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } }); + mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide chart'); + expect(wrapper.find(GlButton).text()).toBe('Hide chart'); }); it('has a plural label when there are multiple embeds', () => { metricsWithDataGetter.mockReturnValue([2]); - mountComponent({ shallow: false, stubs: { MetricEmbed: '<div />' } }); + mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlDeprecatedButton).text()).toBe('Hide charts'); + expect(wrapper.find(GlButton).text()).toBe('Hide charts'); }); }); }); diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index 86e2523f708..ebcd6c0df3a 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -50,7 +50,7 @@ describe('Graph group component', () => { it('should contain a tab index for the collapse button', () => { const groupToggle = findToggleButton(); - expect(groupToggle.is('[tabindex]')).toBe(true); + expect(groupToggle.attributes('tabindex')).toBeDefined(); }); it('should show the open the group when collapseGroup is set to true', () => { diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js index a9b8295f38e..8a478362b5e 100644 --- a/spec/frontend/monitoring/components/refresh_button_spec.js +++ b/spec/frontend/monitoring/components/refresh_button_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; import Visibility from 'visibilityjs'; -import { GlNewDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui'; import { createStore } from '~/monitoring/stores'; import RefreshButton from '~/monitoring/components/refresh_button.vue'; @@ -15,8 +15,8 @@ describe('RefreshButton', () => { }; const findRefreshBtn = () => wrapper.find(GlButton); - const findDropdown = () => wrapper.find(GlNewDropdown); - const findOptions = () => findDropdown().findAll(GlNewDropdownItem); + const findDropdown = () => wrapper.find(GlDropdown); + const findOptions = () => findDropdown().findAll(GlDropdownItem); const findOptionAt = index => findOptions().at(index); const expectFetchDataToHaveBeenCalledTimes = times => { diff --git a/spec/frontend/monitoring/fixture_data.js b/spec/frontend/monitoring/fixture_data.js index 30040d3f89f..18ec74550b4 100644 --- a/spec/frontend/monitoring/fixture_data.js +++ b/spec/frontend/monitoring/fixture_data.js @@ -1,8 +1,7 @@ import { stateAndPropsFromDataset } from '~/monitoring/utils'; import { mapToDashboardViewModel } from '~/monitoring/stores/utils'; import { metricStates } from '~/monitoring/constants'; -import { convertObjectProps } from '~/lib/utils/common_utils'; -import { convertToCamelCase } from '~/lib/utils/text_utility'; +import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { metricsResult } from './mock_data'; @@ -14,13 +13,7 @@ export const metricsDashboardResponse = getJSONFixture( export const metricsDashboardPayload = metricsDashboardResponse.dashboard; const datasetState = stateAndPropsFromDataset( - // It's preferable to have props in snake_case, this will be addressed at: - // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/33574 - convertObjectProps( - // Some props use kebab-case, convert to snake_case first - key => convertToCamelCase(key.replace(/-/g, '_')), - metricsDashboardResponse.metrics_data, - ), + convertObjectPropsToCamelCase(metricsDashboardResponse.metrics_data), ); // new properties like addDashboardDocumentationPath prop and alertsEndpoint diff --git a/spec/frontend/monitoring/graph_data.js b/spec/frontend/monitoring/graph_data.js index f85351e55d7..494fdb1b159 100644 --- a/spec/frontend/monitoring/graph_data.js +++ b/spec/frontend/monitoring/graph_data.js @@ -246,3 +246,29 @@ export const gaugeChartGraphData = (panelOptions = {}) => { ], }); }; + +/** + * Generates stacked mock graph data according to options + * + * @param {Object} panelOptions - Panel options as in YML. + * @param {Object} dataOptions + */ +export const stackedColumnGraphData = (panelOptions = {}, dataOptions = {}) => { + return { + ...timeSeriesGraphData(panelOptions, dataOptions), + type: panelTypes.STACKED_COLUMN, + }; +}; + +/** + * Generates bar mock graph data according to options + * + * @param {Object} panelOptions - Panel options as in YML. + * @param {Object} dataOptions + */ +export const barGraphData = (panelOptions = {}, dataOptions = {}) => { + return { + ...timeSeriesGraphData(panelOptions, dataOptions), + type: panelTypes.BAR, + }; +}; diff --git a/spec/frontend/monitoring/mock_data.js b/spec/frontend/monitoring/mock_data.js index 28a7dd1af4f..aea8815fb10 100644 --- a/spec/frontend/monitoring/mock_data.js +++ b/spec/frontend/monitoring/mock_data.js @@ -245,51 +245,6 @@ export const metricsResult = [ }, ]; -export const stackedColumnMockedData = { - title: 'memories', - type: 'stacked-column', - x_label: 'x label', - y_label: 'y label', - metrics: [ - { - label: 'memory_1024', - unit: 'count', - series_name: 'group 1', - prometheus_endpoint_path: - '/root/autodevops-deploy-6/-/environments/24/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024', - metricId: 'NO_DB_metric_of_ages_1024', - result: [ - { - metric: {}, - values: [ - ['2020-01-30T12:00:00.000Z', '5'], - ['2020-01-30T12:01:00.000Z', '10'], - ['2020-01-30T12:02:00.000Z', '15'], - ], - }, - ], - }, - { - label: 'memory_1000', - unit: 'count', - series_name: 'group 2', - prometheus_endpoint_path: - '/root/autodevops-deploy-6/-/environments/24/prometheus/api/v1/query_range?query=avg%28sum%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+by+%28job%29%29+without+%28job%29+%2F+count%28avg%28container_memory_usage_bytes%7Bcontainer_name%21%3D%22POD%22%2Cpod_name%3D~%22%5E%25%7Bci_environment_slug%7D-%28%5B%5Ec%5D.%2A%7Cc%28%5B%5Ea%5D%7Ca%28%5B%5En%5D%7Cn%28%5B%5Ea%5D%7Ca%28%5B%5Er%5D%7Cr%5B%5Ey%5D%29%29%29%29.%2A%7C%29-%28.%2A%29%22%2Cnamespace%3D%22%25%7Bkube_namespace%7D%22%7D%29+without+%28job%29%29+%2F1024%2F1024', - metricId: 'NO_DB_metric_of_ages_1000', - result: [ - { - metric: {}, - values: [ - ['2020-01-30T12:00:00.000Z', '20'], - ['2020-01-30T12:01:00.000Z', '25'], - ['2020-01-30T12:02:00.000Z', '30'], - ], - }, - ], - }, - ], -}; - export const barMockData = { title: 'SLA Trends - Primary Services', type: 'bar', |