diff options
Diffstat (limited to 'spec/frontend/monitoring/components/dashboard_panel_spec.js')
| -rw-r--r-- | spec/frontend/monitoring/components/dashboard_panel_spec.js | 137 |
1 files changed, 62 insertions, 75 deletions
diff --git a/spec/frontend/monitoring/components/dashboard_panel_spec.js b/spec/frontend/monitoring/components/dashboard_panel_spec.js index 9a73dc820af..7bd062b81f1 100644 --- a/spec/frontend/monitoring/components/dashboard_panel_spec.js +++ b/spec/frontend/monitoring/components/dashboard_panel_spec.js @@ -2,6 +2,7 @@ import { GlDropdownItem } from '@gitlab/ui'; 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 invalidUrl from '~/lib/utils/invalid_url'; @@ -186,7 +187,7 @@ describe('Dashboard Panel', () => { expect(findCopyLink().exists()).toBe(false); }); - it('should emit `timerange` event when a zooming in/out in a chart occcurs', () => { + it('should emit `timerange` event when a zooming in/out in a chart occcurs', async () => { const timeRange = { start: '2020-01-01T00:00:00.000Z', end: '2020-01-01T01:00:00.000Z', @@ -196,9 +197,8 @@ describe('Dashboard Panel', () => { findTimeChart().vm.$emit('datazoom', timeRange); - return wrapper.vm.$nextTick(() => { - expect(wrapper.vm.$emit).toHaveBeenCalledWith('timerangezoom', timeRange); - }); + await nextTick(); + expect(wrapper.vm.$emit).toHaveBeenCalledWith('timerangezoom', timeRange); }); it('includes a default group id', () => { @@ -253,16 +253,15 @@ describe('Dashboard Panel', () => { describe('computed', () => { describe('fixedCurrentTimeRange', () => { - it('returns fixed time for valid time range', () => { + it('returns fixed time for valid time range', async () => { state.timeRange = mockTimeRange; - return wrapper.vm.$nextTick(() => { - expect(findTimeChart().props('timeRange')).toEqual( - expect.objectContaining({ - start: expect.any(String), - end: expect.any(String), - }), - ); - }); + await nextTick(); + expect(findTimeChart().props('timeRange')).toEqual( + expect.objectContaining({ + start: expect.any(String), + end: expect.any(String), + }), + ); }); it.each` @@ -271,11 +270,10 @@ describe('Dashboard Panel', () => { ${undefined} | ${{}} ${null} | ${{}} ${'2020-12-03'} | ${{}} - `('returns $output for invalid input like $input', ({ input, output }) => { + `('returns $output for invalid input like $input', async ({ input, output }) => { state.timeRange = input; - return wrapper.vm.$nextTick(() => { - expect(findTimeChart().props('timeRange')).toEqual(output); - }); + await nextTick(); + expect(findTimeChart().props('timeRange')).toEqual(output); }); }); }); @@ -285,17 +283,16 @@ describe('Dashboard Panel', () => { const findEditCustomMetricLink = () => wrapper.find({ ref: 'editMetricLink' }); const mockEditPath = '/root/kubernetes-gke-project/prometheus/metrics/23/edit'; - beforeEach(() => { + beforeEach(async () => { createWrapper(); - - return wrapper.vm.$nextTick(); + await nextTick(); }); it('is not present if the panel is not a custom metric', () => { expect(findEditCustomMetricLink().exists()).toBe(false); }); - it('is present when the panel contains an edit_path property', () => { + it('is present when the panel contains an edit_path property', async () => { wrapper.setProps({ graphData: { ...graphData, @@ -308,14 +305,13 @@ describe('Dashboard Panel', () => { }, }); - return wrapper.vm.$nextTick(() => { - expect(findEditCustomMetricLink().exists()).toBe(true); - expect(findEditCustomMetricLink().text()).toBe('Edit metric'); - expect(findEditCustomMetricLink().attributes('href')).toBe(mockEditPath); - }); + await nextTick(); + expect(findEditCustomMetricLink().exists()).toBe(true); + expect(findEditCustomMetricLink().text()).toBe('Edit metric'); + expect(findEditCustomMetricLink().attributes('href')).toBe(mockEditPath); }); - it('shows an "Edit metrics" link pointing to settingsPath for a panel with multiple metrics', () => { + it('shows an "Edit metrics" link pointing to settingsPath for a panel with multiple metrics', async () => { wrapper.setProps({ graphData: { ...graphData, @@ -332,63 +328,58 @@ describe('Dashboard Panel', () => { }, }); - return wrapper.vm.$nextTick(() => { - expect(findEditCustomMetricLink().text()).toBe('Edit metrics'); - expect(findEditCustomMetricLink().attributes('href')).toBe(dashboardProps.settingsPath); - }); + await nextTick(); + expect(findEditCustomMetricLink().text()).toBe('Edit metrics'); + expect(findEditCustomMetricLink().attributes('href')).toBe(dashboardProps.settingsPath); }); }); describe('View Logs dropdown item', () => { const findViewLogsLink = () => wrapper.find({ ref: 'viewLogsLink' }); - beforeEach(() => { + beforeEach(async () => { createWrapper(); - return wrapper.vm.$nextTick(); + await nextTick(); }); - it('is not present by default', () => - wrapper.vm.$nextTick(() => { - expect(findViewLogsLink().exists()).toBe(false); - })); + it('is not present by default', async () => { + await nextTick(); + expect(findViewLogsLink().exists()).toBe(false); + }); - it('is not present if a time range is not set', () => { + it('is not present if a time range is not set', async () => { state.logsPath = mockLogsPath; state.timeRange = null; - return wrapper.vm.$nextTick(() => { - expect(findViewLogsLink().exists()).toBe(false); - }); + await nextTick(); + expect(findViewLogsLink().exists()).toBe(false); }); - it('is not present if the logs path is default', () => { + it('is not present if the logs path is default', async () => { state.logsPath = invalidUrl; state.timeRange = mockTimeRange; - return wrapper.vm.$nextTick(() => { - expect(findViewLogsLink().exists()).toBe(false); - }); + await nextTick(); + expect(findViewLogsLink().exists()).toBe(false); }); - it('is not present if the logs path is not set', () => { + it('is not present if the logs path is not set', async () => { state.logsPath = null; state.timeRange = mockTimeRange; - return wrapper.vm.$nextTick(() => { - expect(findViewLogsLink().exists()).toBe(false); - }); + await nextTick(); + expect(findViewLogsLink().exists()).toBe(false); }); - it('is present when logs path and time a range is present', () => { + it('is present when logs path and time a range is present', async () => { state.logsPath = mockLogsPath; state.timeRange = mockTimeRange; - return wrapper.vm.$nextTick(() => { - expect(findViewLogsLink().attributes('href')).toMatch(mockLogsHref); - }); + await nextTick(); + expect(findViewLogsLink().attributes('href')).toMatch(mockLogsHref); }); - it('it is overridden when a datazoom event is received', () => { + it('it is overridden when a datazoom event is received', async () => { state.logsPath = mockLogsPath; state.timeRange = mockTimeRange; @@ -399,13 +390,12 @@ describe('Dashboard Panel', () => { findTimeChart().vm.$emit('datazoom', zoomedTimeRange); - return wrapper.vm.$nextTick(() => { - const start = encodeURIComponent(zoomedTimeRange.start); - const end = encodeURIComponent(zoomedTimeRange.end); - expect(findViewLogsLink().attributes('href')).toMatch( - `${mockLogsPath}?start=${start}&end=${end}`, - ); - }); + await nextTick(); + const start = encodeURIComponent(zoomedTimeRange.start); + const end = encodeURIComponent(zoomedTimeRange.end); + expect(findViewLogsLink().attributes('href')).toMatch( + `${mockLogsPath}?start=${start}&end=${end}`, + ); }); }); @@ -447,7 +437,7 @@ describe('Dashboard Panel', () => { }); describe('when downloading metrics data as CSV', () => { - beforeEach(() => { + beforeEach(async () => { wrapper = shallowMount(DashboardPanel, { propsData: { clipboardText: exampleText, @@ -459,7 +449,7 @@ describe('Dashboard Panel', () => { }, store, }); - return wrapper.vm.$nextTick(); + await nextTick(); }); afterEach(() => { @@ -509,29 +499,26 @@ describe('Dashboard Panel', () => { }); }); - it('handles namespaced time range and logs path state', () => { + it('handles namespaced time range and logs path state', async () => { store.state[mockNamespace].timeRange = mockTimeRange; store.state[mockNamespace].logsPath = mockLogsPath; - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find({ ref: 'viewLogsLink' }).attributes().href).toBe(mockLogsHref); - }); + await nextTick(); + expect(wrapper.find({ ref: 'viewLogsLink' }).attributes().href).toBe(mockLogsHref); }); - it('handles namespaced deployment data state', () => { + it('handles namespaced deployment data state', async () => { store.state[mockNamespace].deploymentData = mockDeploymentData; - return wrapper.vm.$nextTick().then(() => { - expect(findTimeChart().props().deploymentData).toEqual(mockDeploymentData); - }); + await nextTick(); + expect(findTimeChart().props().deploymentData).toEqual(mockDeploymentData); }); - it('handles namespaced project path state', () => { + it('handles namespaced project path state', async () => { store.state[mockNamespace].projectPath = mockProjectPath; - return wrapper.vm.$nextTick().then(() => { - expect(findTimeChart().props().projectPath).toBe(mockProjectPath); - }); + await nextTick(); + expect(findTimeChart().props().projectPath).toBe(mockProjectPath); }); it('it renders a time series chart with no errors', () => { |