diff options
Diffstat (limited to 'spec/frontend/monitoring')
29 files changed, 141 insertions, 139 deletions
diff --git a/spec/frontend/monitoring/components/charts/anomaly_spec.js b/spec/frontend/monitoring/components/charts/anomaly_spec.js index 8dc6132709e..3674a49f42c 100644 --- a/spec/frontend/monitoring/components/charts/anomaly_spec.js +++ b/spec/frontend/monitoring/components/charts/anomaly_spec.js @@ -20,7 +20,7 @@ describe('Anomaly chart component', () => { propsData: { ...props }, }); }; - const findTimeSeries = () => wrapper.find(MonitorTimeSeriesChart); + const findTimeSeries = () => wrapper.findComponent(MonitorTimeSeriesChart); const getTimeSeriesProps = () => findTimeSeries().props(); describe('wrapped monitor-time-series-chart component', () => { diff --git a/spec/frontend/monitoring/components/charts/bar_spec.js b/spec/frontend/monitoring/components/charts/bar_spec.js index 6368c53943a..5339a7a525b 100644 --- a/spec/frontend/monitoring/components/charts/bar_spec.js +++ b/spec/frontend/monitoring/components/charts/bar_spec.js @@ -33,7 +33,7 @@ describe('Bar component', () => { let chartData; beforeEach(() => { - glbarChart = barChart.find(GlBarChart); + glbarChart = barChart.findComponent(GlBarChart); chartData = barChart.vm.chartData[graphData.metrics[0].label]; }); diff --git a/spec/frontend/monitoring/components/charts/column_spec.js b/spec/frontend/monitoring/components/charts/column_spec.js index e10cb3a456a..0158966997f 100644 --- a/spec/frontend/monitoring/components/charts/column_spec.js +++ b/spec/frontend/monitoring/components/charts/column_spec.js @@ -44,7 +44,7 @@ describe('Column component', () => { }, }); }; - const findChart = () => wrapper.find(GlColumnChart); + const findChart = () => wrapper.findComponent(GlColumnChart); const chartProps = (prop) => findChart().props(prop); beforeEach(() => { diff --git a/spec/frontend/monitoring/components/charts/gauge_spec.js b/spec/frontend/monitoring/components/charts/gauge_spec.js index c8f67d5d8c7..484199698ea 100644 --- a/spec/frontend/monitoring/components/charts/gauge_spec.js +++ b/spec/frontend/monitoring/components/charts/gauge_spec.js @@ -8,7 +8,7 @@ describe('Gauge Chart component', () => { let wrapper; - const findGaugeChart = () => wrapper.find(GlGaugeChart); + const findGaugeChart = () => wrapper.findComponent(GlGaugeChart); const createWrapper = ({ ...graphProps } = {}) => { wrapper = shallowMount(GaugeChart, { diff --git a/spec/frontend/monitoring/components/charts/heatmap_spec.js b/spec/frontend/monitoring/components/charts/heatmap_spec.js index 841b7e0648a..e163d4e73a0 100644 --- a/spec/frontend/monitoring/components/charts/heatmap_spec.js +++ b/spec/frontend/monitoring/components/charts/heatmap_spec.js @@ -8,7 +8,7 @@ describe('Heatmap component', () => { let wrapper; let store; - const findChart = () => wrapper.find(GlHeatmap); + const findChart = () => wrapper.findComponent(GlHeatmap); const graphData = heatmapGraphData(); diff --git a/spec/frontend/monitoring/components/charts/single_stat_spec.js b/spec/frontend/monitoring/components/charts/single_stat_spec.js index 8633b49565f..62a0b7e6ad3 100644 --- a/spec/frontend/monitoring/components/charts/single_stat_spec.js +++ b/spec/frontend/monitoring/components/charts/single_stat_spec.js @@ -15,7 +15,7 @@ describe('Single Stat Chart component', () => { }); }; - const findChart = () => wrapper.find(GlSingleStat); + const findChart = () => wrapper.findComponent(GlSingleStat); beforeEach(() => { createComponent(); diff --git a/spec/frontend/monitoring/components/charts/stacked_column_spec.js b/spec/frontend/monitoring/components/charts/stacked_column_spec.js index 9cab3650f28..91fe36bc6e4 100644 --- a/spec/frontend/monitoring/components/charts/stacked_column_spec.js +++ b/spec/frontend/monitoring/components/charts/stacked_column_spec.js @@ -15,8 +15,8 @@ describe('Stacked column chart component', () => { let wrapper; - const findChart = () => wrapper.find(GlStackedColumnChart); - const findLegend = () => wrapper.find(GlChartLegend); + const findChart = () => wrapper.findComponent(GlStackedColumnChart); + const findLegend = () => wrapper.findComponent(GlChartLegend); const createWrapper = (props = {}, mountingMethod = shallowMount) => mountingMethod(StackedColumnChart, { diff --git a/spec/frontend/monitoring/components/charts/time_series_spec.js b/spec/frontend/monitoring/components/charts/time_series_spec.js index f4bca26f659..503dee7b937 100644 --- a/spec/frontend/monitoring/components/charts/time_series_spec.js +++ b/spec/frontend/monitoring/components/charts/time_series_spec.js @@ -9,7 +9,6 @@ import { mount, shallowMount } from '@vue/test-utils'; import timezoneMock from 'timezone-mock'; import { nextTick } from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; -import { setTestTimeout } from 'helpers/timeout'; import { shallowWrapperContainsSlotText } from 'helpers/vue_test_utils_helper'; import TimeSeries from '~/monitoring/components/charts/time_series.vue'; import { panelTypes, chartHeight } from '~/monitoring/constants'; @@ -59,17 +58,13 @@ describe('Time series component', () => { }); }; - beforeEach(() => { - setTestTimeout(1000); - }); - afterEach(() => { wrapper.destroy(); }); describe('With a single time series', () => { describe('general functions', () => { - const findChart = () => wrapper.find({ ref: 'chart' }); + const findChart = () => wrapper.findComponent({ ref: 'chart' }); beforeEach(async () => { createWrapper({}, mount); @@ -215,7 +210,7 @@ describe('Time series component', () => { const name = 'Metric 1'; const value = '5.556'; const dataIndex = 0; - const seriesLabel = wrapper.find(GlChartSeriesLabel); + const seriesLabel = wrapper.findComponent(GlChartSeriesLabel); expect(seriesLabel.vm.color).toBe(''); @@ -225,7 +220,11 @@ describe('Time series component', () => { ]); expect( - shallowWrapperContainsSlotText(wrapper.find(GlLineChart), 'tooltip-content', value), + shallowWrapperContainsSlotText( + wrapper.findComponent(GlLineChart), + 'tooltip-content', + value, + ), ).toBe(true); }); @@ -598,7 +597,7 @@ describe('Time series component', () => { glChartComponents.forEach((dynamicComponent) => { describe(`GitLab UI: ${dynamicComponent.chartType}`, () => { - const findChartComponent = () => wrapper.find(dynamicComponent.component); + const findChartComponent = () => wrapper.findComponent(dynamicComponent.component); beforeEach(async () => { createWrapper( @@ -656,7 +655,7 @@ describe('Time series component', () => { wrapper.vm.tooltip.commitUrl = commitUrl; await nextTick(); - const commitLink = wrapper.find(GlLink); + const commitLink = wrapper.findComponent(GlLink); expect(shallowWrapperContainsSlotText(commitLink, 'default', mockSha)).toBe(true); expect(commitLink.attributes('href')).toEqual(commitUrl); @@ -680,7 +679,9 @@ describe('Time series component', () => { let lineColors; beforeEach(() => { - lineColors = wrapper.find(GlAreaChart).vm.series.map((item) => item.lineStyle.color); + lineColors = wrapper + .findComponent(GlAreaChart) + .vm.series.map((item) => item.lineStyle.color); }); it('should contain different colors for contiguous time series', () => { @@ -690,7 +691,7 @@ describe('Time series component', () => { }); it('should match series color with tooltip label color', () => { - const labels = wrapper.findAll(GlChartSeriesLabel); + const labels = wrapper.findAllComponents(GlChartSeriesLabel); lineColors.forEach((color, index) => { const labelColor = labels.at(index).props('color'); @@ -700,7 +701,7 @@ describe('Time series component', () => { it('should match series color with legend color', () => { const legendColors = wrapper - .find(GlChartLegend) + .findComponent(GlChartLegend) .props('seriesInfo') .map((item) => item.color); @@ -713,7 +714,7 @@ describe('Time series component', () => { }); describe('legend layout', () => { - const findLegend = () => wrapper.find(GlChartLegend); + const findLegend = () => wrapper.findComponent(GlChartLegend); beforeEach(async () => { createWrapper({}, mount); diff --git a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js index d74f959ac0f..bb57420d406 100644 --- a/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js +++ b/spec/frontend/monitoring/components/dashboard_actions_menu_spec.js @@ -92,7 +92,7 @@ describe('Actions menu', () => { }); it('renders custom metrics form fields', () => { - expect(wrapper.find(CustomMetricsFormFields).exists()).toBe(true); + expect(wrapper.findComponent(CustomMetricsFormFields).exists()).toBe(true); }); }); @@ -316,7 +316,7 @@ describe('Actions menu', () => { }); it('is not disabled', () => { - expect(findStarDashboardItem().attributes('disabled')).toBeFalsy(); + expect(findStarDashboardItem().attributes('disabled')).toBeUndefined(); }); it('is disabled when starring is taking place', async () => { diff --git a/spec/frontend/monitoring/components/dashboard_header_spec.js b/spec/frontend/monitoring/components/dashboard_header_spec.js index e28c2913949..18ccda2c41c 100644 --- a/spec/frontend/monitoring/components/dashboard_header_spec.js +++ b/spec/frontend/monitoring/components/dashboard_header_spec.js @@ -29,18 +29,19 @@ describe('Dashboard header', () => { let store; let wrapper; - const findDashboardDropdown = () => wrapper.find(DashboardsDropdown); + const findDashboardDropdown = () => wrapper.findComponent(DashboardsDropdown); - const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' }); - const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem); - const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType); - const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' }); - const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon); + const findEnvsDropdown = () => wrapper.findComponent({ ref: 'monitorEnvironmentsDropdown' }); + const findEnvsDropdownItems = () => findEnvsDropdown().findAllComponents(GlDropdownItem); + const findEnvsDropdownSearch = () => findEnvsDropdown().findComponent(GlSearchBoxByType); + const findEnvsDropdownSearchMsg = () => + wrapper.findComponent({ ref: 'monitorEnvironmentsDropdownMsg' }); + const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().findComponent(GlLoadingIcon); - const findDateTimePicker = () => wrapper.find(DateTimePicker); - const findRefreshButton = () => wrapper.find(RefreshButton); + const findDateTimePicker = () => wrapper.findComponent(DateTimePicker); + const findRefreshButton = () => wrapper.findComponent(RefreshButton); - const findActionsMenu = () => wrapper.find(ActionsMenu); + const findActionsMenu = () => wrapper.findComponent(ActionsMenu); const setSearchTerm = (searchTerm) => { store.commit(`monitoringDashboard/${types.SET_ENVIRONMENTS_FILTER}`, searchTerm); diff --git a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js index f19ef6c6fb7..d71f6374967 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_builder_spec.js @@ -32,14 +32,14 @@ describe('dashboard invalid url parameters', () => { }); }; - const findForm = () => wrapper.find(GlForm); - const findTxtArea = () => findForm().find(GlFormTextarea); + const findForm = () => wrapper.findComponent(GlForm); + const findTxtArea = () => findForm().findComponent(GlFormTextarea); const findSubmitBtn = () => findForm().find('[type="submit"]'); - const findClipboardCopyBtn = () => wrapper.find({ ref: 'clipboardCopyBtn' }); - const findViewDocumentationBtn = () => wrapper.find({ ref: 'viewDocumentationBtn' }); - const findOpenRepositoryBtn = () => wrapper.find({ ref: 'openRepositoryBtn' }); - const findPanel = () => wrapper.find(DashboardPanel); - const findTimeRangePicker = () => wrapper.find(DateTimePicker); + const findClipboardCopyBtn = () => wrapper.findComponent({ ref: 'clipboardCopyBtn' }); + const findViewDocumentationBtn = () => wrapper.findComponent({ ref: 'viewDocumentationBtn' }); + const findOpenRepositoryBtn = () => wrapper.findComponent({ ref: 'openRepositoryBtn' }); + const findPanel = () => wrapper.findComponent(DashboardPanel); + const findTimeRangePicker = () => wrapper.findComponent(DateTimePicker); const findRefreshButton = () => wrapper.find('[data-testid="previewRefreshButton"]'); beforeEach(() => { @@ -192,8 +192,8 @@ describe('dashboard invalid url parameters', () => { }); it('displays an alert', () => { - expect(wrapper.find(GlAlert).exists()).toBe(true); - expect(wrapper.find(GlAlert).text()).toBe(mockError); + expect(wrapper.findComponent(GlAlert).exists()).toBe(true); + expect(wrapper.findComponent(GlAlert).text()).toBe(mockError); }); it('displays an empty dashboard panel', () => { @@ -215,11 +215,11 @@ describe('dashboard invalid url parameters', () => { }); it('displays no alert', () => { - expect(wrapper.find(GlAlert).exists()).toBe(false); + expect(wrapper.findComponent(GlAlert).exists()).toBe(false); }); it('displays panel with data', () => { - const { title, type } = wrapper.find(DashboardPanel).props('graphData'); + const { title, type } = wrapper.findComponent(DashboardPanel).props('graphData'); expect(title).toBe(mockPanel.title); expect(type).toBe(mockPanel.type); diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index 7c54a4742ac..d797d9e2ad0 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -3,7 +3,6 @@ import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; import Vuex from 'vuex'; import { nextTick } from 'vue'; -import { setTestTimeout } from 'helpers/timeout'; import axios from '~/lib/utils/axios_utils'; import MonitorAnomalyChart from '~/monitoring/components/charts/anomaly.vue'; @@ -42,11 +41,11 @@ describe('Dashboard Panel', () => { const exampleText = 'example_text'; - const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' }); - const findTimeChart = () => wrapper.find({ ref: 'timeSeriesChart' }); - const findTitle = () => wrapper.find({ ref: 'graphTitle' }); - const findCtxMenu = () => wrapper.find({ ref: 'contextualMenu' }); - const findMenuItems = () => wrapper.findAll(GlDropdownItem); + const findCopyLink = () => wrapper.findComponent({ ref: 'copyChartLink' }); + const findTimeChart = () => wrapper.findComponent({ ref: 'timeSeriesChart' }); + const findTitle = () => wrapper.findComponent({ ref: 'graphTitle' }); + const findCtxMenu = () => wrapper.findComponent({ ref: 'contextualMenu' }); + const findMenuItems = () => wrapper.findAllComponents(GlDropdownItem); const findMenuItemByText = (text) => findMenuItems().filter((i) => i.text() === text); const createWrapper = (props, { mountFn = shallowMount, ...options } = {}) => { @@ -72,8 +71,6 @@ describe('Dashboard Panel', () => { }; beforeEach(() => { - setTestTimeout(1000); - store = createStore(); state = store.state.monitoringDashboard; @@ -118,7 +115,7 @@ describe('Dashboard Panel', () => { }); it('renders no download csv link', () => { - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(false); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(false); }); it('does not contain graph widgets', () => { @@ -126,7 +123,7 @@ describe('Dashboard Panel', () => { }); it('The Empty Chart component is rendered and is a Vue instance', () => { - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); }); @@ -146,7 +143,7 @@ describe('Dashboard Panel', () => { }); it('renders no download csv link', () => { - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(false); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(false); }); it('does not contain graph widgets', () => { @@ -154,7 +151,7 @@ describe('Dashboard Panel', () => { }); it('The Empty Chart component is rendered and is a Vue instance', () => { - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); }); @@ -173,7 +170,7 @@ describe('Dashboard Panel', () => { it('contains graph widgets', () => { expect(findCtxMenu().exists()).toBe(true); - expect(wrapper.find({ ref: 'downloadCsvLink' }).exists()).toBe(true); + expect(wrapper.findComponent({ ref: 'downloadCsvLink' }).exists()).toBe(true); }); it('sets no clipboard copy link on dropdown by default', () => { @@ -208,12 +205,12 @@ describe('Dashboard Panel', () => { it('empty chart is rendered for empty results', () => { createWrapper({ graphData: graphDataEmpty }); - expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorEmptyChart).exists()).toBe(true); }); it('area chart is rendered by default', () => { createWrapper(); - expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorTimeSeriesChart).exists()).toBe(true); }); describe.each` @@ -234,8 +231,8 @@ describe('Dashboard Panel', () => { }); it(`renders the chart component and binds attributes`, () => { - expect(wrapper.find(component).exists()).toBe(true); - expect(wrapper.find(component).attributes()).toMatchObject(attrs); + expect(wrapper.findComponent(component).exists()).toBe(true); + expect(wrapper.findComponent(component).attributes()).toMatchObject(attrs); }); it(`contextual menu is ${hasCtxMenu ? '' : 'not '}shown`, () => { @@ -273,7 +270,7 @@ describe('Dashboard Panel', () => { }); describe('Edit custom metric dropdown item', () => { - const findEditCustomMetricLink = () => wrapper.find({ ref: 'editMetricLink' }); + const findEditCustomMetricLink = () => wrapper.findComponent({ ref: 'editMetricLink' }); const mockEditPath = '/root/kubernetes-gke-project/prometheus/metrics/23/edit'; beforeEach(async () => { @@ -434,7 +431,7 @@ describe('Dashboard Panel', () => { }); it('it renders a time series chart with no errors', () => { - expect(wrapper.find(MonitorTimeSeriesChart).exists()).toBe(true); + expect(wrapper.findComponent(MonitorTimeSeriesChart).exists()).toBe(true); }); }); @@ -446,7 +443,7 @@ describe('Dashboard Panel', () => { it('displays a heatmap in local timezone', () => { createWrapper({ graphData: heatmapGraphData() }); - expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('LOCAL'); + expect(wrapper.findComponent(MonitorHeatmapChart).props('timezone')).toBe('LOCAL'); }); describe('when timezone is set to UTC', () => { @@ -461,13 +458,13 @@ describe('Dashboard Panel', () => { it('displays a heatmap with UTC', () => { createWrapper({ graphData: heatmapGraphData() }); - expect(wrapper.find(MonitorHeatmapChart).props('timezone')).toBe('UTC'); + expect(wrapper.findComponent(MonitorHeatmapChart).props('timezone')).toBe('UTC'); }); }); }); describe('Expand to full screen', () => { - const findExpandBtn = () => wrapper.find({ ref: 'expandBtn' }); + const findExpandBtn = () => wrapper.findComponent({ ref: 'expandBtn' }); describe('when there is no @expand listener', () => { it('does not show `View full screen` option', () => { @@ -495,7 +492,7 @@ describe('Dashboard Panel', () => { }); describe('When graphData contains links', () => { - const findManageLinksItem = () => wrapper.find({ ref: 'manageLinksItem' }); + const findManageLinksItem = () => wrapper.findComponent({ ref: 'manageLinksItem' }); const mockLinks = [ { url: 'https://example.com', diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index 90171cfc65e..608404e5c5b 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -97,8 +97,10 @@ describe('Dashboard', () => { createShallowWrapper({ hasMetrics: true }); await nextTick(); - expect(wrapper.find(EmptyState).exists()).toBe(true); - expect(wrapper.find(EmptyState).props('selectedState')).toBe(dashboardEmptyStates.LOADING); + expect(wrapper.findComponent(EmptyState).exists()).toBe(true); + expect(wrapper.findComponent(EmptyState).props('selectedState')).toBe( + dashboardEmptyStates.LOADING, + ); }); it('hides the group panels when showPanels is false', async () => { @@ -126,7 +128,7 @@ describe('Dashboard', () => { describe('panel containers layout', () => { const findPanelLayoutWrapperAt = (index) => { return wrapper - .find(GraphGroup) + .findComponent(GraphGroup) .findAll('[data-testid="dashboard-panel-layout-wrapper"]') .at(index); }; @@ -366,7 +368,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.findAllComponents(GraphGroup).at(i); beforeEach(async () => { setupStoreWithDashboard(store); @@ -409,7 +411,7 @@ describe('Dashboard', () => { setupStoreWithData(store); await nextTick(); - wrapper.findAll(GraphGroup).wrappers.forEach((groupWrapper) => { + wrapper.findAllComponents(GraphGroup).wrappers.forEach((groupWrapper) => { expect(groupWrapper.props('isLoading')).toBe(false); }); }); @@ -443,7 +445,7 @@ describe('Dashboard', () => { }); describe('single panel expands to "full screen" mode', () => { - const findExpandedPanel = () => wrapper.find({ ref: 'expandedPanel' }); + const findExpandedPanel = () => wrapper.findComponent({ ref: 'expandedPanel' }); describe('when the panel is not expanded', () => { beforeEach(async () => { @@ -457,7 +459,7 @@ describe('Dashboard', () => { }); it('can set a panel as expanded', () => { - const panel = wrapper.findAll(DashboardPanel).at(1); + const panel = wrapper.findAllComponents(DashboardPanel).at(1); jest.spyOn(store, 'dispatch'); @@ -503,7 +505,7 @@ describe('Dashboard', () => { }); it('displays a single panel and others are hidden', () => { - const panels = wrapper.findAll(MockPanel); + const panels = wrapper.findAllComponents(MockPanel); const visiblePanels = panels.filter((w) => w.isVisible()); expect(findExpandedPanel().isVisible()).toBe(true); @@ -523,7 +525,7 @@ describe('Dashboard', () => { }); it('restores full dashboard by clicking `back`', () => { - wrapper.find({ ref: 'goBackBtn' }).vm.$emit('click'); + wrapper.findComponent({ ref: 'goBackBtn' }).vm.$emit('click'); expect(store.dispatch).toHaveBeenCalledWith( 'monitoringDashboard/clearExpandedPanel', @@ -551,21 +553,21 @@ describe('Dashboard', () => { }); it('shows a group empty area', () => { - const emptyGroup = wrapper.findAll({ ref: 'empty-group' }); + const emptyGroup = wrapper.findAllComponents({ ref: 'empty-group' }); expect(emptyGroup).toHaveLength(1); expect(emptyGroup.is(GroupEmptyState)).toBe(true); }); it('group empty area displays a NO_DATA state', () => { - expect(wrapper.findAll({ ref: 'empty-group' }).at(0).props('selectedState')).toEqual( - metricStates.NO_DATA, - ); + expect( + wrapper.findAllComponents({ ref: 'empty-group' }).at(0).props('selectedState'), + ).toEqual(metricStates.NO_DATA); }); }); describe('drag and drop function', () => { - const findDraggables = () => wrapper.findAll(VueDraggable); + const findDraggables = () => wrapper.findAllComponents(VueDraggable); const findEnabledDraggables = () => findDraggables().filter((f) => !f.attributes('disabled')); const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel'); const findRearrangeButton = () => wrapper.find('.js-rearrange-button'); @@ -677,7 +679,7 @@ describe('Dashboard', () => { }); it('hides dashboard header by default', () => { - expect(wrapper.find({ ref: 'prometheusGraphsHeader' }).exists()).toEqual(false); + expect(wrapper.findComponent({ ref: 'prometheusGraphsHeader' }).exists()).toEqual(false); }); it('renders correctly', () => { @@ -742,7 +744,7 @@ describe('Dashboard', () => { const panelIndex = 1; // skip expanded panel const getClipboardTextFirstPanel = () => - wrapper.findAll(DashboardPanel).at(panelIndex).props('clipboardText'); + wrapper.findAllComponents(DashboardPanel).at(panelIndex).props('clipboardText'); beforeEach(async () => { setupStoreWithData(store); @@ -770,7 +772,7 @@ describe('Dashboard', () => { // While the recommendation in the documentation is to test // with a data-testid attribute, I want to make sure that // the dashboard panels have a ref attribute set. - const getDashboardPanel = () => wrapper.find({ ref: panelRef }); + const getDashboardPanel = () => wrapper.findComponent({ ref: panelRef }); beforeEach(async () => { setupStoreWithData(store); diff --git a/spec/frontend/monitoring/components/dashboard_url_time_spec.js b/spec/frontend/monitoring/components/dashboard_url_time_spec.js index 64c48100b31..a327e234581 100644 --- a/spec/frontend/monitoring/components/dashboard_url_time_spec.js +++ b/spec/frontend/monitoring/components/dashboard_url_time_spec.js @@ -35,7 +35,8 @@ describe('dashboard invalid url parameters', () => { }); }; - const findDateTimePicker = () => wrapper.find(DashboardHeader).find({ ref: 'dateTimePicker' }); + const findDateTimePicker = () => + wrapper.findComponent(DashboardHeader).findComponent({ ref: 'dateTimePicker' }); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index f6d30384847..721992e710a 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -33,11 +33,11 @@ describe('DashboardsDropdown', () => { }); } - 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' }); + const findItems = () => wrapper.findAllComponents(GlDropdownItem); + const findItemAt = (i) => wrapper.findAllComponents(GlDropdownItem).at(i); + const findSearchInput = () => wrapper.findComponent({ ref: 'monitorDashboardsDropdownSearch' }); + const findNoItemsMsg = () => wrapper.findComponent({ ref: 'monitorDashboardsDropdownMsg' }); + const findStarredListDivider = () => wrapper.findComponent({ ref: 'starredListDivider' }); // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax const setSearchTerm = (searchTerm) => wrapper.setData({ searchTerm }); @@ -127,7 +127,7 @@ describe('DashboardsDropdown', () => { }); it('displays a star icon', () => { - const star = findItemAt(0).find(GlIcon); + const star = findItemAt(0).findComponent(GlIcon); expect(star.exists()).toBe(true); expect(star.attributes('name')).toBe('star'); }); @@ -148,7 +148,7 @@ describe('DashboardsDropdown', () => { }); it('displays no star icon', () => { - const star = findItemAt(0).find(GlIcon); + const star = findItemAt(0).findComponent(GlIcon); expect(star.exists()).toBe(false); }); diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 0dd3afd7c83..755204dc721 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -18,7 +18,7 @@ const createMountedWrapper = (props = {}) => { describe('DuplicateDashboardForm', () => { const defaultBranch = 'main'; - const findByRef = (ref) => wrapper.find({ ref }); + const findByRef = (ref) => wrapper.findComponent({ ref }); const setValue = (ref, val) => { findByRef(ref).setValue(val); }; diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js index 7e7a7a66d77..3032c236741 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_modal_spec.js @@ -44,9 +44,9 @@ describe('duplicate dashboard modal', () => { }); } - const findAlert = () => wrapper.find(GlAlert); - const findModal = () => wrapper.find(GlModal); - const findDuplicateDashboardForm = () => wrapper.find(DuplicateDashboardForm); + const findAlert = () => wrapper.findComponent(GlAlert); + const findModal = () => wrapper.findComponent(GlModal); + const findDuplicateDashboardForm = () => wrapper.findComponent(DuplicateDashboardForm); beforeEach(() => { mockDashboards = dashboardGitResponse; @@ -74,7 +74,7 @@ describe('duplicate dashboard modal', () => { 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.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); expect(findAlert().exists()).toBe(false); }); @@ -92,7 +92,7 @@ describe('duplicate dashboard modal', () => { expect(findAlert().exists()).toBe(true); expect(findAlert().text()).toBe(errMsg); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); }); @@ -102,7 +102,7 @@ describe('duplicate dashboard modal', () => { commitMessage: 'A commit message', }; - findModal().find(DuplicateDashboardForm).vm.$emit('change', formVals); + findModal().findComponent(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 47366b345a8..6695353bdb5 100644 --- a/spec/frontend/monitoring/components/embeds/embed_group_spec.js +++ b/spec/frontend/monitoring/components/embeds/embed_group_spec.js @@ -58,14 +58,14 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([]); mountComponent(); - expect(wrapper.find(GlCard).isVisible()).toBe(false); + expect(wrapper.findComponent(GlCard).isVisible()).toBe(false); }); it('shows the component when chart data is loaded', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent(); - expect(wrapper.find(GlCard).isVisible()).toBe(true); + expect(wrapper.findComponent(GlCard).isVisible()).toBe(true); }); it('is expanded by default', () => { @@ -79,7 +79,7 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - wrapper.find(GlButton).trigger('click'); + wrapper.findComponent(GlButton).trigger('click'); await nextTick(); expect(wrapper.find('.gl-card-body').classes()).toContain('d-none'); @@ -93,11 +93,11 @@ describe('Embed Group', () => { }); it('renders an Embed component', () => { - expect(wrapper.find(MetricEmbed).exists()).toBe(true); + expect(wrapper.findComponent(MetricEmbed).exists()).toBe(true); }); it('passes the correct props to the Embed component', () => { - expect(wrapper.find(MetricEmbed).props()).toEqual(singleEmbedProps()); + expect(wrapper.findComponent(MetricEmbed).props()).toEqual(singleEmbedProps()); }); it('adds the monitoring dashboard module', () => { @@ -112,7 +112,7 @@ describe('Embed Group', () => { }); it('passes the correct props to the dashboard Embed component', () => { - expect(wrapper.find(MetricEmbed).props()).toEqual(dashboardEmbedProps()); + expect(wrapper.findComponent(MetricEmbed).props()).toEqual(dashboardEmbedProps()); }); it('adds the monitoring dashboard module', () => { @@ -127,11 +127,11 @@ describe('Embed Group', () => { }); it('creates Embed components', () => { - expect(wrapper.findAll(MetricEmbed)).toHaveLength(2); + expect(wrapper.findAllComponents(MetricEmbed)).toHaveLength(2); }); it('passes the correct props to the Embed components', () => { - expect(wrapper.findAll(MetricEmbed).wrappers.map((item) => item.props())).toEqual( + expect(wrapper.findAllComponents(MetricEmbed).wrappers.map((item) => item.props())).toEqual( multipleEmbedProps(), ); }); @@ -147,14 +147,14 @@ describe('Embed Group', () => { metricsWithDataGetter.mockReturnValue([1]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlButton).text()).toBe('Hide chart'); + expect(wrapper.findComponent(GlButton).text()).toBe('Hide chart'); }); it('has a plural label when there are multiple embeds', () => { metricsWithDataGetter.mockReturnValue([2]); mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); - expect(wrapper.find(GlButton).text()).toBe('Hide charts'); + expect(wrapper.findComponent(GlButton).text()).toBe('Hide charts'); }); }); }); diff --git a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js index f9f1be4f277..beff3da2baf 100644 --- a/spec/frontend/monitoring/components/embeds/metric_embed_spec.js +++ b/spec/frontend/monitoring/components/embeds/metric_embed_spec.js @@ -64,7 +64,7 @@ describe('MetricEmbed', () => { it('shows an empty state when no metrics are present', () => { expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(DashboardPanel).exists()).toBe(false); + expect(wrapper.findComponent(DashboardPanel).exists()).toBe(false); }); }); @@ -92,12 +92,12 @@ describe('MetricEmbed', () => { it('shows a chart when metrics are present', () => { expect(wrapper.find('.metrics-embed').exists()).toBe(true); - expect(wrapper.find(DashboardPanel).exists()).toBe(true); - expect(wrapper.findAll(DashboardPanel).length).toBe(2); + expect(wrapper.findComponent(DashboardPanel).exists()).toBe(true); + expect(wrapper.findAllComponents(DashboardPanel).length).toBe(2); }); it('includes groupId with dashboardUrl', () => { - expect(wrapper.find(DashboardPanel).props('groupId')).toBe(TEST_HOST); + expect(wrapper.findComponent(DashboardPanel).props('groupId')).toBe(TEST_HOST); }); }); }); diff --git a/spec/frontend/monitoring/components/empty_state_spec.js b/spec/frontend/monitoring/components/empty_state_spec.js index 1ecb101574b..ddefa8c5cd0 100644 --- a/spec/frontend/monitoring/components/empty_state_spec.js +++ b/spec/frontend/monitoring/components/empty_state_spec.js @@ -25,8 +25,8 @@ describe('EmptyState', () => { selectedState: dashboardEmptyStates.LOADING, }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); - expect(wrapper.find(GlEmptyState).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false); }); it('shows gettingStarted state', () => { diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index 31f52f6627b..104263e73e0 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -6,10 +6,10 @@ import GraphGroup from '~/monitoring/components/graph_group.vue'; describe('Graph group component', () => { let wrapper; - const findGroup = () => wrapper.find({ ref: 'graph-group' }); - const findContent = () => wrapper.find({ ref: 'graph-group-content' }); - const findLoadingIcon = () => wrapper.find(GlLoadingIcon); - const findCaretIcon = () => wrapper.find(GlIcon); + const findGroup = () => wrapper.findComponent({ ref: 'graph-group' }); + const findContent = () => wrapper.findComponent({ ref: 'graph-group-content' }); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + const findCaretIcon = () => wrapper.findComponent(GlIcon); const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]'); const createComponent = (propsData) => { diff --git a/spec/frontend/monitoring/components/group_empty_state_spec.js b/spec/frontend/monitoring/components/group_empty_state_spec.js index 1dd2ed4e141..e3cd26b0e48 100644 --- a/spec/frontend/monitoring/components/group_empty_state_spec.js +++ b/spec/frontend/monitoring/components/group_empty_state_spec.js @@ -45,7 +45,7 @@ describe('GroupEmptyState', () => { }); it('passes the expected props to GlEmptyState', () => { - expect(wrapper.find(GlEmptyState).props()).toMatchSnapshot(); + expect(wrapper.findComponent(GlEmptyState).props()).toMatchSnapshot(); }); }); }); diff --git a/spec/frontend/monitoring/components/links_section_spec.js b/spec/frontend/monitoring/components/links_section_spec.js index c9b5aeeecb8..94938e7f459 100644 --- a/spec/frontend/monitoring/components/links_section_spec.js +++ b/spec/frontend/monitoring/components/links_section_spec.js @@ -21,7 +21,7 @@ describe('Links Section component', () => { links, }; }; - const findLinks = () => wrapper.findAll(GlLink); + const findLinks = () => wrapper.findAllComponents(GlLink); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/components/refresh_button_spec.js b/spec/frontend/monitoring/components/refresh_button_spec.js index 0e45cc021c5..e00736954a9 100644 --- a/spec/frontend/monitoring/components/refresh_button_spec.js +++ b/spec/frontend/monitoring/components/refresh_button_spec.js @@ -15,9 +15,9 @@ describe('RefreshButton', () => { wrapper = shallowMount(RefreshButton, { store, ...options }); }; - const findRefreshBtn = () => wrapper.find(GlButton); - const findDropdown = () => wrapper.find(GlDropdown); - const findOptions = () => findDropdown().findAll(GlDropdownItem); + const findRefreshBtn = () => wrapper.findComponent(GlButton); + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findOptions = () => findDropdown().findAllComponents(GlDropdownItem); const findOptionAt = (index) => findOptions().at(index); const expectFetchDataToHaveBeenCalledTimes = (times) => { diff --git a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js index 643bbb39f04..012e2e9c3e2 100644 --- a/spec/frontend/monitoring/components/variables/dropdown_field_spec.js +++ b/spec/frontend/monitoring/components/variables/dropdown_field_spec.js @@ -27,8 +27,8 @@ describe('Custom variable component', () => { }); }; - const findDropdown = () => wrapper.find(GlDropdown); - const findDropdownItems = () => wrapper.findAll(GlDropdownItem); + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); it('renders dropdown element when all necessary props are passed', () => { createShallowWrapper(); diff --git a/spec/frontend/monitoring/components/variables_section_spec.js b/spec/frontend/monitoring/components/variables_section_spec.js index 64b93bd3027..d6f8aac99aa 100644 --- a/spec/frontend/monitoring/components/variables_section_spec.js +++ b/spec/frontend/monitoring/components/variables_section_spec.js @@ -24,8 +24,8 @@ describe('Metrics dashboard/variables section component', () => { }); }; - const findTextInputs = () => wrapper.findAll(TextField); - const findCustomInputs = () => wrapper.findAll(DropdownField); + const findTextInputs = () => wrapper.findAllComponents(TextField); + const findCustomInputs = () => wrapper.findAllComponents(DropdownField); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/pages/panel_new_page_spec.js b/spec/frontend/monitoring/pages/panel_new_page_spec.js index c89cbc52bcb..fa112fca2db 100644 --- a/spec/frontend/monitoring/pages/panel_new_page_spec.js +++ b/spec/frontend/monitoring/pages/panel_new_page_spec.js @@ -41,8 +41,8 @@ describe('monitoring/pages/panel_new_page', () => { }); }; - const findBackButton = () => wrapper.find(GlButtonStub); - const findPanelBuilder = () => wrapper.find(DashboardPanelBuilder); + const findBackButton = () => wrapper.findComponent(GlButtonStub); + const findPanelBuilder = () => wrapper.findComponent(DashboardPanelBuilder); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/monitoring/router_spec.js b/spec/frontend/monitoring/router_spec.js index 7758dd351b7..368bd955fb3 100644 --- a/spec/frontend/monitoring/router_spec.js +++ b/spec/frontend/monitoring/router_spec.js @@ -61,8 +61,8 @@ describe('Monitoring router', () => { currentDashboard, }); - expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).findComponent(Dashboard).exists()).toBe(true); }); }); @@ -84,8 +84,8 @@ describe('Monitoring router', () => { currentDashboard, }); - expect(wrapper.find(DashboardPage).exists()).toBe(true); - expect(wrapper.find(DashboardPage).find(Dashboard).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).exists()).toBe(true); + expect(wrapper.findComponent(DashboardPage).findComponent(Dashboard).exists()).toBe(true); }); }); @@ -100,7 +100,7 @@ describe('Monitoring router', () => { const wrapper = createWrapper(BASE_PATH, path); expect(wrapper.vm.$route.params.dashboard).toBe(currentDashboard); - expect(wrapper.find(PanelNewPage).exists()).toBe(true); + expect(wrapper.findComponent(PanelNewPage).exists()).toBe(true); }); }); }); diff --git a/spec/frontend/monitoring/store/utils_spec.js b/spec/frontend/monitoring/store/utils_spec.js index c25de8caa95..54f9c59308e 100644 --- a/spec/frontend/monitoring/store/utils_spec.js +++ b/spec/frontend/monitoring/store/utils_spec.js @@ -511,10 +511,10 @@ describe('mapToDashboardViewModel', () => { describe('uniqMetricsId', () => { [ { input: { id: 1 }, expected: `${NOT_IN_DB_PREFIX}_1` }, - { input: { metric_id: 2 }, expected: '2_undefined' }, - { input: { metric_id: 2, id: 21 }, expected: '2_21' }, - { input: { metric_id: 22, id: 1 }, expected: '22_1' }, - { input: { metric_id: 'aaa', id: '_a' }, expected: 'aaa__a' }, + { input: { metricId: 2 }, expected: '2_undefined' }, + { input: { metricId: 2, id: 21 }, expected: '2_21' }, + { input: { metricId: 22, id: 1 }, expected: '22_1' }, + { input: { metricId: 'aaa', id: '_a' }, expected: 'aaa__a' }, ].forEach(({ input, expected }) => { it(`creates unique metric ID with ${JSON.stringify(input)}`, () => { expect(uniqMetricsId(input)).toEqual(expected); |