diff options
Diffstat (limited to 'spec/frontend/alert_management/components')
11 files changed, 591 insertions, 169 deletions
diff --git a/spec/frontend/alert_management/components/alert_management_detail_spec.js b/spec/frontend/alert_management/components/alert_management_detail_spec.js index 14e45a4f563..daa730d3b9f 100644 --- a/spec/frontend/alert_management/components/alert_management_detail_spec.js +++ b/spec/frontend/alert_management/components/alert_management_detail_spec.js @@ -3,7 +3,7 @@ import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import AlertDetails from '~/alert_management/components/alert_details.vue'; -import createIssueQuery from '~/alert_management/graphql/mutations/create_issue_from_alert.graphql'; +import createIssueMutation from '~/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql'; import { joinPaths } from '~/lib/utils/url_utility'; import { trackAlertsDetailsViewsOptions, @@ -19,18 +19,20 @@ describe('AlertDetails', () => { let mock; const projectPath = 'root/alerts'; const projectIssuesPath = 'root/alerts/-/issues'; + const projectId = '1'; const findDetailsTable = () => wrapper.find(GlTable); function mountComponent({ data, loading = false, mountMethod = shallowMount, stubs = {} } = {}) { wrapper = mountMethod(AlertDetails, { - propsData: { + provide: { alertId: 'alertId', projectPath, projectIssuesPath, + projectId, }, data() { - return { alert: { ...mockAlert }, ...data }; + return { alert: { ...mockAlert }, sidebarStatus: false, ...data }; }, mocks: { $apollo: { @@ -39,6 +41,7 @@ describe('AlertDetails', () => { alert: { loading, }, + sidebarStatus: {}, }, }, }, @@ -52,9 +55,7 @@ describe('AlertDetails', () => { afterEach(() => { if (wrapper) { - if (wrapper) { - wrapper.destroy(); - } + wrapper.destroy(); } mock.restore(); }); @@ -133,7 +134,7 @@ describe('AlertDetails', () => { it('should display "View issue" button that links the issue page when issue exists', () => { const issueIid = '3'; mountComponent({ - data: { alert: { ...mockAlert, issueIid } }, + data: { alert: { ...mockAlert, issueIid }, sidebarStatus: false }, }); expect(findViewIssueBtn().exists()).toBe(true); expect(findViewIssueBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, issueIid)); @@ -146,8 +147,11 @@ describe('AlertDetails', () => { mountMethod: mount, data: { alert: { ...mockAlert, issueIid } }, }); - expect(findViewIssueBtn().exists()).toBe(false); - expect(findCreateIssueBtn().exists()).toBe(true); + + return wrapper.vm.$nextTick().then(() => { + expect(findViewIssueBtn().exists()).toBe(false); + expect(findCreateIssueBtn().exists()).toBe(true); + }); }); it('calls `$apollo.mutate` with `createIssueQuery`', () => { @@ -158,7 +162,7 @@ describe('AlertDetails', () => { findCreateIssueBtn().trigger('click'); expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ - mutation: createIssueQuery, + mutation: createIssueMutation, variables: { iid: mockAlert.iid, projectPath, @@ -208,6 +212,13 @@ describe('AlertDetails', () => { expect(wrapper.find(GlAlert).exists()).toBe(true); }); + it('renders html-errors correctly', () => { + mountComponent({ + data: { errored: true, sidebarErrorMessage: '<span data-testid="htmlError" />' }, + }); + expect(wrapper.find('[data-testid="htmlError"]').exists()).toBe(true); + }); + it('does not display an error when dismissed', () => { mountComponent({ data: { errored: true, isErrorDismissed: true } }); expect(wrapper.find(GlAlert).exists()).toBe(false); diff --git a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js new file mode 100644 index 00000000000..0d1214211d3 --- /dev/null +++ b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js @@ -0,0 +1,54 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlEmptyState } from '@gitlab/ui'; +import AlertManagementEmptyState from '~/alert_management/components/alert_management_empty_state.vue'; + +describe('AlertManagementEmptyState', () => { + let wrapper; + + function mountComponent({ + props = { + alertManagementEnabled: false, + userCanEnableAlertManagement: false, + }, + stubs = {}, + } = {}) { + wrapper = shallowMount(AlertManagementEmptyState, { + propsData: { + enableAlertManagementPath: '/link', + emptyAlertSvgPath: 'illustration/path', + ...props, + }, + stubs, + }); + } + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + const EmptyState = () => wrapper.find(GlEmptyState); + + describe('Empty state', () => { + it('shows empty state', () => { + expect(EmptyState().exists()).toBe(true); + }); + + it('show OpsGenie integration state when OpsGenie mcv is true', () => { + mountComponent({ + props: { + alertManagementEnabled: false, + userCanEnableAlertManagement: false, + opsgenieMvcEnabled: true, + opsgenieMvcTargetUrl: 'https://opsgenie-url.com', + }, + }); + expect(EmptyState().props('title')).toBe('Opsgenie is enabled'); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js new file mode 100644 index 00000000000..4644406c037 --- /dev/null +++ b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js @@ -0,0 +1,57 @@ +import { shallowMount } from '@vue/test-utils'; +import AlertManagementList from '~/alert_management/components/alert_management_list_wrapper.vue'; +import { trackAlertListViewsOptions } from '~/alert_management/constants'; +import mockAlerts from '../mocks/alerts.json'; +import Tracking from '~/tracking'; + +describe('AlertManagementList', () => { + let wrapper; + + function mountComponent({ + props = { + alertManagementEnabled: false, + userCanEnableAlertManagement: false, + }, + data = {}, + stubs = {}, + } = {}) { + wrapper = shallowMount(AlertManagementList, { + propsData: { + projectPath: 'gitlab-org/gitlab', + enableAlertManagementPath: '/link', + populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data', + emptyAlertSvgPath: 'illustration/path', + ...props, + }, + data() { + return data; + }, + stubs, + }); + } + + beforeEach(() => { + mountComponent(); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts } }, + }); + }); + + it('should track alert list page views', () => { + const { category, action } = trackAlertListViewsOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js new file mode 100644 index 00000000000..fe08cf2c10a --- /dev/null +++ b/spec/frontend/alert_management/components/alert_management_sidebar_todo_spec.js @@ -0,0 +1,76 @@ +import { mount } from '@vue/test-utils'; +import SidebarTodo from '~/alert_management/components/sidebar/sidebar_todo.vue'; +import AlertMarkTodo from '~/alert_management/graphql/mutations/alert_todo_create.graphql'; +import mockAlerts from '../mocks/alerts.json'; + +const mockAlert = mockAlerts[0]; + +describe('Alert Details Sidebar To Do', () => { + let wrapper; + + function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) { + wrapper = mount(SidebarTodo, { + propsData: { + alert: { ...mockAlert }, + ...data, + sidebarCollapsed, + projectPath: 'projectPath', + }, + mocks: { + $apollo: { + mutate: jest.fn(), + queries: { + alert: { + loading, + }, + }, + }, + }, + stubs, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('updating the alert to do', () => { + const mockUpdatedMutationResult = { + data: { + updateAlertTodo: { + errors: [], + alert: {}, + }, + }, + }; + + beforeEach(() => { + mountComponent({ + data: { alert: mockAlert }, + sidebarCollapsed: false, + loading: false, + }); + }); + + it('renders a button for adding a To Do', () => { + return wrapper.vm.$nextTick().then(() => { + expect(wrapper.find('[data-testid="alert-todo-button"]').text()).toBe('Add a To Do'); + }); + }); + + it('calls `$apollo.mutate` with `AlertMarkTodo` mutation and variables containing `iid`, `todoEvent`, & `projectPath`', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); + + return wrapper.vm.$nextTick().then(() => { + wrapper.find('button').trigger('click'); + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: AlertMarkTodo, + variables: { + iid: '1527542', + projectPath: 'projectPath', + }, + }); + }); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_table_spec.js index 0154e5fa112..f316126432e 100644 --- a/spec/frontend/alert_management/components/alert_management_list_spec.js +++ b/spec/frontend/alert_management/components/alert_management_table_spec.js @@ -1,6 +1,5 @@ import { mount } from '@vue/test-utils'; import { - GlEmptyState, GlTable, GlAlert, GlLoadingIcon, @@ -11,28 +10,22 @@ import { GlTab, GlBadge, GlPagination, + GlSearchBoxByType, } from '@gitlab/ui'; import { visitUrl } from '~/lib/utils/url_utility'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; -import createFlash from '~/flash'; -import AlertManagementList from '~/alert_management/components/alert_management_list.vue'; -import { - ALERTS_STATUS_TABS, - trackAlertListViewsOptions, - trackAlertStatusUpdateOptions, -} from '~/alert_management/constants'; -import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql'; +import AlertManagementTable from '~/alert_management/components/alert_management_table.vue'; +import { ALERTS_STATUS_TABS, trackAlertStatusUpdateOptions } from '~/alert_management/constants'; +import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql'; import mockAlerts from '../mocks/alerts.json'; import Tracking from '~/tracking'; -jest.mock('~/flash'); - jest.mock('~/lib/utils/url_utility', () => ({ visitUrl: jest.fn().mockName('visitUrlMock'), joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths, })); -describe('AlertManagementList', () => { +describe('AlertManagementTable', () => { let wrapper; const findAlertsTable = () => wrapper.find(GlTable); @@ -49,6 +42,8 @@ describe('AlertManagementList', () => { const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]'); const findSeverityColumnHeader = () => wrapper.findAll('th').at(0); const findPagination = () => wrapper.find(GlPagination); + const findSearch = () => wrapper.find(GlSearchBoxByType); + const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]'); const alertsCount = { open: 14, triggered: 10, @@ -66,11 +61,10 @@ describe('AlertManagementList', () => { loading = false, stubs = {}, } = {}) { - wrapper = mount(AlertManagementList, { + wrapper = mount(AlertManagementTable, { propsData: { projectPath: 'gitlab-org/gitlab', - enableAlertManagementPath: '/link', - emptyAlertSvgPath: 'illustration/path', + populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data', ...props, }, data() { @@ -92,7 +86,7 @@ describe('AlertManagementList', () => { } beforeEach(() => { - mountComponent(); + mountComponent({ data: { alerts: mockAlerts, alertsCount } }); }); afterEach(() => { @@ -101,12 +95,6 @@ describe('AlertManagementList', () => { } }); - describe('Empty state', () => { - it('shows empty state', () => { - expect(wrapper.find(GlEmptyState).exists()).toBe(true); - }); - }); - describe('Status Filter Tabs', () => { beforeEach(() => { mountComponent({ @@ -206,6 +194,15 @@ describe('AlertManagementList', () => { expect(findStatusDropdown().exists()).toBe(true); }); + it('does not display a dropdown status header', () => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, + loading: false, + }); + expect(findStatusDropdown().contains('.dropdown-title')).toBe(false); + }); + it('shows correct severity icons', () => { mountComponent({ props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, @@ -278,6 +275,37 @@ describe('AlertManagementList', () => { expect(visitUrl).toHaveBeenCalledWith('/1527542/details'); }); + describe('alert issue links', () => { + beforeEach(() => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, + loading: false, + }); + }); + + it('shows "None" when no link exists', () => { + expect( + findIssueFields() + .at(0) + .text(), + ).toBe('None'); + }); + + it('renders a link when one exists', () => { + expect( + findIssueFields() + .at(1) + .text(), + ).toBe('#1'); + expect( + findIssueFields() + .at(1) + .attributes('href'), + ).toBe('/gitlab-org/gitlab/-/issues/1'); + }); + }); + describe('handle date fields', () => { it('should display time ago dates when values provided', () => { mountComponent({ @@ -289,7 +317,6 @@ describe('AlertManagementList', () => { iid: 1, status: 'acknowledged', startedAt: '2020-03-17T23:18:14.996Z', - endedAt: '2020-04-17T23:18:14.996Z', severity: 'high', assignees: { nodes: [] }, }, @@ -300,7 +327,7 @@ describe('AlertManagementList', () => { }, loading: false, }); - expect(findDateFields().length).toBe(2); + expect(findDateFields().length).toBe(1); }); it('should not display time ago dates when values not provided', () => { @@ -312,7 +339,6 @@ describe('AlertManagementList', () => { iid: 1, status: 'acknowledged', startedAt: null, - endedAt: null, severity: 'high', }, ], @@ -323,6 +349,40 @@ describe('AlertManagementList', () => { }); expect(findDateFields().exists()).toBe(false); }); + + describe('New Alert indicator', () => { + const oldAlert = mockAlerts[0]; + + const newAlert = { ...oldAlert, isNew: true }; + + it('should highlight the row when alert is new', () => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: [newAlert] }, alertsCount, errored: false }, + loading: false, + }); + + expect( + findAlerts() + .at(0) + .classes(), + ).toContain('new-alert'); + }); + + it('should not highlight the row when alert is not new', () => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: [oldAlert] }, alertsCount, errored: false }, + loading: false, + }); + + expect( + findAlerts() + .at(0) + .classes(), + ).not.toContain('new-alert'); + }); + }); }); }); @@ -388,14 +448,38 @@ describe('AlertManagementList', () => { }); }); - it('calls `createFlash` when request fails', () => { + it('shows an error when request fails', () => { jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); findFirstStatusOption().vm.$emit('click'); + wrapper.setData({ + errored: true, + }); - setImmediate(() => { - expect(createFlash).toHaveBeenCalledWith( - 'There was an error while updating the status of the alert. Please try again.', - ); + return wrapper.vm.$nextTick(() => { + expect(wrapper.find('[data-testid="alert-error"]').exists()).toBe(true); + }); + }); + + it('shows an error when response includes HTML errors', () => { + const mockUpdatedMutationErrorResult = { + data: { + updateAlertStatus: { + errors: ['<span data-testid="htmlError" />'], + alert: { + iid, + status: 'acknowledged', + }, + }, + }, + }; + + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationErrorResult); + findFirstStatusOption().vm.$emit('click'); + wrapper.setData({ errored: true }); + + return wrapper.vm.$nextTick(() => { + expect(wrapper.contains('[data-testid="alert-error"]')).toBe(true); + expect(wrapper.contains('[data-testid="htmlError"]')).toBe(true); }); }); }); @@ -410,11 +494,6 @@ describe('AlertManagementList', () => { }); }); - it('should track alert list page views', () => { - const { category, action } = trackAlertListViewsOptions; - expect(Tracking.event).toHaveBeenCalledWith(category, action); - }); - it('should track alert status updates', () => { Tracking.event.mockClear(); jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({}); @@ -438,14 +517,14 @@ describe('AlertManagementList', () => { it('does NOT show pagination control when list is smaller than default page size', () => { findStatusTabs().vm.$emit('input', 3); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findPagination().exists()).toBe(false); }); }); it('shows pagination control when list is larger than default page size', () => { findStatusTabs().vm.$emit('input', 0); - wrapper.vm.$nextTick(() => { + return wrapper.vm.$nextTick(() => { expect(findPagination().exists()).toBe(true); }); }); @@ -486,4 +565,26 @@ describe('AlertManagementList', () => { }); }); }); + + describe('Search', () => { + beforeEach(() => { + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alerts: { list: mockAlerts }, alertsCount, errored: false }, + loading: false, + }); + }); + + it('renders the search component', () => { + expect(findSearch().exists()).toBe(true); + }); + + it('sets the `searchTerm` graphql variable', () => { + const SEARCH_TERM = 'Simple Alert'; + + findSearch().vm.$emit('input', SEARCH_TERM); + + expect(wrapper.vm.$data.searchTerm).toBe(SEARCH_TERM); + }); + }); }); diff --git a/spec/frontend/alert_management/components/alert_metrics_spec.js b/spec/frontend/alert_management/components/alert_metrics_spec.js new file mode 100644 index 00000000000..c188363ddc2 --- /dev/null +++ b/spec/frontend/alert_management/components/alert_metrics_spec.js @@ -0,0 +1,67 @@ +import { shallowMount } from '@vue/test-utils'; +import waitForPromises from 'helpers/wait_for_promises'; +import AlertMetrics from '~/alert_management/components/alert_metrics.vue'; +import MockAdapter from 'axios-mock-adapter'; +import axios from 'axios'; + +jest.mock('~/monitoring/stores', () => ({ + monitoringDashboard: {}, +})); + +const mockEmbedName = 'MetricsEmbedStub'; + +jest.mock('~/monitoring/components/embeds/metric_embed.vue', () => ({ + name: mockEmbedName, + render(h) { + return h('div'); + }, +})); + +describe('Alert Metrics', () => { + let wrapper; + const mock = new MockAdapter(axios); + + function mountComponent({ props } = {}) { + wrapper = shallowMount(AlertMetrics, { + propsData: { + ...props, + }, + stubs: { + MetricEmbed: true, + }, + }); + } + + const findChart = () => wrapper.find({ name: mockEmbedName }); + const findEmptyState = () => wrapper.find({ ref: 'emptyState' }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + afterAll(() => { + mock.restore(); + }); + + describe('Empty state', () => { + it('should display a message when metrics dashboard url is not provided ', () => { + mountComponent(); + expect(findChart().exists()).toBe(false); + expect(findEmptyState().text()).toBe("Metrics weren't available in the alerts payload."); + }); + }); + + describe('Chart', () => { + it('should be rendered when dashboard url is provided', async () => { + mountComponent({ props: { dashboardUrl: 'metrics.url' } }); + + await waitForPromises(); + await wrapper.vm.$nextTick(); + + expect(findEmptyState().exists()).toBe(false); + expect(findChart().exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_sidebar_status_spec.js b/spec/frontend/alert_management/components/alert_sidebar_status_spec.js deleted file mode 100644 index 94643966a43..00000000000 --- a/spec/frontend/alert_management/components/alert_sidebar_status_spec.js +++ /dev/null @@ -1,107 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; -import { trackAlertStatusUpdateOptions } from '~/alert_management/constants'; -import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue'; -import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql'; -import Tracking from '~/tracking'; -import mockAlerts from '../mocks/alerts.json'; - -const mockAlert = mockAlerts[0]; - -describe('Alert Details Sidebar Status', () => { - let wrapper; - const findStatusDropdownItem = () => wrapper.find(GlDropdownItem); - const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon); - - function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) { - wrapper = shallowMount(AlertSidebarStatus, { - propsData: { - alert: { ...mockAlert }, - ...data, - sidebarCollapsed, - projectPath: 'projectPath', - }, - mocks: { - $apollo: { - mutate: jest.fn(), - queries: { - alert: { - loading, - }, - }, - }, - }, - stubs, - }); - } - - afterEach(() => { - if (wrapper) { - wrapper.destroy(); - } - }); - - describe('updating the alert status', () => { - const mockUpdatedMutationResult = { - data: { - updateAlertStatus: { - errors: [], - alert: { - status: 'acknowledged', - }, - }, - }, - }; - - beforeEach(() => { - mountComponent({ - data: { alert: mockAlert }, - sidebarCollapsed: false, - loading: false, - }); - }); - - it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => { - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); - findStatusDropdownItem().vm.$emit('click'); - - expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ - mutation: updateAlertStatus, - variables: { - iid: '1527542', - status: 'TRIGGERED', - projectPath: 'projectPath', - }, - }); - }); - - it('stops updating when the request fails', () => { - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); - findStatusDropdownItem().vm.$emit('click'); - expect(findStatusLoadingIcon().exists()).toBe(false); - expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered'); - }); - }); - - describe('Snowplow tracking', () => { - beforeEach(() => { - jest.spyOn(Tracking, 'event'); - mountComponent({ - props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, - data: { alert: mockAlert }, - loading: false, - }); - }); - - it('should track alert status updates', () => { - Tracking.event.mockClear(); - jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({}); - findStatusDropdownItem().vm.$emit('click'); - const status = findStatusDropdownItem().text(); - setImmediate(() => { - const { category, action, label } = trackAlertStatusUpdateOptions; - expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status }); - }); - }); - }); -}); diff --git a/spec/frontend/alert_management/components/alert_managment_sidebar_assignees_spec.js b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js index 5dbd83dbdac..db086782424 100644 --- a/spec/frontend/alert_management/components/alert_managment_sidebar_assignees_spec.js +++ b/spec/frontend/alert_management/components/sidebar/alert_managment_sidebar_assignees_spec.js @@ -4,8 +4,8 @@ import MockAdapter from 'axios-mock-adapter'; import { GlDropdownItem } from '@gitlab/ui'; import SidebarAssignee from '~/alert_management/components/sidebar/sidebar_assignee.vue'; import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue'; -import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.graphql'; -import mockAlerts from '../mocks/alerts.json'; +import AlertSetAssignees from '~/alert_management/graphql/mutations/alert_set_assignees.mutation.graphql'; +import mockAlerts from '../../mocks/alerts.json'; const mockAlert = mockAlerts[0]; @@ -33,6 +33,7 @@ describe('Alert Details Sidebar Assignees', () => { ...data, sidebarCollapsed, projectPath: 'projectPath', + projectId: '1', }, mocks: { $apollo: { @@ -58,7 +59,7 @@ describe('Alert Details Sidebar Assignees', () => { describe('updating the alert status', () => { const mockUpdatedMutationResult = { data: { - updateAlertStatus: { + alertSetAssignees: { errors: [], alert: { assigneeUsernames: ['root'], @@ -69,7 +70,7 @@ describe('Alert Details Sidebar Assignees', () => { beforeEach(() => { mock = new MockAdapter(axios); - const path = '/autocomplete/users.json'; + const path = '/-/autocomplete/users.json'; const users = [ { avatar_url: @@ -124,6 +125,26 @@ describe('Alert Details Sidebar Assignees', () => { }); }); + it('shows an error when request contains error messages', () => { + wrapper.setData({ isDropdownSearching: false }); + const errorMutationResult = { + data: { + alertSetAssignees: { + errors: ['There was a problem for sure.'], + alert: {}, + }, + }, + }; + + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(errorMutationResult); + + return wrapper.vm.$nextTick().then(() => { + const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0); + SideBarAssigneeItem.vm.$emit('click'); + expect(wrapper.emitted('alert-refresh')).toBeUndefined(); + }); + }); + it('stops updating and cancels loading when the request fails', () => { jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); wrapper.vm.updateAlertAssignees('root'); diff --git a/spec/frontend/alert_management/components/alert_sidebar_spec.js b/spec/frontend/alert_management/components/sidebar/alert_sidebar_spec.js index 80c4d9e0650..5235ae63fee 100644 --- a/spec/frontend/alert_management/components/alert_sidebar_spec.js +++ b/spec/frontend/alert_management/components/sidebar/alert_sidebar_spec.js @@ -3,7 +3,7 @@ import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import AlertSidebar from '~/alert_management/components/alert_sidebar.vue'; import SidebarAssignees from '~/alert_management/components/sidebar/sidebar_assignees.vue'; -import mockAlerts from '../mocks/alerts.json'; +import mockAlerts from '../../mocks/alerts.json'; const mockAlert = mockAlerts[0]; @@ -11,19 +11,28 @@ describe('Alert Details Sidebar', () => { let wrapper; let mock; - function mountComponent({ - sidebarCollapsed = true, - mountMethod = shallowMount, - stubs = {}, - alert = {}, - } = {}) { + function mountComponent({ mountMethod = shallowMount, stubs = {}, alert = {} } = {}) { wrapper = mountMethod(AlertSidebar, { + data() { + return { + sidebarStatus: false, + }; + }, propsData: { alert, - sidebarCollapsed, + }, + provide: { projectPath: 'projectPath', + projectId: '1', }, stubs, + mocks: { + $apollo: { + queries: { + sidebarStatus: {}, + }, + }, + }, }); } @@ -41,7 +50,7 @@ describe('Alert Details Sidebar', () => { }); it('open as default', () => { - expect(wrapper.props('sidebarCollapsed')).toBe(true); + expect(wrapper.classes('right-sidebar-expanded')).toBe(true); }); it('should render side bar assignee dropdown', () => { diff --git a/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js new file mode 100644 index 00000000000..c2eaf540e9c --- /dev/null +++ b/spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js @@ -0,0 +1,129 @@ +import { mount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui'; +import { trackAlertStatusUpdateOptions } from '~/alert_management/constants'; +import AlertSidebarStatus from '~/alert_management/components/sidebar/sidebar_status.vue'; +import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.mutation.graphql'; +import Tracking from '~/tracking'; +import mockAlerts from '../../mocks/alerts.json'; + +const mockAlert = mockAlerts[0]; + +describe('Alert Details Sidebar Status', () => { + let wrapper; + const findStatusDropdown = () => wrapper.find(GlDropdown); + const findStatusDropdownItem = () => wrapper.find(GlDropdownItem); + const findStatusLoadingIcon = () => wrapper.find(GlLoadingIcon); + + function mountComponent({ data, sidebarCollapsed = true, loading = false, stubs = {} } = {}) { + wrapper = mount(AlertSidebarStatus, { + propsData: { + alert: { ...mockAlert }, + ...data, + sidebarCollapsed, + projectPath: 'projectPath', + }, + mocks: { + $apollo: { + mutate: jest.fn(), + queries: { + alert: { + loading, + }, + }, + }, + }, + stubs, + }); + } + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('Alert Sidebar Dropdown Status', () => { + beforeEach(() => { + mountComponent({ + data: { alert: mockAlert }, + sidebarCollapsed: false, + loading: false, + }); + }); + + it('displays status dropdown', () => { + expect(findStatusDropdown().exists()).toBe(true); + }); + + it('displays the dropdown status header', () => { + expect(findStatusDropdown().contains('.dropdown-title')).toBe(true); + }); + + describe('updating the alert status', () => { + const mockUpdatedMutationResult = { + data: { + updateAlertStatus: { + errors: [], + alert: { + status: 'acknowledged', + }, + }, + }, + }; + + beforeEach(() => { + mountComponent({ + data: { alert: mockAlert }, + sidebarCollapsed: false, + loading: false, + }); + }); + + it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult); + findStatusDropdownItem().vm.$emit('click'); + + expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({ + mutation: updateAlertStatus, + variables: { + iid: '1527542', + status: 'TRIGGERED', + projectPath: 'projectPath', + }, + }); + }); + + it('stops updating when the request fails', () => { + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error())); + findStatusDropdownItem().vm.$emit('click'); + expect(findStatusLoadingIcon().exists()).toBe(false); + expect(wrapper.find('[data-testid="status"]').text()).toBe('Triggered'); + }); + }); + + describe('Snowplow tracking', () => { + beforeEach(() => { + jest.spyOn(Tracking, 'event'); + mountComponent({ + props: { alertManagementEnabled: true, userCanEnableAlertManagement: true }, + data: { alert: mockAlert }, + loading: false, + }); + }); + + it('should track alert status updates', () => { + Tracking.event.mockClear(); + jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({}); + findStatusDropdownItem().vm.$emit('click'); + const status = findStatusDropdownItem().text(); + setImmediate(() => { + const { category, action, label } = trackAlertStatusUpdateOptions; + expect(Tracking.event).toHaveBeenCalledWith(category, action, { + label, + property: status, + }); + }); + }); + }); + }); +}); diff --git a/spec/frontend/alert_management/components/alert_management_system_note_spec.js b/spec/frontend/alert_management/components/system_notes/alert_management_system_note_spec.js index 87dc36cc7cb..8dd663e55d9 100644 --- a/spec/frontend/alert_management/components/alert_management_system_note_spec.js +++ b/spec/frontend/alert_management/components/system_notes/alert_management_system_note_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; import SystemNote from '~/alert_management/components/system_notes/system_note.vue'; -import mockAlerts from '../mocks/alerts.json'; +import mockAlerts from '../../mocks/alerts.json'; const mockAlert = mockAlerts[1]; @@ -28,7 +28,11 @@ describe('Alert Details System Note', () => { }); it('renders the correct system note', () => { - expect(wrapper.find('.note-wrapper').attributes('id')).toBe('note_1628'); + const noteId = wrapper.find('.note-wrapper').attributes('id'); + const iconRoute = wrapper.find('use').attributes('href'); + + expect(noteId).toBe('note_1628'); + expect(iconRoute.includes('user')).toBe(true); }); }); }); |