diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 18:08:58 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-11 18:08:58 +0000 |
commit | 1ca9950d5f890cd8f185e1eda158b969a7244fe2 (patch) | |
tree | 6f62715938a4b2b001705c51c697609a8e0850ae /spec/frontend/monitoring | |
parent | bcc77054ee9aefd1e332e04a4189390fd5a3112e (diff) | |
download | gitlab-ce-1ca9950d5f890cd8f185e1eda158b969a7244fe2.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/monitoring')
5 files changed, 129 insertions, 198 deletions
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js index 7a039d46d39..15c82242262 100644 --- a/spec/frontend/monitoring/components/dashboard_spec.js +++ b/spec/frontend/monitoring/components/dashboard_spec.js @@ -91,10 +91,10 @@ describe('Dashboard', () => { }); describe('no data found', () => { - beforeEach(done => { + beforeEach(() => { createShallowWrapper(); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('shows the environment selector dropdown', () => { @@ -118,20 +118,15 @@ describe('Dashboard', () => { }); }); - it('shows up a loading state', done => { + it('shows up a loading state', () => { createShallowWrapper({ hasMetrics: true }, { methods: {} }); - wrapper.vm - .$nextTick() - .then(() => { - expect(wrapper.vm.emptyState).toEqual('loading'); - - done(); - }) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.emptyState).toEqual('loading'); + }); }); - it('hides the group panels when showPanels is false', done => { + it('hides the group panels when showPanels is false', () => { createMountedWrapper( { hasMetrics: true, showPanels: false }, { stubs: ['graph-group', 'panel-type'] }, @@ -139,15 +134,10 @@ describe('Dashboard', () => { setupComponentStore(wrapper); - wrapper.vm - .$nextTick() - .then(() => { - expect(wrapper.vm.showEmptyState).toEqual(false); - expect(wrapper.findAll('.prometheus-panel')).toHaveLength(0); - - done(); - }) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.vm.showEmptyState).toEqual(false); + expect(wrapper.findAll('.prometheus-panel')).toHaveLength(0); + }); }); it('fetches the metrics data with proper time window', () => { @@ -171,43 +161,32 @@ describe('Dashboard', () => { createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] }); setupComponentStore(wrapper); + + return wrapper.vm.$nextTick(); }); - it('renders the environments dropdown with a number of environments', done => { - wrapper.vm - .$nextTick() - .then(() => { - expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length); - - findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => { - const anchorEl = itemWrapper.find('a'); - if (anchorEl.exists() && environmentData[index].metrics_path) { - const href = anchorEl.attributes('href'); - expect(href).toBe(environmentData[index].metrics_path); - } - }); + it('renders the environments dropdown with a number of environments', () => { + expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length); - done(); - }) - .catch(done.fail); + findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => { + const anchorEl = itemWrapper.find('a'); + if (anchorEl.exists() && environmentData[index].metrics_path) { + const href = anchorEl.attributes('href'); + expect(href).toBe(environmentData[index].metrics_path); + } + }); }); - it('renders the environments dropdown with a single active element', done => { - wrapper.vm - .$nextTick() - .then(() => { - const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper => - itemWrapper.find('.active').exists(), - ); + it('renders the environments dropdown with a single active element', () => { + const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper => + itemWrapper.find('.active').exists(), + ); - expect(activeItem.length).toBe(1); - done(); - }) - .catch(done.fail); + expect(activeItem.length).toBe(1); }); }); - it('hides the environments dropdown list when there is no environments', done => { + it('hides the environments dropdown list when there is no environments', () => { createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] }); wrapper.vm.$store.commit( @@ -219,35 +198,27 @@ describe('Dashboard', () => { mockedQueryResultPayload, ); - wrapper.vm - .$nextTick() - .then(() => { - expect(findAllEnvironmentsDropdownItems()).toHaveLength(0); - done(); - }) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + expect(findAllEnvironmentsDropdownItems()).toHaveLength(0); + }); }); - it('renders the datetimepicker dropdown', done => { + it('renders the datetimepicker dropdown', () => { createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] }); setupComponentStore(wrapper); - wrapper.vm - .$nextTick() - .then(() => { - expect(wrapper.find(DateTimePicker).exists()).toBe(true); - done(); - }) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find(DateTimePicker).exists()).toBe(true); + }); }); describe('when one of the metrics is missing', () => { - beforeEach(done => { + beforeEach(() => { createShallowWrapper({ hasMetrics: true }); setupComponentStore(wrapper); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('shows a group empty area', () => { @@ -300,7 +271,7 @@ describe('Dashboard', () => { const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1); setSearchTerm(searchTerm); - return wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick().then(() => { expect(findAllEnvironmentsDropdownItems().length).toEqual(resultEnvs.length); }); }); @@ -349,12 +320,12 @@ describe('Dashboard', () => { const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel'); const findRearrangeButton = () => wrapper.find('.js-rearrange-button'); - beforeEach(done => { + beforeEach(() => { createShallowWrapper({ hasMetrics: true }); setupComponentStore(wrapper); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('wraps vuedraggable', () => { @@ -368,9 +339,9 @@ describe('Dashboard', () => { }); describe('when rearrange is enabled', () => { - beforeEach(done => { + beforeEach(() => { wrapper.setProps({ rearrangePanelsAvailable: true }); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('displays rearrange button', () => { @@ -383,9 +354,9 @@ describe('Dashboard', () => { .at(0) .find('.js-draggable-remove'); - beforeEach(done => { + beforeEach(() => { findRearrangeButton().vm.$emit('click'); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('it enables draggables', () => { @@ -393,7 +364,7 @@ describe('Dashboard', () => { expect(findEnabledDraggables()).toEqual(findDraggables()); }); - it('metrics can be swapped', done => { + it('metrics can be swapped', () => { const firstDraggable = findDraggables().at(0); const mockMetrics = [...metricsDashboardPayload.panel_groups[1].panels]; @@ -404,33 +375,30 @@ describe('Dashboard', () => { [mockMetrics[0], mockMetrics[1]] = [mockMetrics[1], mockMetrics[0]]; firstDraggable.vm.$emit('input', mockMetrics); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { const { panels } = wrapper.vm.dashboard.panel_groups[1]; expect(panels[1].title).toEqual(firstTitle); expect(panels[0].title).toEqual(secondTitle); - done(); }); }); - it('shows a remove button, which removes a panel', done => { + it('shows a remove button, which removes a panel', () => { expect(findFirstDraggableRemoveButton().isEmpty()).toBe(false); expect(findDraggablePanels().length).toEqual(expectedPanelCount); findFirstDraggableRemoveButton().trigger('click'); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findDraggablePanels().length).toEqual(expectedPanelCount - 1); - done(); }); }); - it('it disables draggables when clicked again', done => { + it('it disables draggables when clicked again', () => { findRearrangeButton().vm.$emit('click'); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findRearrangeButton().attributes('pressed')).toBeFalsy(); expect(findEnabledDraggables().length).toBe(0); - done(); }); }); }); @@ -438,13 +406,13 @@ describe('Dashboard', () => { }); describe('cluster health', () => { - beforeEach(done => { + beforeEach(() => { mock.onGet(propsData.metricsEndpoint).reply(statusCodes.OK, JSON.stringify({})); createShallowWrapper({ hasMetrics: true, showHeader: false }); // all_dashboards is not defined in health dashboards wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('hides dashboard header by default', () => { @@ -460,33 +428,29 @@ describe('Dashboard', () => { describe('dashboard edit link', () => { const findEditLink = () => wrapper.find('.js-edit-link'); - beforeEach(done => { + beforeEach(() => { createShallowWrapper({ hasMetrics: true }); wrapper.vm.$store.commit( `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse, ); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('is not present for the default dashboard', () => { expect(findEditLink().exists()).toBe(false); }); - it('is present for a custom dashboard, and links to its edit_path', done => { + it('is present for a custom dashboard, and links to its edit_path', () => { const dashboard = dashboardGitResponse[1]; // non-default dashboard const currentDashboard = dashboard.path; wrapper.setProps({ currentDashboard }); - wrapper.vm - .$nextTick() - .then(() => { - expect(findEditLink().exists()).toBe(true); - expect(findEditLink().attributes('href')).toBe(dashboard.project_blob_path); - done(); - }) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + expect(findEditLink().exists()).toBe(true); + expect(findEditLink().attributes('href')).toBe(dashboard.project_blob_path); + }); }); }); @@ -498,18 +462,14 @@ describe('Dashboard', () => { `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse, ); + + return wrapper.vm.$nextTick(); }); - it('shows the dashboard dropdown', done => { - wrapper.vm - .$nextTick() - .then(() => { - const dashboardDropdown = wrapper.find(DashboardsDropdown); + it('shows the dashboard dropdown', () => { + const dashboardDropdown = wrapper.find(DashboardsDropdown); - expect(dashboardDropdown.exists()).toBe(true); - done(); - }) - .catch(done.fail); + expect(dashboardDropdown.exists()).toBe(true); }); }); @@ -524,20 +484,16 @@ describe('Dashboard', () => { }, { stubs: ['graph-group', 'panel-type'] }, ); + + return wrapper.vm.$nextTick(); }); - it('shows the link', done => { - wrapper.vm - .$nextTick() - .then(() => { - const externalDashboardButton = wrapper.find('.js-external-dashboard-link'); + it('shows the link', () => { + const externalDashboardButton = wrapper.find('.js-external-dashboard-link'); - expect(externalDashboardButton.exists()).toBe(true); - expect(externalDashboardButton.is(GlButton)).toBe(true); - expect(externalDashboardButton.text()).toContain('View full dashboard'); - done(); - }) - .catch(done.fail); + expect(externalDashboardButton.exists()).toBe(true); + expect(externalDashboardButton.is(GlButton)).toBe(true); + expect(externalDashboardButton.text()).toContain('View full dashboard'); }); }); @@ -550,12 +506,12 @@ describe('Dashboard', () => { .at(i) .props('clipboardText'); - beforeEach(done => { + beforeEach(() => { createShallowWrapper({ hasMetrics: true, currentDashboard }); setupComponentStore(wrapper); - wrapper.vm.$nextTick(done); + return wrapper.vm.$nextTick(); }); it('contains a link to the dashboard', () => { @@ -565,23 +521,21 @@ describe('Dashboard', () => { expect(getClipboardTextAt(0)).toContain(`y_label=`); }); - it('strips the undefined parameter', done => { + it('strips the undefined parameter', () => { wrapper.setProps({ currentDashboard: undefined }); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(getClipboardTextAt(0)).not.toContain(`dashboard=`); expect(getClipboardTextAt(0)).toContain(`y_label=`); - done(); }); }); - it('null parameter is stripped', done => { + it('null parameter is stripped', () => { wrapper.setProps({ currentDashboard: null }); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(getClipboardTextAt(0)).not.toContain(`dashboard=`); expect(getClipboardTextAt(0)).toContain(`y_label=`); - done(); }); }); }); diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index 51c7b22f242..0bcfabe6415 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -131,20 +131,17 @@ describe('DashboardsDropdown', () => { expect(findModal().contains(DuplicateDashboardForm)).toBe(true); }); - it('saves a new dashboard', done => { + it('saves a new dashboard', () => { findModal().vm.$emit('ok', okEvent); - waitForPromises() - .then(() => { - expect(okEvent.preventDefault).toHaveBeenCalled(); - - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); - expect(wrapper.emitted().selectDashboard).toBeTruthy(); - expect(findAlert().exists()).toBe(false); - done(); - }) - .catch(done.fail); + return waitForPromises().then(() => { + expect(okEvent.preventDefault).toHaveBeenCalled(); + + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled(); + expect(wrapper.emitted().selectDashboard).toBeTruthy(); + expect(findAlert().exists()).toBe(false); + }); }); describe('when a new dashboard is saved succesfully', () => { @@ -167,52 +164,42 @@ describe('DashboardsDropdown', () => { findModal().vm.$emit('ok', okEvent); }; - it('to the default branch, redirects to the new dashboard', done => { + it('to the default branch, redirects to the new dashboard', () => { submitForm({ branch: defaultBranch, }); - waitForPromises() - .then(() => { - expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard); - done(); - }) - .catch(done.fail); + return waitForPromises().then(() => { + expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard); + }); }); - it('to a new branch refreshes in the current dashboard', done => { + it('to a new branch refreshes in the current dashboard', () => { submitForm({ branch: 'another-branch', }); - waitForPromises() - .then(() => { - expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]); - done(); - }) - .catch(done.fail); + return waitForPromises().then(() => { + expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]); + }); }); }); - it('handles error when a new dashboard is not saved', done => { + it('handles error when a new dashboard is not saved', () => { const errMsg = 'An error occurred'; duplicateDashboardAction.mockRejectedValueOnce(errMsg); findModal().vm.$emit('ok', okEvent); - waitForPromises() - .then(() => { - expect(okEvent.preventDefault).toHaveBeenCalled(); - - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(errMsg); + return waitForPromises().then(() => { + 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); - done(); - }) - .catch(done.fail); + expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); + }); }); it('id is correct, as the value of modal directive binding matches modal id', () => { diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js index 75a488b5c7b..10fd58f749d 100644 --- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js +++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js @@ -44,30 +44,27 @@ describe('DuplicateDashboardForm', () => { describe('validates the file name', () => { const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback'); - it('when is empty', done => { + it('when is empty', () => { setValue('fileName', ''); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true); expect(findInvalidFeedback().exists()).toBe(false); - done(); }); }); - it('when is valid', done => { + it('when is valid', () => { setValue('fileName', 'my_dashboard.yml'); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true); expect(findInvalidFeedback().exists()).toBe(false); - done(); }); }); - it('when is not valid', done => { + it('when is not valid', () => { setValue('fileName', 'my_dashboard.exe'); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true); expect(findInvalidFeedback().text()).toBeTruthy(); - done(); }); }); }); @@ -124,30 +121,26 @@ describe('DuplicateDashboardForm', () => { }); }); - it('when a `default` branch option is set, branch input is invisible and ignored', done => { + it('when a `default` branch option is set, branch input is invisible and ignored', () => { setChecked(wrapper.vm.$options.radioVals.DEFAULT); setValue('branchName', 'a-new-branch'); expect(lastChange()).resolves.toMatchObject({ branch: defaultBranch, }); - wrapper.vm.$nextTick(() => { + + return wrapper.vm.$nextTick(() => { expect(findByRef('branchName').isVisible()).toBe(false); - done(); }); }); - it('when `new` branch option is chosen, focuses on the branch name input', done => { + it('when `new` branch option is chosen, focuses on the branch name input', () => { setChecked(wrapper.vm.$options.radioVals.NEW); - wrapper.vm - .$nextTick() - .then(() => { - wrapper.find('form').trigger('change'); - expect(findByRef('branchName').is(':focus')).toBe(true); - }) - .then(done) - .catch(done.fail); + return wrapper.vm.$nextTick().then(() => { + wrapper.find('form').trigger('change'); + expect(findByRef('branchName').is(':focus')).toBe(true); + }); }); }); }); diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js index 983785d0ecc..28a6af64394 100644 --- a/spec/frontend/monitoring/components/graph_group_spec.js +++ b/spec/frontend/monitoring/components/graph_group_spec.js @@ -32,25 +32,23 @@ describe('Graph group component', () => { expect(findCaretIcon().props('name')).toBe('angle-down'); }); - it('should show the angle-right caret icon when the user collapses the group', done => { + it('should show the angle-right caret icon when the user collapses the group', () => { wrapper.vm.collapse(); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findContent().isVisible()).toBe(false); expect(findCaretIcon().props('name')).toBe('angle-right'); - done(); }); }); - it('should show the open the group when collapseGroup is set to true', done => { + it('should show the open the group when collapseGroup is set to true', () => { wrapper.setProps({ collapseGroup: true, }); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findContent().isVisible()).toBe(true); expect(findCaretIcon().props('name')).toBe('angle-down'); - done(); }); }); @@ -102,13 +100,12 @@ describe('Graph group component', () => { expect(findCaretIcon().exists()).toBe(false); }); - it('should show the panel content when clicked', done => { + it('should show the panel content when clicked', () => { wrapper.vm.collapse(); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findContent().isVisible()).toBe(true); expect(findCaretIcon().exists()).toBe(false); - done(); }); }); }); diff --git a/spec/frontend/monitoring/components/panel_type_spec.js b/spec/frontend/monitoring/components/panel_type_spec.js index 6d8bd1d3a30..0d79babf386 100644 --- a/spec/frontend/monitoring/components/panel_type_spec.js +++ b/spec/frontend/monitoring/components/panel_type_spec.js @@ -28,6 +28,8 @@ describe('Panel Type component', () => { const exampleText = 'example_text'; + const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' }); + const createWrapper = props => { wrapper = shallowMount(PanelType, { propsData: { @@ -96,8 +98,7 @@ describe('Panel Type component', () => { }); it('sets no clipboard copy link on dropdown by default', () => { - const link = () => wrapper.find({ ref: 'copyChartLink' }); - expect(link().exists()).toBe(false); + expect(findCopyLink().exists()).toBe(false); }); describe('Time Series Chart panel type', () => { @@ -204,7 +205,6 @@ describe('Panel Type component', () => { }); describe('when cliboard data is available', () => { - const link = () => wrapper.find({ ref: 'copyChartLink' }); const clipboardText = 'A value to copy.'; beforeEach(() => { @@ -219,16 +219,16 @@ describe('Panel Type component', () => { }); it('sets clipboard text on the dropdown', () => { - expect(link().exists()).toBe(true); - expect(link().element.dataset.clipboardText).toBe(clipboardText); + expect(findCopyLink().exists()).toBe(true); + expect(findCopyLink().element.dataset.clipboardText).toBe(clipboardText); }); it('adds a copy button to the dropdown', () => { - expect(link().text()).toContain('Generate link to chart'); + expect(findCopyLink().text()).toContain('Generate link to chart'); }); it('opens a toast on click', () => { - link().vm.$emit('click'); + findCopyLink().vm.$emit('click'); expect(wrapper.vm.$toast.show).toHaveBeenCalled(); }); |