diff options
Diffstat (limited to 'spec/frontend/reports/components')
3 files changed, 155 insertions, 35 deletions
diff --git a/spec/frontend/reports/components/grouped_test_reports_app_spec.js b/spec/frontend/reports/components/grouped_test_reports_app_spec.js index 6a402277f52..017e0335569 100644 --- a/spec/frontend/reports/components/grouped_test_reports_app_spec.js +++ b/spec/frontend/reports/components/grouped_test_reports_app_spec.js @@ -15,20 +15,29 @@ localVue.use(Vuex); describe('Grouped test reports app', () => { const endpoint = 'endpoint.json'; + const pipelinePath = '/path/to/pipeline'; const Component = localVue.extend(GroupedTestReportsApp); let wrapper; let mockStore; - const mountComponent = () => { + const mountComponent = ({ + glFeatures = { junitPipelineView: false }, + props = { pipelinePath }, + } = {}) => { wrapper = mount(Component, { store: mockStore, localVue, propsData: { endpoint, + pipelinePath, + ...props, }, methods: { fetchReports: () => {}, }, + provide: { + glFeatures, + }, }); }; @@ -39,6 +48,7 @@ describe('Grouped test reports app', () => { }; const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]'); + const findFullTestReportLink = () => wrapper.find('[data-testid="group-test-reports-full-link"]'); const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]'); const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]'); const findAllIssueDescriptions = () => @@ -67,6 +77,39 @@ describe('Grouped test reports app', () => { }); }); + describe('`View full report` button', () => { + it('should not render the full test report link', () => { + expect(findFullTestReportLink().exists()).toBe(false); + }); + + describe('With junitPipelineView feature flag enabled', () => { + beforeEach(() => { + mountComponent({ glFeatures: { junitPipelineView: true } }); + }); + + it('should render the full test report link', () => { + const fullTestReportLink = findFullTestReportLink(); + + expect(fullTestReportLink.exists()).toBe(true); + expect(pipelinePath).not.toBe(''); + expect(fullTestReportLink.attributes('href')).toBe(`${pipelinePath}/test_report`); + }); + }); + + describe('Without a pipelinePath', () => { + beforeEach(() => { + mountComponent({ + glFeatures: { junitPipelineView: true }, + props: { pipelinePath: '' }, + }); + }); + + it('should not render the full test report link', () => { + expect(findFullTestReportLink().exists()).toBe(false); + }); + }); + }); + describe('with new failed result', () => { beforeEach(() => { setReports(newFailedTestReports); diff --git a/spec/frontend/reports/components/report_section_spec.js b/spec/frontend/reports/components/report_section_spec.js index eaeb074acaf..a620b5d9afc 100644 --- a/spec/frontend/reports/components/report_section_spec.js +++ b/spec/frontend/reports/components/report_section_spec.js @@ -1,9 +1,11 @@ import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper'; import reportSection from '~/reports/components/report_section.vue'; describe('Report section', () => { let vm; + let wrapper; const ReportSection = Vue.extend(reportSection); const resolvedIssues = [ @@ -16,22 +18,41 @@ describe('Report section', () => { }, ]; + const defaultProps = { + component: '', + status: 'SUCCESS', + loadingText: 'Loading codeclimate report', + errorText: 'foo', + successText: 'Code quality improved on 1 point and degraded on 1 point', + resolvedIssues, + hasIssues: false, + alwaysOpen: false, + }; + + const createComponent = props => { + wrapper = shallowMount(reportSection, { + propsData: { + ...defaultProps, + ...props, + }, + }); + return wrapper; + }; + afterEach(() => { - vm.$destroy(); + if (vm) { + vm.$destroy(); + vm = null; + } + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } }); describe('computed', () => { beforeEach(() => { - vm = mountComponent(ReportSection, { - component: '', - status: 'SUCCESS', - loadingText: 'Loading codeclimate report', - errorText: 'foo', - successText: 'Code quality improved on 1 point and degraded on 1 point', - resolvedIssues, - hasIssues: false, - alwaysOpen: false, - }); + vm = mountComponent(ReportSection, defaultProps); }); describe('isCollapsible', () => { @@ -105,12 +126,7 @@ describe('Report section', () => { describe('with success status', () => { beforeEach(() => { vm = mountComponent(ReportSection, { - component: '', - status: 'SUCCESS', - loadingText: 'Loading codeclimate report', - errorText: 'foo', - successText: 'Code quality improved on 1 point and degraded on 1 point', - resolvedIssues, + ...defaultProps, hasIssues: true, }); }); @@ -160,6 +176,50 @@ describe('Report section', () => { }); }); + describe('snowplow events', () => { + it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', done => { + createComponent({ hasIssues: true, shouldEmitToggleEvent: true }); + + expect(wrapper.emitted().toggleEvent).toBeUndefined(); + + wrapper.vm.$el.querySelector('button').click(); + return wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.emitted().toggleEvent).toHaveLength(1); + }) + .then(done) + .catch(done.fail); + }); + + it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', done => { + createComponent({ hasIssues: true }); + + expect(wrapper.emitted().toggleEvent).toBeUndefined(); + + wrapper.vm.$el.querySelector('button').click(); + return wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.emitted().toggleEvent).toBeUndefined(); + }) + .then(done) + .catch(done.fail); + }); + + it('does not emit an event if always-open is set to true', done => { + createComponent({ alwaysOpen: true, hasIssues: true, shouldEmitToggleEvent: true }); + + wrapper.vm + .$nextTick() + .then(() => { + expect(wrapper.emitted().toggleEvent).toBeUndefined(); + }) + .then(done) + .catch(done.fail); + }); + }); + describe('with failed request', () => { it('should render error indicator', () => { vm = mountComponent(ReportSection, { @@ -199,7 +259,7 @@ describe('Report section', () => { }); describe('Success and Error slots', () => { - const createComponent = status => { + const createComponentWithSlots = status => { vm = mountComponentWithSlots(ReportSection, { props: { status, @@ -214,7 +274,7 @@ describe('Report section', () => { }; it('only renders success slot when status is "SUCCESS"', () => { - createComponent('SUCCESS'); + createComponentWithSlots('SUCCESS'); expect(vm.$el.textContent.trim()).toContain('This is a success'); expect(vm.$el.textContent.trim()).not.toContain('This is an error'); @@ -222,7 +282,7 @@ describe('Report section', () => { }); it('only renders error slot when status is "ERROR"', () => { - createComponent('ERROR'); + createComponentWithSlots('ERROR'); expect(vm.$el.textContent.trim()).toContain('This is an error'); expect(vm.$el.textContent.trim()).not.toContain('This is a success'); @@ -230,7 +290,7 @@ describe('Report section', () => { }); it('only renders loading slot when status is "LOADING"', () => { - createComponent('LOADING'); + createComponentWithSlots('LOADING'); expect(vm.$el.textContent.trim()).toContain('This is loading'); expect(vm.$el.textContent.trim()).not.toContain('This is an error'); diff --git a/spec/frontend/reports/components/summary_row_spec.js b/spec/frontend/reports/components/summary_row_spec.js index cb0cc025e80..85c68ed069b 100644 --- a/spec/frontend/reports/components/summary_row_spec.js +++ b/spec/frontend/reports/components/summary_row_spec.js @@ -1,10 +1,8 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import component from '~/reports/components/summary_row.vue'; +import { mount } from '@vue/test-utils'; +import SummaryRow from '~/reports/components/summary_row.vue'; describe('Summary row', () => { - const Component = Vue.extend(component); - let vm; + let wrapper; const props = { summary: 'SAST detected 1 new vulnerability and 1 fixed vulnerability', @@ -15,23 +13,42 @@ describe('Summary row', () => { statusIcon: 'warning', }; - beforeEach(() => { - vm = mountComponent(Component, props); - }); + const createComponent = ({ propsData = {}, slots = {} } = {}) => { + wrapper = mount(SummaryRow, { + propsData: { + ...props, + ...propsData, + }, + slots, + }); + }; + + const findSummary = () => wrapper.find('.report-block-list-issue-description-text'); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); + wrapper = null; }); it('renders provided summary', () => { - expect( - vm.$el.querySelector('.report-block-list-issue-description-text').textContent.trim(), - ).toEqual(props.summary); + createComponent(); + expect(findSummary().text()).toEqual(props.summary); }); it('renders provided icon', () => { - expect(vm.$el.querySelector('.report-block-list-icon span').classList).toContain( + createComponent(); + expect(wrapper.find('.report-block-list-icon span').classes()).toContain( 'js-ci-status-icon-warning', ); }); + + describe('summary slot', () => { + it('replaces the summary prop', () => { + const summarySlotContent = 'Summary slot content'; + createComponent({ slots: { summary: summarySlotContent } }); + + expect(wrapper.text()).not.toContain(props.summary); + expect(findSummary().text()).toEqual(summarySlotContent); + }); + }); }); |