2021-09-04 01:27:46 +05:30
|
|
|
import { GlLink, GlLoadingIcon, GlTable } from '@gitlab/ui';
|
2021-01-03 14:25:43 +05:30
|
|
|
import { mount } from '@vue/test-utils';
|
|
|
|
import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
|
|
|
|
|
|
|
|
const mockAlert = {
|
|
|
|
iid: '1527542',
|
|
|
|
title: 'SyntaxError: Invalid or unexpected token',
|
|
|
|
severity: 'CRITICAL',
|
|
|
|
eventCount: 7,
|
2021-09-04 01:27:46 +05:30
|
|
|
service: 'https://gitlab.com',
|
|
|
|
// eslint-disable-next-line no-script-url
|
|
|
|
description: 'javascript:alert("XSS")',
|
2021-01-03 14:25:43 +05:30
|
|
|
createdAt: '2020-04-17T23:18:14.996Z',
|
|
|
|
startedAt: '2020-04-17T23:18:14.996Z',
|
|
|
|
endedAt: '2020-04-17T23:18:14.996Z',
|
|
|
|
status: 'TRIGGERED',
|
|
|
|
assignees: { nodes: [] },
|
|
|
|
notes: { nodes: [] },
|
|
|
|
todos: { nodes: [] },
|
|
|
|
hosts: ['host1', 'host2'],
|
|
|
|
__typename: 'AlertManagementAlert',
|
|
|
|
};
|
|
|
|
|
|
|
|
const environmentName = 'Production';
|
|
|
|
const environmentPath = '/fake/path';
|
|
|
|
|
|
|
|
describe('AlertDetails', () => {
|
|
|
|
let environmentData = { name: environmentName, path: environmentPath };
|
|
|
|
let wrapper;
|
|
|
|
|
|
|
|
function mountComponent(propsData = {}) {
|
|
|
|
wrapper = mount(AlertDetailsTable, {
|
|
|
|
propsData: {
|
|
|
|
alert: {
|
|
|
|
...mockAlert,
|
|
|
|
environment: environmentData,
|
|
|
|
},
|
|
|
|
loading: false,
|
|
|
|
...propsData,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
wrapper.destroy();
|
|
|
|
wrapper = null;
|
|
|
|
});
|
|
|
|
|
2021-09-04 01:27:46 +05:30
|
|
|
const findTableComponent = () => wrapper.findComponent(GlTable);
|
2021-01-03 14:25:43 +05:30
|
|
|
const findTableKeys = () => findTableComponent().findAll('tbody td:first-child');
|
2021-03-08 18:12:59 +05:30
|
|
|
const findTableFieldValueByKey = (fieldKey) =>
|
2021-01-03 14:25:43 +05:30
|
|
|
findTableComponent()
|
|
|
|
.findAll('tbody tr')
|
2021-03-08 18:12:59 +05:30
|
|
|
.filter((row) => row.text().includes(fieldKey))
|
2021-01-03 14:25:43 +05:30
|
|
|
.at(0)
|
|
|
|
.find('td:nth-child(2)');
|
2021-03-08 18:12:59 +05:30
|
|
|
const findTableField = (fields, fieldName) => fields.filter((row) => row.text() === fieldName);
|
2021-09-04 01:27:46 +05:30
|
|
|
const findTableLinks = () => wrapper.findAllComponents(GlLink);
|
2021-01-03 14:25:43 +05:30
|
|
|
|
|
|
|
describe('Alert details', () => {
|
|
|
|
describe('empty state', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({ alert: null });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows an empty state when no alert is provided', () => {
|
|
|
|
expect(wrapper.text()).toContain('No alert data to display.');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('loading state', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent({ loading: true });
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays a loading state when loading', () => {
|
|
|
|
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('with table data', () => {
|
2021-04-29 21:17:54 +05:30
|
|
|
describe('default', () => {
|
|
|
|
beforeEach(mountComponent);
|
|
|
|
|
|
|
|
it('renders a table', () => {
|
|
|
|
expect(findTableComponent().exists()).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders a cell based on alert data', () => {
|
|
|
|
expect(findTableComponent().text()).toContain('SyntaxError: Invalid or unexpected token');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show allowed alert fields', () => {
|
|
|
|
const fields = findTableKeys();
|
2021-09-04 01:27:46 +05:30
|
|
|
[
|
|
|
|
'Iid',
|
|
|
|
'Title',
|
|
|
|
'Severity',
|
|
|
|
'Status',
|
|
|
|
'Hosts',
|
|
|
|
'Environment',
|
|
|
|
'Service',
|
|
|
|
'Description',
|
|
|
|
].forEach((field) => {
|
2021-04-29 21:17:54 +05:30
|
|
|
expect(findTableField(fields, field).exists()).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not show disallowed alert fields', () => {
|
|
|
|
const fields = findTableKeys();
|
|
|
|
['Typename', 'Todos', 'Notes', 'Assignees'].forEach((field) => {
|
|
|
|
expect(findTableField(fields, field).exists()).toBe(false);
|
|
|
|
});
|
|
|
|
});
|
2021-09-04 01:27:46 +05:30
|
|
|
|
|
|
|
it('should render a clickable URL if safe', () => {
|
|
|
|
expect(findTableLinks().wrappers).toHaveLength(1);
|
|
|
|
expect(findTableLinks().at(0).props('isUnsafeLink')).toBe(false);
|
|
|
|
expect(findTableLinks().at(0).attributes('href')).toBe(mockAlert.service);
|
|
|
|
});
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
describe('environment', () => {
|
|
|
|
it('should display only the name for the environment', () => {
|
|
|
|
mountComponent();
|
|
|
|
expect(findTableFieldValueByKey('Environment').text()).toBe(environmentName);
|
|
|
|
});
|
2021-01-03 14:25:43 +05:30
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
it('should not display the environment row if there is not data', () => {
|
|
|
|
environmentData = { name: null, path: null };
|
|
|
|
mountComponent();
|
2021-01-03 14:25:43 +05:30
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
expect(findTableFieldValueByKey('Environment').text()).toBeFalsy();
|
|
|
|
});
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
|
2021-04-29 21:17:54 +05:30
|
|
|
describe('status', () => {
|
|
|
|
it('should show the translated status for the default statuses', () => {
|
|
|
|
mountComponent();
|
|
|
|
expect(findTableFieldValueByKey('Status').text()).toBe('Triggered');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show the translated status for provided statuses', () => {
|
|
|
|
const translatedStatus = 'Test';
|
|
|
|
mountComponent({ statuses: { TRIGGERED: translatedStatus } });
|
|
|
|
expect(findTableFieldValueByKey('Status').text()).toBe(translatedStatus);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show the provided status if value is not defined in statuses', () => {
|
|
|
|
mountComponent({ statuses: {} });
|
|
|
|
expect(findTableFieldValueByKey('Status').text()).toBe('TRIGGERED');
|
|
|
|
});
|
2021-01-03 14:25:43 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|