summaryrefslogtreecommitdiff
path: root/spec/frontend/alert_management/components/alert_management_detail_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/alert_management/components/alert_management_detail_spec.js')
-rw-r--r--spec/frontend/alert_management/components/alert_management_detail_spec.js272
1 files changed, 0 insertions, 272 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
deleted file mode 100644
index daa730d3b9f..00000000000
--- a/spec/frontend/alert_management/components/alert_management_detail_spec.js
+++ /dev/null
@@ -1,272 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-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 createIssueMutation from '~/alert_management/graphql/mutations/create_issue_from_alert.mutation.graphql';
-import { joinPaths } from '~/lib/utils/url_utility';
-import {
- trackAlertsDetailsViewsOptions,
- ALERTS_SEVERITY_LABELS,
-} from '~/alert_management/constants';
-import Tracking from '~/tracking';
-import mockAlerts from '../mocks/alerts.json';
-
-const mockAlert = mockAlerts[0];
-
-describe('AlertDetails', () => {
- let wrapper;
- 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, {
- provide: {
- alertId: 'alertId',
- projectPath,
- projectIssuesPath,
- projectId,
- },
- data() {
- return { alert: { ...mockAlert }, sidebarStatus: false, ...data };
- },
- mocks: {
- $apollo: {
- mutate: jest.fn(),
- queries: {
- alert: {
- loading,
- },
- sidebarStatus: {},
- },
- },
- },
- stubs,
- });
- }
-
- beforeEach(() => {
- mock = new MockAdapter(axios);
- });
-
- afterEach(() => {
- if (wrapper) {
- wrapper.destroy();
- }
- mock.restore();
- });
-
- const findCreateIssueBtn = () => wrapper.find('[data-testid="createIssueBtn"]');
- const findViewIssueBtn = () => wrapper.find('[data-testid="viewIssueBtn"]');
- const findIssueCreationAlert = () => wrapper.find('[data-testid="issueCreationError"]');
-
- describe('Alert details', () => {
- describe('when alert is null', () => {
- beforeEach(() => {
- mountComponent({ data: { alert: null } });
- });
-
- it('shows an empty state', () => {
- expect(wrapper.find('[data-testid="alertDetailsTabs"]').exists()).toBe(false);
- });
- });
-
- describe('when alert is present', () => {
- beforeEach(() => {
- mountComponent({ data: { alert: mockAlert } });
- });
-
- it('renders a tab with overview information', () => {
- expect(wrapper.find('[data-testid="overviewTab"]').exists()).toBe(true);
- });
-
- it('renders a tab with full alert information', () => {
- expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true);
- });
-
- it('renders severity', () => {
- expect(wrapper.find('[data-testid="severity"]').text()).toBe(
- ALERTS_SEVERITY_LABELS[mockAlert.severity],
- );
- });
-
- it('renders a title', () => {
- expect(wrapper.find('[data-testid="title"]').text()).toBe(mockAlert.title);
- });
-
- it('renders a start time', () => {
- expect(wrapper.find('[data-testid="startTimeItem"]').exists()).toBe(true);
- expect(wrapper.find('[data-testid="startTimeItem"]').props().time).toBe(
- mockAlert.startedAt,
- );
- });
- });
-
- describe('individual alert fields', () => {
- describe.each`
- field | data | isShown
- ${'eventCount'} | ${1} | ${true}
- ${'eventCount'} | ${undefined} | ${false}
- ${'monitoringTool'} | ${'New Relic'} | ${true}
- ${'monitoringTool'} | ${undefined} | ${false}
- ${'service'} | ${'Prometheus'} | ${true}
- ${'service'} | ${undefined} | ${false}
- `(`$desc`, ({ field, data, isShown }) => {
- beforeEach(() => {
- mountComponent({ data: { alert: { ...mockAlert, [field]: data } } });
- });
-
- it(`${field} is ${isShown ? 'displayed' : 'hidden'} correctly`, () => {
- if (isShown) {
- expect(wrapper.find(`[data-testid="${field}"]`).text()).toBe(data.toString());
- } else {
- expect(wrapper.find(`[data-testid="${field}"]`).exists()).toBe(false);
- }
- });
- });
- });
-
- describe('Create issue from alert', () => {
- it('should display "View issue" button that links the issue page when issue exists', () => {
- const issueIid = '3';
- mountComponent({
- data: { alert: { ...mockAlert, issueIid }, sidebarStatus: false },
- });
- expect(findViewIssueBtn().exists()).toBe(true);
- expect(findViewIssueBtn().attributes('href')).toBe(joinPaths(projectIssuesPath, issueIid));
- expect(findCreateIssueBtn().exists()).toBe(false);
- });
-
- it('should display "Create issue" button when issue doesn\'t exist yet', () => {
- const issueIid = null;
- mountComponent({
- mountMethod: mount,
- data: { alert: { ...mockAlert, issueIid } },
- });
-
- return wrapper.vm.$nextTick().then(() => {
- expect(findViewIssueBtn().exists()).toBe(false);
- expect(findCreateIssueBtn().exists()).toBe(true);
- });
- });
-
- it('calls `$apollo.mutate` with `createIssueQuery`', () => {
- const issueIid = '10';
- jest
- .spyOn(wrapper.vm.$apollo, 'mutate')
- .mockResolvedValue({ data: { createAlertIssue: { issue: { iid: issueIid } } } });
-
- findCreateIssueBtn().trigger('click');
- expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
- mutation: createIssueMutation,
- variables: {
- iid: mockAlert.iid,
- projectPath,
- },
- });
- });
-
- it('shows error alert when issue creation fails ', () => {
- const errorMsg = 'Something went wrong';
- mountComponent({
- mountMethod: mount,
- data: { alert: { ...mockAlert, alertIid: 1 } },
- });
-
- jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue(errorMsg);
- findCreateIssueBtn().trigger('click');
-
- setImmediate(() => {
- expect(findIssueCreationAlert().text()).toBe(errorMsg);
- });
- });
- });
-
- describe('View full alert details', () => {
- beforeEach(() => {
- mountComponent({ data: { alert: mockAlert } });
- });
- it('should display a table of raw alert details data', () => {
- wrapper.find('[data-testid="fullDetailsTab"]').trigger('click');
- expect(findDetailsTable().exists()).toBe(true);
- });
- });
-
- describe('loading state', () => {
- beforeEach(() => {
- mountComponent({ loading: true });
- });
-
- it('displays a loading state when loading', () => {
- expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
- });
- });
-
- describe('error state', () => {
- it('displays a error state correctly', () => {
- mountComponent({ data: { errored: true } });
- 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);
- });
- });
-
- describe('header', () => {
- const findHeader = () => wrapper.find('[data-testid="alert-header"]');
- const stubs = { TimeAgoTooltip: '<span>now</span>' };
-
- describe('individual header fields', () => {
- describe.each`
- createdAt | monitoringTool | result
- ${'2020-04-17T23:18:14.996Z'} | ${null} | ${'Alert Reported now'}
- ${'2020-04-17T23:18:14.996Z'} | ${'Datadog'} | ${'Alert Reported now by Datadog'}
- `(
- `When createdAt=$createdAt, monitoringTool=$monitoringTool`,
- ({ createdAt, monitoringTool, result }) => {
- beforeEach(() => {
- mountComponent({
- data: { alert: { ...mockAlert, createdAt, monitoringTool } },
- mountMethod: mount,
- stubs,
- });
- });
-
- it('header text is shown correctly', () => {
- expect(findHeader().text()).toBe(result);
- });
- },
- );
- });
- });
- });
-
- describe('Snowplow tracking', () => {
- beforeEach(() => {
- jest.spyOn(Tracking, 'event');
- mountComponent({
- props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
- data: { alert: mockAlert },
- loading: false,
- });
- });
-
- it('should track alert details page views', () => {
- const { category, action } = trackAlertsDetailsViewsOptions;
- expect(Tracking.event).toHaveBeenCalledWith(category, action);
- });
- });
-});
View Lorry Controller Status