1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import { GlTab } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import merge from 'lodash/merge';
import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
import DescriptionComponent from '~/issues/show/components/description.vue';
import HighlightBar from '~/issues/show/components/incidents/highlight_bar.vue';
import IncidentTabs from '~/issues/show/components/incidents/incident_tabs.vue';
import TimelineTab from '~/issues/show/components/incidents/timeline_events_tab.vue';
import INVALID_URL from '~/lib/utils/invalid_url';
import Tracking from '~/tracking';
import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
import { descriptionProps } from '../../mock_data/mock_data';
const mockAlert = {
__typename: 'AlertManagementAlert',
detailsUrl: INVALID_URL,
iid: '1',
};
describe('Incident Tabs component', () => {
let wrapper;
const mountComponent = (data = {}, options = {}) => {
wrapper = shallowMount(
IncidentTabs,
merge(
{
propsData: {
...descriptionProps,
},
stubs: {
DescriptionComponent: true,
MetricsTab: true,
},
provide: {
fullPath: '',
iid: '',
projectId: '',
issuableId: '',
uploadMetricsFeatureAvailable: true,
glFeatures: { incidentTimeline: true },
},
data() {
return { alert: mockAlert, ...data };
},
mocks: {
$apollo: {
queries: {
alert: {
loading: true,
},
timelineEvents: {
loading: false,
},
},
},
},
},
options,
),
);
};
const findTabs = () => wrapper.findAll(GlTab);
const findSummaryTab = () => findTabs().at(0);
const findAlertDetailsTab = () => wrapper.find('[data-testid="alert-details-tab"]');
const findAlertDetailsComponent = () => wrapper.find(AlertDetailsTable);
const findDescriptionComponent = () => wrapper.find(DescriptionComponent);
const findHighlightBarComponent = () => wrapper.find(HighlightBar);
const findTimelineTab = () => wrapper.findComponent(TimelineTab);
describe('empty state', () => {
beforeEach(() => {
mountComponent({ alert: null });
});
it('does not show the alert details tab', () => {
expect(findAlertDetailsComponent().exists()).toBe(false);
});
});
describe('with an alert present', () => {
beforeEach(() => {
mountComponent();
});
it('renders the summary tab', () => {
expect(findSummaryTab().exists()).toBe(true);
expect(findSummaryTab().attributes('title')).toBe('Summary');
});
it('renders the alert details tab', () => {
expect(findAlertDetailsTab().exists()).toBe(true);
expect(findAlertDetailsTab().attributes('title')).toBe('Alert details');
});
it('renders the alert details table with the correct props', () => {
const alert = { iid: mockAlert.iid };
expect(findAlertDetailsComponent().props('alert')).toMatchObject(alert);
expect(findAlertDetailsComponent().props('loading')).toBe(true);
});
it('renders the description component with highlight bar', () => {
expect(findDescriptionComponent().exists()).toBe(true);
expect(findHighlightBarComponent().exists()).toBe(true);
});
it('renders the highlight bar component with the correct props', () => {
const alert = { detailsUrl: mockAlert.detailsUrl };
expect(findHighlightBarComponent().props('alert')).toMatchObject(alert);
});
it('passes all props to the description component', () => {
expect(findDescriptionComponent().props()).toMatchObject(descriptionProps);
});
});
describe('Snowplow tracking', () => {
beforeEach(() => {
jest.spyOn(Tracking, 'event');
mountComponent();
});
it('should track incident details views', () => {
const { category, action } = trackIncidentDetailsViewsOptions;
expect(Tracking.event).toHaveBeenCalledWith(category, action);
});
});
describe('incident timeline tab', () => {
beforeEach(() => {
mountComponent();
});
it('renders the timeline tab when feature flag is enabled', () => {
expect(findTimelineTab().exists()).toBe(true);
});
it('does not render timeline tab when feature flag is disabled', () => {
mountComponent({}, { provide: { glFeatures: { incidentTimeline: false } } });
expect(findTimelineTab().exists()).toBe(false);
});
});
});
|
