diff options
Diffstat (limited to 'spec/frontend/reports/components/report_section_spec.js')
-rw-r--r-- | spec/frontend/reports/components/report_section_spec.js | 102 |
1 files changed, 81 insertions, 21 deletions
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'); |