diff options
Diffstat (limited to 'spec/frontend/vue_shared/alert_details/alert_details_spec.js')
| -rw-r--r-- | spec/frontend/vue_shared/alert_details/alert_details_spec.js | 103 |
1 files changed, 72 insertions, 31 deletions
diff --git a/spec/frontend/vue_shared/alert_details/alert_details_spec.js b/spec/frontend/vue_shared/alert_details/alert_details_spec.js index 6c2b21053f0..d2dfb6ee1bf 100644 --- a/spec/frontend/vue_shared/alert_details/alert_details_spec.js +++ b/spec/frontend/vue_shared/alert_details/alert_details_spec.js @@ -1,16 +1,19 @@ +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; -import { nextTick } from 'vue'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { joinPaths } from '~/lib/utils/url_utility'; import Tracking from '~/tracking'; import AlertDetails from '~/vue_shared/alert_details/components/alert_details.vue'; import AlertSummaryRow from '~/vue_shared/alert_details/components/alert_summary_row.vue'; import { PAGE_CONFIG, SEVERITY_LEVELS } from '~/vue_shared/alert_details/constants'; import createIssueMutation from '~/vue_shared/alert_details/graphql/mutations/alert_issue_create.mutation.graphql'; +import alertQuery from '~/vue_shared/alert_details/graphql/queries/alert_sidebar_details.query.graphql'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; import MetricImagesTab from '~/vue_shared/components/metric_images/metric_images_tab.vue'; import createStore from '~/vue_shared/components/metric_images/store/'; @@ -27,20 +30,57 @@ describe('AlertDetails', () => { let environmentData = { name: environmentName, path: environmentPath }; let mock; let wrapper; + let requestHandlers; const projectPath = 'root/alerts'; const projectIssuesPath = 'root/alerts/-/issues'; const projectId = '1'; const $router = { push: jest.fn() }; + const defaultHandlers = { + createIssueMutationMock: jest.fn().mockResolvedValue({ + data: { + createAlertIssue: { + errors: [], + issue: { + id: 'id', + iid: 'iid', + webUrl: 'webUrl', + }, + }, + }, + }), + alertQueryMock: jest.fn().mockResolvedValue({ + data: { + project: { + id: '1', + alertManagementAlerts: { + nodes: [], + }, + }, + }, + }), + }; + + const createMockApolloProvider = (handlers) => { + Vue.use(VueApollo); + requestHandlers = handlers; + + return createMockApollo([ + [alertQuery, handlers.alertQueryMock], + [createIssueMutation, handlers.createIssueMutationMock], + ]); + }; + function mountComponent({ data, - loading = false, mountMethod = shallowMount, provide = {}, stubs = {}, + handlers = defaultHandlers, } = {}) { wrapper = extendedWrapper( mountMethod(AlertDetails, { + apolloProvider: createMockApolloProvider(handlers), provide: { alertId: 'alertId', projectPath, @@ -59,15 +99,6 @@ describe('AlertDetails', () => { }; }, mocks: { - $apollo: { - mutate: jest.fn(), - queries: { - alert: { - loading, - }, - sidebarStatus: {}, - }, - }, $router, $route: { params: {} }, }, @@ -139,7 +170,6 @@ describe('AlertDetails', () => { describe('Metrics tab', () => { it('should mount without errors', () => { mountComponent({ - mountMethod: mount, provide: { canUpdate: true, iid: '1', @@ -216,7 +246,6 @@ describe('AlertDetails', () => { it('should display "Create incident" button when incident doesn\'t exist yet', async () => { const issue = null; mountComponent({ - mountMethod: mount, data: { alert: { ...mockAlert, issue } }, }); @@ -226,23 +255,16 @@ describe('AlertDetails', () => { }); it('calls `$apollo.mutate` with `createIssueQuery`', () => { - const issueIid = '10'; mountComponent({ mountMethod: mount, data: { alert: { ...mockAlert } }, }); - jest - .spyOn(wrapper.vm.$apollo, 'mutate') - .mockResolvedValue({ data: { createAlertIssue: { issue: { iid: issueIid } } } }); findCreateIncidentBtn().trigger('click'); - expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ - mutation: createIssueMutation, - variables: { - iid: mockAlert.iid, - projectPath, - }, + expect(requestHandlers.createIssueMutationMock).toHaveBeenCalledWith({ + iid: mockAlert.iid, + projectPath, }); }); @@ -251,25 +273,44 @@ describe('AlertDetails', () => { mountComponent({ mountMethod: mount, data: { alert: { ...mockAlert, alertIid: 1 } }, + handlers: { + ...defaultHandlers, + createIssueMutationMock: jest.fn().mockRejectedValue(new Error(errorMsg)), + }, }); - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(errorMsg); findCreateIncidentBtn().trigger('click'); await waitForPromises(); - expect(findIncidentCreationAlert().text()).toBe(errorMsg); + expect(findIncidentCreationAlert().text()).toBe(`Error: ${errorMsg}`); }); }); describe('View full alert details', () => { - beforeEach(() => { - mountComponent({ data: { alert: mockAlert } }); + beforeEach(async () => { + mountComponent({ + data: { alert: mockAlert }, + handlers: { + ...defaultHandlers, + alertQueryMock: jest.fn().mockResolvedValue({ + data: { + project: { + id: '1', + alertManagementAlerts: { + nodes: [{ id: '1' }], + }, + }, + }, + }), + }, + }); + await waitForPromises(); }); it('should display a table of raw alert details data', () => { - const details = findDetailsTable(); - expect(details.exists()).toBe(true); - expect(details.props()).toStrictEqual({ + expect(findDetailsTable().exists()).toBe(true); + + expect(findDetailsTable().props()).toStrictEqual({ alert: mockAlert, statuses: PAGE_CONFIG.OPERATIONS.STATUSES, loading: false, @@ -279,7 +320,7 @@ describe('AlertDetails', () => { describe('loading state', () => { beforeEach(() => { - mountComponent({ loading: true }); + mountComponent(); }); it('displays a loading state when loading', () => { |