diff options
Diffstat (limited to 'spec/frontend/monitoring/components/dashboards_dropdown_spec.js')
-rw-r--r-- | spec/frontend/monitoring/components/dashboards_dropdown_spec.js | 184 |
1 files changed, 48 insertions, 136 deletions
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js index b29d86cbc5b..d09fcc92ee7 100644 --- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js +++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js @@ -1,14 +1,12 @@ import { shallowMount } from '@vue/test-utils'; -import { GlDropdownItem, GlModal, GlLoadingIcon, GlAlert, GlIcon } from '@gitlab/ui'; -import waitForPromises from 'helpers/wait_for_promises'; +import { GlDropdownItem, GlIcon } from '@gitlab/ui'; import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue'; -import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue'; -import { dashboardGitResponse } from '../mock_data'; +import { dashboardGitResponse, selfMonitoringDashboardGitResponse } from '../mock_data'; const defaultBranch = 'master'; - +const modalId = 'duplicateDashboardModalId'; const starredDashboards = dashboardGitResponse.filter(({ starred }) => starred); const notStarredDashboards = dashboardGitResponse.filter(({ starred }) => !starred); @@ -32,6 +30,7 @@ describe('DashboardsDropdown', () => { propsData: { ...props, defaultBranch, + modalId, }, sync: false, ...storeOpts, @@ -82,7 +81,7 @@ describe('DashboardsDropdown', () => { const searchTerm = 'Default'; setSearchTerm(searchTerm); - return wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick().then(() => { expect(findItems()).toHaveLength(1); }); }); @@ -91,7 +90,7 @@ describe('DashboardsDropdown', () => { const searchTerm = 'does-not-exist'; setSearchTerm(searchTerm); - return wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick().then(() => { expect(findNoItemsMsg().isVisible()).toBe(true); }); }); @@ -151,12 +150,18 @@ describe('DashboardsDropdown', () => { }); }); - describe('when a system dashboard is selected', () => { + const duplicableCases = [ + dashboardGitResponse[0], + dashboardGitResponse[2], + selfMonitoringDashboardGitResponse[0], + ]; + + describe.each(duplicableCases)('when the selected dashboard can be duplicated', dashboard => { let duplicateDashboardAction; let modalDirective; beforeEach(() => { - [mockSelectedDashboard] = dashboardGitResponse; + mockSelectedDashboard = dashboard; modalDirective = jest.fn(); duplicateDashboardAction = jest.fn().mockResolvedValue(); @@ -172,152 +177,59 @@ describe('DashboardsDropdown', () => { }, }, ); - - wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn(); }); - it('displays an item for each dashboard plus a "duplicate dashboard" item', () => { - const item = wrapper.findAll({ ref: 'duplicateDashboardItem' }); - + it('displays a dropdown item for each dashboard', () => { expect(findItems().length).toEqual(dashboardGitResponse.length + 1); - expect(item.length).toBe(1); }); - describe('modal form', () => { - let okEvent; - - const findModal = () => wrapper.find(GlModal); - const findAlert = () => wrapper.find(GlAlert); - - beforeEach(() => { - okEvent = { - preventDefault: jest.fn(), - }; - }); - - it('exists and contains a form to duplicate a dashboard', () => { - expect(findModal().exists()).toBe(true); - expect(findModal().contains(DuplicateDashboardForm)).toBe(true); - }); - - it('saves a new dashboard', () => { - findModal().vm.$emit('ok', okEvent); - - 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', () => { - const newDashboard = { - can_edit: true, - default: false, - display_name: 'A new dashboard', - system_dashboard: false, - }; - - const submitForm = formVals => { - duplicateDashboardAction.mockResolvedValueOnce(newDashboard); - findModal() - .find(DuplicateDashboardForm) - .vm.$emit('change', { - dashboard: 'common_metrics.yml', - commitMessage: 'A commit message', - ...formVals, - }); - findModal().vm.$emit('ok', okEvent); - }; - - it('to the default branch, redirects to the new dashboard', () => { - submitForm({ - branch: defaultBranch, - }); - - return waitForPromises().then(() => { - expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard); - }); - }); - - it('to a new branch refreshes in the current dashboard', () => { - submitForm({ - branch: 'another-branch', - }); - - return waitForPromises().then(() => { - expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]); - }); - }); - }); - - it('handles error when a new dashboard is not saved', () => { - const errMsg = 'An error occurred'; - - duplicateDashboardAction.mockRejectedValueOnce(errMsg); - findModal().vm.$emit('ok', okEvent); + it('displays one "duplicate dashboard" dropdown item with a directive attached', () => { + const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]'); - return waitForPromises().then(() => { - expect(okEvent.preventDefault).toHaveBeenCalled(); + expect(item.length).toBe(1); + }); - expect(findAlert().exists()).toBe(true); - expect(findAlert().text()).toBe(errMsg); + it('"duplicate dashboard" dropdown item directive works', () => { + const item = wrapper.find('[data-testid="duplicateDashboardItem"]'); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled(); - }); - }); + item.trigger('click'); - it('id is correct, as the value of modal directive binding matches modal id', () => { - expect(modalDirective).toHaveBeenCalledTimes(1); - - // Binding's second argument contains the modal id - expect(modalDirective.mock.calls[0][1]).toEqual( - expect.objectContaining({ - value: findModal().props('modalId'), - }), - ); + return wrapper.vm.$nextTick().then(() => { + expect(modalDirective).toHaveBeenCalled(); }); + }); - it('updates the form on changes', () => { - const formVals = { - dashboard: 'common_metrics.yml', - commitMessage: 'A commit message', - }; - - findModal() - .find(DuplicateDashboardForm) - .vm.$emit('change', formVals); + it('id is correct, as the value of modal directive binding matches modal id', () => { + expect(modalDirective).toHaveBeenCalledTimes(1); - // Binding's second argument contains the modal id - expect(wrapper.vm.form).toEqual(formVals); - }); + // Binding's second argument contains the modal id + expect(modalDirective.mock.calls[0][1]).toEqual( + expect.objectContaining({ + value: modalId, + }), + ); }); }); - describe('when a custom dashboard is selected', () => { - const findModal = () => wrapper.find(GlModal); + const nonDuplicableCases = [dashboardGitResponse[1], selfMonitoringDashboardGitResponse[1]]; - beforeEach(() => { - wrapper = createComponent({ - selectedDashboard: dashboardGitResponse[1], + describe.each(nonDuplicableCases)( + 'when the selected dashboard can not be duplicated', + dashboard => { + beforeEach(() => { + mockSelectedDashboard = dashboard; + + wrapper = createComponent(); }); - }); - it('displays an item for each dashboard', () => { - const item = wrapper.findAll({ ref: 'duplicateDashboardItem' }); + it('displays a dropdown list item for each dashboard, but no list item for "duplicate dashboard"', () => { + const item = wrapper.findAll('[data-testid="duplicateDashboardItem"]'); - expect(findItems()).toHaveLength(dashboardGitResponse.length); - expect(item.length).toBe(0); - }); - - it('modal form does not exist and contains a form to duplicate a dashboard', () => { - expect(findModal().exists()).toBe(false); - }); - }); + expect(findItems()).toHaveLength(dashboardGitResponse.length); + expect(item.length).toBe(0); + }); + }, + ); describe('when a dashboard gets selected by the user', () => { beforeEach(() => { |