diff options
Diffstat (limited to 'spec/frontend/issue_show')
3 files changed, 73 insertions, 26 deletions
diff --git a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js b/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js index 8d50df5e406..c1ab4433761 100644 --- a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js +++ b/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import merge from 'lodash/merge'; import { GlLink } from '@gitlab/ui'; import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue'; import { formatDate } from '~/lib/utils/datetime_utility'; @@ -9,18 +10,24 @@ describe('Highlight Bar', () => { let wrapper; const alert = { + iid: 1, startedAt: '2020-05-29T10:39:22Z', detailsUrl: 'http://127.0.0.1:3000/root/unique-alerts/-/alert_management/1/details', eventCount: 1, title: 'Alert 1', }; - const mountComponent = () => { - wrapper = shallowMount(HighlightBar, { - propsData: { - alert, - }, - }); + const mountComponent = options => { + wrapper = shallowMount( + HighlightBar, + merge( + { + propsData: { alert }, + provide: { fullPath: 'test', iid: 1, slaFeatureAvailable: true }, + }, + options, + ), + ); }; beforeEach(() => { @@ -36,21 +43,52 @@ describe('Highlight Bar', () => { const findLink = () => wrapper.find(GlLink); - it('renders a link to the alert page', () => { - expect(findLink().exists()).toBe(true); - expect(findLink().attributes('href')).toBe(alert.detailsUrl); - expect(findLink().text()).toContain(alert.title); + describe('empty state', () => { + beforeEach(() => { + mountComponent({ propsData: { alert: null } }); + }); + + it('renders a empty component', () => { + expect(wrapper.isVisible()).toBe(false); + }); }); - it('renders formatted start time of the alert', () => { - const formattedDate = '2020-05-29 UTC'; - formatDate.mockReturnValueOnce(formattedDate); - mountComponent(); - expect(formatDate).toHaveBeenCalledWith(alert.startedAt, 'yyyy-mm-dd Z'); - expect(wrapper.text()).toContain(formattedDate); + describe('alert present', () => { + beforeEach(() => { + mountComponent(); + }); + + it('renders a link to the alert page', () => { + expect(findLink().exists()).toBe(true); + expect(findLink().attributes('href')).toBe(alert.detailsUrl); + expect(findLink().attributes('title')).toBe(alert.title); + expect(findLink().text()).toBe(`#${alert.iid}`); + }); + + it('renders formatted start time of the alert', () => { + const formattedDate = '2020-05-29 UTC'; + formatDate.mockReturnValueOnce(formattedDate); + mountComponent(); + expect(formatDate).toHaveBeenCalledWith(alert.startedAt, 'yyyy-mm-dd Z'); + expect(wrapper.text()).toContain(formattedDate); + }); + + it('renders a number of alert events', () => { + expect(wrapper.text()).toContain(alert.eventCount); + }); }); - it('renders a number of alert events', () => { - expect(wrapper.text()).toContain(alert.eventCount); + describe('when child data is present', () => { + beforeEach(() => { + mountComponent({ + data() { + return { hasChildData: true }; + }, + }); + }); + + it('renders the highlight bar component', () => { + expect(wrapper.isVisible()).toBe(true); + }); }); }); diff --git a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js index a51b497cd79..c6200fd69bf 100644 --- a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js +++ b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js @@ -6,6 +6,8 @@ import { descriptionProps } from '../../mock_data'; import DescriptionComponent from '~/issue_show/components/description.vue'; import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue'; import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; +import Tracking from '~/tracking'; +import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; const mockAlert = { __typename: 'AlertManagementAlert', @@ -57,7 +59,6 @@ describe('Incident Tabs component', () => { it('does not show the alert details tab', () => { expect(findAlertDetailsComponent().exists()).toBe(false); - expect(findHighlightBarComponent().exists()).toBe(false); }); }); @@ -79,7 +80,7 @@ describe('Incident Tabs component', () => { it('renders the alert details table with the correct props', () => { const alert = { iid: mockAlert.iid }; - expect(findAlertDetailsComponent().props('alert')).toEqual(alert); + expect(findAlertDetailsComponent().props('alert')).toMatchObject(alert); expect(findAlertDetailsComponent().props('loading')).toBe(true); }); @@ -98,4 +99,16 @@ describe('Incident Tabs 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); + }); + }); }); diff --git a/spec/frontend/issue_show/issue_spec.js b/spec/frontend/issue_show/issue_spec.js index befb670c6cd..c0175e774a2 100644 --- a/spec/frontend/issue_show/issue_spec.js +++ b/spec/frontend/issue_show/issue_spec.js @@ -14,12 +14,8 @@ useMockIntersectionObserver(); jest.mock('~/lib/utils/poll'); const setupHTML = initialData => { - document.body.innerHTML = ` - <div id="js-issuable-app"></div> - <script id="js-issuable-app-initial-data" type="application/json"> - ${JSON.stringify(initialData)} - </script> - `; + document.body.innerHTML = `<div id="js-issuable-app"></div>`; + document.getElementById('js-issuable-app').dataset.initial = JSON.stringify(initialData); }; describe('Issue show index', () => { |