2020-04-24 18:09:46 +00:00
|
|
|
import { mount } from '@vue/test-utils';
|
2020-05-07 15:09:29 +00:00
|
|
|
import {
|
|
|
|
GlEmptyState,
|
|
|
|
GlTable,
|
|
|
|
GlAlert,
|
|
|
|
GlLoadingIcon,
|
2020-05-13 18:08:47 +00:00
|
|
|
GlDropdown,
|
2020-05-14 00:07:47 +00:00
|
|
|
GlIcon,
|
2020-05-07 15:09:29 +00:00
|
|
|
GlTab,
|
2020-05-13 18:08:47 +00:00
|
|
|
GlDropdownItem,
|
2020-05-07 15:09:29 +00:00
|
|
|
} from '@gitlab/ui';
|
2020-05-11 09:09:45 +00:00
|
|
|
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
|
2020-05-13 18:08:47 +00:00
|
|
|
import createFlash from '~/flash';
|
2020-04-21 15:21:10 +00:00
|
|
|
import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
|
2020-05-07 15:09:29 +00:00
|
|
|
import { ALERTS_STATUS_TABS } from '../../../../app/assets/javascripts/alert_management/constants';
|
2020-05-13 18:08:47 +00:00
|
|
|
import updateAlertStatus from '~/alert_management/graphql/mutations/update_alert_status.graphql';
|
2020-04-30 12:09:45 +00:00
|
|
|
import mockAlerts from '../mocks/alerts.json';
|
|
|
|
|
2020-05-13 18:08:47 +00:00
|
|
|
jest.mock('~/flash');
|
|
|
|
|
2020-04-21 15:21:10 +00:00
|
|
|
describe('AlertManagementList', () => {
|
|
|
|
let wrapper;
|
2020-04-24 09:09:44 +00:00
|
|
|
|
|
|
|
const findAlertsTable = () => wrapper.find(GlTable);
|
2020-04-30 12:09:45 +00:00
|
|
|
const findAlerts = () => wrapper.findAll('table tbody tr');
|
2020-04-24 09:09:44 +00:00
|
|
|
const findAlert = () => wrapper.find(GlAlert);
|
2020-04-24 18:09:46 +00:00
|
|
|
const findLoader = () => wrapper.find(GlLoadingIcon);
|
2020-05-13 18:08:47 +00:00
|
|
|
const findStatusDropdown = () => wrapper.find(GlDropdown);
|
2020-05-07 15:09:29 +00:00
|
|
|
const findStatusFilterTabs = () => wrapper.findAll(GlTab);
|
2020-05-11 09:09:45 +00:00
|
|
|
const findDateFields = () => wrapper.findAll(TimeAgo);
|
2020-05-13 18:08:47 +00:00
|
|
|
const findFirstStatusOption = () => findStatusDropdown().find(GlDropdownItem);
|
2020-05-14 00:07:47 +00:00
|
|
|
const findSeverityFields = () => wrapper.findAll('[data-testid="severityField"]');
|
2020-04-21 15:21:10 +00:00
|
|
|
|
2020-04-24 18:09:46 +00:00
|
|
|
function mountComponent({
|
2020-04-27 18:09:41 +00:00
|
|
|
props = {
|
|
|
|
alertManagementEnabled: false,
|
|
|
|
userCanEnableAlertManagement: false,
|
|
|
|
},
|
2020-04-24 18:09:46 +00:00
|
|
|
data = {},
|
|
|
|
loading = false,
|
2020-05-07 15:09:29 +00:00
|
|
|
alertListStatusFilteringEnabled = false,
|
|
|
|
stubs = {},
|
2020-04-24 18:09:46 +00:00
|
|
|
} = {}) {
|
2020-04-21 15:21:10 +00:00
|
|
|
wrapper = mount(AlertManagementList, {
|
|
|
|
propsData: {
|
2020-04-30 12:09:45 +00:00
|
|
|
projectPath: 'gitlab-org/gitlab',
|
2020-04-21 15:21:10 +00:00
|
|
|
enableAlertManagementPath: '/link',
|
|
|
|
emptyAlertSvgPath: 'illustration/path',
|
2020-04-24 18:09:46 +00:00
|
|
|
...props,
|
|
|
|
},
|
2020-05-07 15:09:29 +00:00
|
|
|
provide: {
|
|
|
|
glFeatures: { alertListStatusFilteringEnabled },
|
|
|
|
},
|
2020-04-24 18:09:46 +00:00
|
|
|
data() {
|
|
|
|
return data;
|
|
|
|
},
|
|
|
|
mocks: {
|
|
|
|
$apollo: {
|
2020-05-13 18:08:47 +00:00
|
|
|
mutate: jest.fn(),
|
2020-04-24 18:09:46 +00:00
|
|
|
queries: {
|
|
|
|
alerts: {
|
|
|
|
loading,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2020-04-21 15:21:10 +00:00
|
|
|
},
|
2020-05-07 15:09:29 +00:00
|
|
|
stubs,
|
2020-04-21 15:21:10 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-04-24 09:09:44 +00:00
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent();
|
|
|
|
});
|
|
|
|
|
2020-04-21 15:21:10 +00:00
|
|
|
afterEach(() => {
|
|
|
|
if (wrapper) {
|
|
|
|
wrapper.destroy();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('alert management feature renders empty state', () => {
|
|
|
|
it('shows empty state', () => {
|
|
|
|
expect(wrapper.find(GlEmptyState).exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
2020-04-24 09:09:44 +00:00
|
|
|
|
2020-05-07 15:09:29 +00:00
|
|
|
describe('Status Filter Tabs', () => {
|
|
|
|
describe('alertListStatusFilteringEnabled feature flag enabled', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts },
|
|
|
|
loading: false,
|
|
|
|
alertListStatusFilteringEnabled: true,
|
|
|
|
stubs: {
|
|
|
|
GlTab: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should display filter tabs for all statuses', () => {
|
|
|
|
const tabs = findStatusFilterTabs().wrappers;
|
|
|
|
tabs.forEach((tab, i) => {
|
|
|
|
expect(tab.text()).toContain(ALERTS_STATUS_TABS[i].title);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('alertListStatusFilteringEnabled feature flag disabled', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts },
|
|
|
|
loading: false,
|
|
|
|
alertListStatusFilteringEnabled: false,
|
|
|
|
stubs: {
|
|
|
|
GlTab: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should NOT display tabs', () => {
|
|
|
|
expect(findStatusFilterTabs()).not.toExist();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-04-24 09:09:44 +00:00
|
|
|
describe('Alerts table', () => {
|
2020-04-24 18:09:46 +00:00
|
|
|
it('loading state', () => {
|
|
|
|
mountComponent({
|
2020-04-27 18:09:41 +00:00
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-04-24 18:09:46 +00:00
|
|
|
data: { alerts: null },
|
|
|
|
loading: true,
|
|
|
|
});
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findLoader().exists()).toBe(true);
|
|
|
|
});
|
2020-04-24 09:09:44 +00:00
|
|
|
|
2020-04-24 18:09:46 +00:00
|
|
|
it('error state', () => {
|
|
|
|
mountComponent({
|
2020-04-27 18:09:41 +00:00
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-04-24 18:09:46 +00:00
|
|
|
data: { alerts: null, errored: true },
|
|
|
|
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-04-24 09:09:44 +00:00
|
|
|
|
2020-04-24 18:09:46 +00:00
|
|
|
it('empty state', () => {
|
|
|
|
mountComponent({
|
2020-04-27 18:09:41 +00:00
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
2020-04-24 18:09:46 +00:00
|
|
|
data: { alerts: [], errored: false },
|
|
|
|
loading: false,
|
2020-04-24 09:09:44 +00:00
|
|
|
});
|
2020-04-24 18:09:46 +00:00
|
|
|
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-04-24 09:09:44 +00:00
|
|
|
});
|
2020-04-30 12:09:45 +00:00
|
|
|
|
|
|
|
it('has data state', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts, errored: false },
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findLoader().exists()).toBe(false);
|
|
|
|
expect(findAlertsTable().exists()).toBe(true);
|
|
|
|
expect(findAlerts()).toHaveLength(mockAlerts.length);
|
|
|
|
});
|
2020-05-04 06:10:10 +00:00
|
|
|
|
|
|
|
it('displays status dropdown', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts, errored: false },
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findStatusDropdown().exists()).toBe(true);
|
|
|
|
});
|
2020-05-05 12:09:31 +00:00
|
|
|
|
2020-05-14 00:07:47 +00:00
|
|
|
it('shows correct severity icons', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts, errored: false },
|
|
|
|
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 },
|
|
|
|
data: { alerts: mockAlerts, errored: false },
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(
|
|
|
|
findSeverityFields()
|
|
|
|
.at(0)
|
|
|
|
.text(),
|
|
|
|
).toBe('Critical');
|
|
|
|
});
|
|
|
|
|
2020-05-11 09:09:45 +00:00
|
|
|
describe('handle date fields', () => {
|
|
|
|
it('should display time ago dates when values provided', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: {
|
|
|
|
alerts: [
|
|
|
|
{
|
|
|
|
iid: 1,
|
2020-05-13 18:08:47 +00:00
|
|
|
status: 'acknowledged',
|
2020-05-11 09:09:45 +00:00
|
|
|
startedAt: '2020-03-17T23:18:14.996Z',
|
|
|
|
endedAt: '2020-04-17T23:18:14.996Z',
|
2020-05-14 00:07:47 +00:00
|
|
|
severity: 'high',
|
2020-05-11 09:09:45 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
errored: false,
|
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findDateFields().length).toBe(2);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not display time ago dates when values not provided', () => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: {
|
|
|
|
alerts: [
|
|
|
|
{
|
|
|
|
iid: 1,
|
2020-05-13 18:08:47 +00:00
|
|
|
status: 'acknowledged',
|
2020-05-11 09:09:45 +00:00
|
|
|
startedAt: null,
|
|
|
|
endedAt: null,
|
2020-05-14 00:07:47 +00:00
|
|
|
severity: 'high',
|
2020-05-11 09:09:45 +00:00
|
|
|
},
|
|
|
|
],
|
|
|
|
errored: false,
|
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
});
|
|
|
|
expect(findDateFields().exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
2020-04-24 09:09:44 +00:00
|
|
|
});
|
2020-05-13 18:08:47 +00:00
|
|
|
|
|
|
|
describe('updating the alert status', () => {
|
|
|
|
const iid = '1527542';
|
|
|
|
const mockUpdatedMutationResult = {
|
|
|
|
data: {
|
|
|
|
updateAlertStatus: {
|
|
|
|
errors: [],
|
|
|
|
alert: {
|
|
|
|
iid,
|
|
|
|
status: 'acknowledged',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({
|
|
|
|
props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
|
|
|
|
data: { alerts: mockAlerts, errored: false },
|
|
|
|
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',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('calls `createFlash` when request fails', () => {
|
|
|
|
jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));
|
|
|
|
findFirstStatusOption().vm.$emit('click');
|
|
|
|
|
|
|
|
setImmediate(() => {
|
|
|
|
expect(createFlash).toHaveBeenCalledWith(
|
|
|
|
'There was an error while updating the status of the alert. Please try again.',
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-04-21 15:21:10 +00:00
|
|
|
});
|