2020-05-24 23:13:21 +05:30
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import {
|
|
|
|
GlTable,
|
|
|
|
GlAlert,
|
|
|
|
GlLoadingIcon,
|
2020-10-24 23:57:45 +05:30
|
|
|
GlDeprecatedDropdown,
|
|
|
|
GlDeprecatedDropdownItem,
|
2020-05-24 23:13:21 +05:30
|
|
|
GlIcon,
|
2020-06-23 00:09:42 +05:30
|
|
|
GlTabs,
|
2020-05-24 23:13:21 +05:30
|
|
|
GlTab,
|
2020-06-23 00:09:42 +05:30
|
|
|
GlBadge,
|
|
|
|
GlPagination,
|
2020-07-28 23:09:34 +05:30
|
|
|
GlSearchBoxByType,
|
2020-11-24 15:15:51 +05:30
|
|
|
GlAvatar,
|
2020-05-24 23:13:21 +05:30
|
|
|
} from '@gitlab/ui';
|
2020-10-24 23:57:45 +05:30
|
|
|
import waitForPromises from 'helpers/wait_for_promises';
|
2020-05-24 23:13:21 +05:30
|
|
|
import { visitUrl } from '~/lib/utils/url_utility';
|
|
|
|
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
|
2020-07-28 23:09:34 +05:30
|
|
|
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';
|
2020-05-24 23:13:21 +05:30
|
|
|
import mockAlerts from '../mocks/alerts.json';
|
2020-06-23 00:09:42 +05:30
|
|
|
import Tracking from '~/tracking';
|
2020-05-24 23:13:21 +05:30
|
|
|
|
|
|
|
jest.mock('~/lib/utils/url_utility', () => ({
|
|
|
|
visitUrl: jest.fn().mockName('visitUrlMock'),
|
|
|
|
joinPaths: jest.requireActual('~/lib/utils/url_utility').joinPaths,
|
|
|
|
}));
|
|
|
|
|
2020-07-28 23:09:34 +05:30
|
|
|
describe('AlertManagementTable', () => {
|
2020-05-24 23:13:21 +05:30
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
const findAlertsTable = () => wrapper.find(GlTable);
|
|
|
|
const findAlerts = () => wrapper.findAll('table tbody tr');
|
|
|
|
const findAlert = () => wrapper.find(GlAlert);
|
|
|
|
const findLoader = () => wrapper.find(GlLoadingIcon);
|
2020-10-24 23:57:45 +05:30
|
|
|
const findStatusDropdown = () => wrapper.find(GlDeprecatedDropdown);
|
2020-05-24 23:13:21 +05:30
|
|
|
const findStatusFilterTabs = () => wrapper.findAll(GlTab);
|
2020-06-23 00:09:42 +05:30
|
|
|
const findStatusTabs = () => wrapper.find(GlTabs);
|
|
|
|
const findStatusFilterBadge = () => wrapper.findAll(GlBadge);
|
2020-05-24 23:13:21 +05:30
|
|
|
const findDateFields = () => wrapper.findAll(TimeAgo);
|
2020-10-24 23:57:45 +05:30
|
|
|
const findFirstStatusOption = () => findStatusDropdown().find(GlDeprecatedDropdownItem);
|
2020-06-23 00:09:42 +05:30
|
|
|
const findPagination = () => wrapper.find(GlPagination);
|
2020-07-28 23:09:34 +05:30
|
|
|
const findSearch = () => wrapper.find(GlSearchBoxByType);
|
2020-11-24 15:15:51 +05:30
|
|
|
const findSeverityColumnHeader = () =>
|
|
|
|
wrapper.find('[data-testid="alert-management-severity-sort"]');
|
|
|
|
const findFirstIDField = () => wrapper.findAll('[data-testid="idField"]').at(0);
|
|
|
|
const findAssignees = () => wrapper.findAll('[data-testid="assigneesField"]');
|
|
|
|
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
|
2020-07-28 23:09:34 +05:30
|
|
|
const findIssueFields = () => wrapper.findAll('[data-testid="issueField"]');
|
2020-10-24 23:57:45 +05:30
|
|
|
const findAlertError = () => wrapper.find('[data-testid="alert-error"]');
|
2020-06-23 00:09:42 +05:30
|
|
|
const alertsCount = {
|
2020-11-24 15:15:51 +05:30
|
|
|
open: 24,
|
|
|
|
triggered: 20,
|
|
|
|
acknowledged: 16,
|
|
|
|
resolved: 11,
|
|
|
|
all: 26,
|
2020-06-23 00:09:42 +05:30
|
|
|
};
|
2020-10-24 23:57:45 +05:30
|
|
|
const selectFirstStatusOption = () => {
|
|
|
|
findFirstStatusOption().vm.$emit('click');
|
|
|
|
|
|
|
|
return waitForPromises();
|
|
|
|
};
|
2020-05-24 23:13:21 +05:30
|
|
|
|
|
|
|
function mountComponent({
|
|
|
|
props = {
|
|
|
|
alertManagementEnabled: false,
|
|
|
|
userCanEnableAlertManagement: false,
|
|
|
|
},
|
|
|
|
data = {},
|
|
|
|
loading = false,
|
|
|
|
stubs = {},
|
|
|
|
} = {}) {
|
2020-07-28 23:09:34 +05:30
|
|
|
wrapper = mount(AlertManagementTable, {
|
2020-05-24 23:13:21 +05:30
|
|
|
propsData: {
|
|
|
|
projectPath: 'gitlab-org/gitlab',
|
2020-07-28 23:09:34 +05:30
|
|
|
populatingAlertsHelpUrl: '/help/help-page.md#populating-alert-data',
|
2020-05-24 23:13:21 +05:30
|
|
|
...props,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
mocks: {
|
|
|
|
$apollo: {
|
|
|
|
mutate: jest.fn(),
|
2020-06-23 00:09:42 +05:30
|
|
|
query: jest.fn(),
|
2020-05-24 23:13:21 +05:30
|
|
|
queries: {
|
|
|
|
alerts: {
|
|
|
|
loading,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
stubs,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
if (wrapper) {
|
|
|
|
wrapper.destroy();
|
2020-11-24 15:15:51 +05:30
|
|
|
wrapper = null;
|
2020-05-24 23:13:21 +05:30
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Status Filter Tabs', () => {
|
2020-06-23 00:09:42 +05:30
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts, alertsCount },
|
|
|
|
loading: false,
|
|
|
|
stubs: {
|
|
|
|
GlTab: true,
|
|
|
|
},
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
it('should display filter tabs with alerts count badge for each status', () => {
|
|
|
|
const tabs = findStatusFilterTabs().wrappers;
|
|
|
|
const badges = findStatusFilterBadge();
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
tabs.forEach((tab, i) => {
|
|
|
|
const status = ALERTS_STATUS_TABS[i].status.toLowerCase();
|
|
|
|
expect(tab.text()).toContain(ALERTS_STATUS_TABS[i].title);
|
|
|
|
expect(badges.at(i).text()).toContain(alertsCount[status]);
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Alerts table', () => {
|
|
|
|
it('loading state', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-06-23 00:09:42 +05:30
|
|
|
data: { alerts: {}, alertsCount: null },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: true,
|
|
|
|
});
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findLoader().exists()).toBe(true);
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).not.toContain('gl-hover-bg-blue-50');
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('error state', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { errors: ['error'] }, alertsCount: null, hasError: true },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findAlertsTable().text()).toContain('No alerts to display');
|
|
|
|
expect(findLoader().exists()).toBe(false);
|
|
|
|
expect(findAlert().props().variant).toBe('danger');
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).not.toContain('gl-hover-bg-blue-50');
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('empty state', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: [], pageInfo: {} }, alertsCount: { all: 0 }, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findAlertsTable().text()).toContain('No alerts to display');
|
|
|
|
expect(findLoader().exists()).toBe(false);
|
|
|
|
expect(findAlert().props().variant).toBe('info');
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).not.toContain('gl-hover-bg-blue-50');
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('has data state', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findLoader().exists()).toBe(false);
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findAlerts()).toHaveLength(mockAlerts.length);
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).toContain('gl-hover-bg-blue-50');
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('displays the alert ID and title formatted correctly', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(findFirstIDField().exists()).toBe(true);
|
|
|
|
expect(findFirstIDField().text()).toBe(`#${mockAlerts[0].iid} ${mockAlerts[0].title}`);
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('displays status dropdown', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findStatusDropdown().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
2020-07-28 23:09:34 +05:30
|
|
|
it('does not display a dropdown status header', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-07-28 23:09:34 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(
|
|
|
|
findStatusDropdown()
|
|
|
|
.find('.dropdown-title')
|
|
|
|
.exists(),
|
|
|
|
).toBe(false);
|
2020-07-28 23:09:34 +05:30
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('shows correct severity icons', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick().then(() => {
|
|
|
|
expect(wrapper.find(GlTable).exists()).toBe(true);
|
|
|
|
expect(
|
|
|
|
findAlertsTable()
|
|
|
|
.find(GlIcon)
|
|
|
|
.classes('icon-critical'),
|
|
|
|
).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders severity text', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
findSeverityFields()
|
|
|
|
.at(0)
|
|
|
|
.text(),
|
|
|
|
).toBe('Critical');
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
it('renders Unassigned when no assignee(s) present', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-06-23 00:09:42 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
findAssignees()
|
|
|
|
.at(0)
|
|
|
|
.text(),
|
|
|
|
).toBe('Unassigned');
|
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
it('renders user avatar when assignee present', () => {
|
2020-06-23 00:09:42 +05:30
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-06-23 00:09:42 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
2020-11-24 15:15:51 +05:30
|
|
|
const avatar = findAssignees()
|
|
|
|
.at(1)
|
|
|
|
.find(GlAvatar);
|
|
|
|
const { src, label } = avatar.attributes();
|
|
|
|
const { name, avatarUrl } = mockAlerts[1].assignees.nodes[0];
|
|
|
|
|
|
|
|
expect(avatar.exists()).toBe(true);
|
|
|
|
expect(label).toBe(name);
|
|
|
|
expect(src).toBe(avatarUrl);
|
2020-06-23 00:09:42 +05:30
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
it('navigates to the detail page when alert row is clicked', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.trigger('click');
|
|
|
|
expect(visitUrl).toHaveBeenCalledWith('/1527542/details');
|
|
|
|
});
|
|
|
|
|
2020-07-28 23:09:34 +05:30
|
|
|
describe('alert issue links', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-07-28 23:09:34 +05:30
|
|
|
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');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
describe('handle date fields', () => {
|
|
|
|
it('should display time ago dates when values provided', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: {
|
2020-06-23 00:09:42 +05:30
|
|
|
alerts: {
|
|
|
|
list: [
|
|
|
|
{
|
|
|
|
iid: 1,
|
|
|
|
status: 'acknowledged',
|
|
|
|
startedAt: '2020-03-17T23:18:14.996Z',
|
|
|
|
severity: 'high',
|
|
|
|
assignees: { nodes: [] },
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
alertsCount,
|
2020-10-24 23:57:45 +05:30
|
|
|
hasError: false,
|
2020-05-24 23:13:21 +05:30
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
});
|
2020-07-28 23:09:34 +05:30
|
|
|
expect(findDateFields().length).toBe(1);
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should not display time ago dates when values not provided', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: {
|
|
|
|
alerts: [
|
|
|
|
{
|
|
|
|
iid: 1,
|
|
|
|
status: 'acknowledged',
|
|
|
|
startedAt: null,
|
|
|
|
severity: 'high',
|
|
|
|
},
|
|
|
|
],
|
2020-06-23 00:09:42 +05:30
|
|
|
alertsCount,
|
2020-10-24 23:57:45 +05:30
|
|
|
hasError: false,
|
2020-05-24 23:13:21 +05:30
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findDateFields().exists()).toBe(false);
|
|
|
|
});
|
2020-07-28 23:09:34 +05:30
|
|
|
|
|
|
|
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 },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: [newAlert] }, alertsCount, hasError: false },
|
2020-07-28 23:09:34 +05:30
|
|
|
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 },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: [oldAlert] }, alertsCount, hasError: false },
|
2020-07-28 23:09:34 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
findAlerts()
|
|
|
|
.at(0)
|
|
|
|
.classes(),
|
|
|
|
).not.toContain('new-alert');
|
|
|
|
});
|
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-06-23 00:09:42 +05:30
|
|
|
describe('sorting the alert list by column', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: {
|
|
|
|
alerts: { list: mockAlerts },
|
2020-10-24 23:57:45 +05:30
|
|
|
hasError: false,
|
2020-06-23 00:09:42 +05:30
|
|
|
sort: 'STARTED_AT_DESC',
|
|
|
|
alertsCount,
|
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
stubs: { GlTable },
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('updates sort with new direction and column key', () => {
|
|
|
|
findSeverityColumnHeader().trigger('click');
|
|
|
|
|
|
|
|
expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC');
|
|
|
|
|
|
|
|
findSeverityColumnHeader().trigger('click');
|
|
|
|
|
|
|
|
expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-05-24 23:13:21 +05:30
|
|
|
describe('updating the alert status', () => {
|
|
|
|
const iid = '1527542';
|
|
|
|
const mockUpdatedMutationResult = {
|
|
|
|
data: {
|
|
|
|
updateAlertStatus: {
|
|
|
|
errors: [],
|
|
|
|
alert: {
|
|
|
|
iid,
|
|
|
|
status: 'acknowledged',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-05-24 23:13:21 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls `$apollo.mutate` with `updateAlertStatus` mutation and variables containing `iid`, `status`, & `projectPath`', () => {
|
|
|
|
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
|
|
|
|
findFirstStatusOption().vm.$emit('click');
|
|
|
|
|
|
|
|
expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
|
|
|
|
mutation: updateAlertStatus,
|
|
|
|
variables: {
|
|
|
|
iid,
|
|
|
|
status: 'TRIGGERED',
|
|
|
|
projectPath: 'gitlab-org/gitlab',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-10-24 23:57:45 +05:30
|
|
|
describe('when a request fails', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
|
2020-07-28 23:09:34 +05:30
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
|
2020-10-24 23:57:45 +05:30
|
|
|
it('shows an error', async () => {
|
|
|
|
await selectFirstStatusOption();
|
|
|
|
|
|
|
|
expect(findAlertError().text()).toContain(
|
|
|
|
'There was an error while updating the status of the alert.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows an error when triggered a second time', async () => {
|
|
|
|
await selectFirstStatusOption();
|
|
|
|
|
|
|
|
wrapper.find(GlAlert).vm.$emit('dismiss');
|
|
|
|
|
|
|
|
await wrapper.vm.$nextTick();
|
|
|
|
|
|
|
|
// Assert that the error has been dismissed in the setup
|
|
|
|
expect(findAlertError().exists()).toBe(false);
|
|
|
|
|
|
|
|
await selectFirstStatusOption();
|
|
|
|
|
|
|
|
expect(findAlertError().exists()).toBe(true);
|
2020-07-28 23:09:34 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-10-24 23:57:45 +05:30
|
|
|
it('shows an error when response includes HTML errors', async () => {
|
2020-07-28 23:09:34 +05:30
|
|
|
const mockUpdatedMutationErrorResult = {
|
|
|
|
data: {
|
|
|
|
updateAlertStatus: {
|
|
|
|
errors: ['<span data-testid="htmlError" />'],
|
|
|
|
alert: {
|
|
|
|
iid,
|
|
|
|
status: 'acknowledged',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationErrorResult);
|
|
|
|
|
2020-10-24 23:57:45 +05:30
|
|
|
await selectFirstStatusOption();
|
|
|
|
|
|
|
|
expect(findAlertError().exists()).toBe(true);
|
2020-11-24 15:15:51 +05:30
|
|
|
expect(
|
|
|
|
findAlertError()
|
|
|
|
.find('[data-testid="htmlError"]')
|
|
|
|
.exists(),
|
|
|
|
).toBe(true);
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|
|
|
|
});
|
2020-06-23 00:09:42 +05:30
|
|
|
|
|
|
|
describe('Snowplow tracking', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(Tracking, 'event');
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount },
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should track alert status updates', () => {
|
|
|
|
Tracking.event.mockClear();
|
|
|
|
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue({});
|
|
|
|
findFirstStatusOption().vm.$emit('click');
|
|
|
|
const status = findFirstStatusOption().text();
|
|
|
|
setImmediate(() => {
|
|
|
|
const { category, action, label } = trackAlertStatusUpdateOptions;
|
|
|
|
expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property: status });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Pagination', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts, pageInfo: {} }, alertsCount, hasError: false },
|
2020-06-23 00:09:42 +05:30
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does NOT show pagination control when list is smaller than default page size', () => {
|
|
|
|
findStatusTabs().vm.$emit('input', 3);
|
2020-07-28 23:09:34 +05:30
|
|
|
return wrapper.vm.$nextTick(() => {
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findPagination().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows pagination control when list is larger than default page size', () => {
|
|
|
|
findStatusTabs().vm.$emit('input', 0);
|
2020-07-28 23:09:34 +05:30
|
|
|
return wrapper.vm.$nextTick(() => {
|
2020-06-23 00:09:42 +05:30
|
|
|
expect(findPagination().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('prevPage', () => {
|
|
|
|
it('returns prevPage number', () => {
|
|
|
|
findPagination().vm.$emit('input', 3);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.vm.prevPage).toBe(2);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns 0 when it is the first page', () => {
|
|
|
|
findPagination().vm.$emit('input', 1);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.vm.prevPage).toBe(0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('nextPage', () => {
|
|
|
|
it('returns nextPage number', () => {
|
|
|
|
findPagination().vm.$emit('input', 1);
|
|
|
|
|
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.vm.nextPage).toBe(2);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns `null` when currentPage is already last page', () => {
|
|
|
|
findStatusTabs().vm.$emit('input', 3);
|
|
|
|
findPagination().vm.$emit('input', 1);
|
|
|
|
return wrapper.vm.$nextTick(() => {
|
|
|
|
expect(wrapper.vm.nextPage).toBeNull();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-07-28 23:09:34 +05:30
|
|
|
|
|
|
|
describe('Search', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-10-24 23:57:45 +05:30
|
|
|
data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
|
2020-07-28 23:09:34 +05:30
|
|
|
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);
|
|
|
|
});
|
|
|
|
});
|
2020-05-24 23:13:21 +05:30
|
|
|
});
|