diff options
Diffstat (limited to 'spec/frontend/reports/components')
8 files changed, 68 insertions, 138 deletions
diff --git a/spec/frontend/reports/components/grouped_issues_list_spec.js b/spec/frontend/reports/components/grouped_issues_list_spec.js index 1172e514707..c6eebf05dd7 100644 --- a/spec/frontend/reports/components/grouped_issues_list_spec.js +++ b/spec/frontend/reports/components/grouped_issues_list_spec.js @@ -13,7 +13,7 @@ describe('Grouped Issues List', () => { }); }; - const findHeading = groupName => wrapper.find(`[data-testid="${groupName}Heading"`); + const findHeading = (groupName) => wrapper.find(`[data-testid="${groupName}Heading"`); afterEach(() => { wrapper.destroy(); @@ -37,7 +37,7 @@ describe('Grouped Issues List', () => { describe('without data', () => { beforeEach(createComponent); - it.each(['unresolved', 'resolved'])('does not a render a header for %s issues', issueName => { + it.each(['unresolved', 'resolved'])('does not a render a header for %s issues', (issueName) => { expect(findHeading(issueName).exists()).toBe(false); }); @@ -59,7 +59,7 @@ describe('Grouped Issues List', () => { expect(findHeading(groupName).text()).toBe(givenHeading); }); - it.each(['resolved', 'unresolved'])('renders all %s issues', issueName => { + it.each(['resolved', 'unresolved'])('renders all %s issues', (issueName) => { const issues = [{ name: 'foo' }, { name: 'bar' }]; createComponent({ 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 66d429017b2..492192988fb 100644 --- a/spec/frontend/reports/components/grouped_test_reports_app_spec.js +++ b/spec/frontend/reports/components/grouped_test_reports_app_spec.js @@ -22,7 +22,7 @@ describe('Grouped test reports app', () => { let wrapper; let mockStore; - const mountComponent = ({ props = { pipelinePath }, testFailureHistory = false } = {}) => { + const mountComponent = ({ props = { pipelinePath } } = {}) => { wrapper = mount(Component, { store: mockStore, localVue, @@ -31,15 +31,10 @@ describe('Grouped test reports app', () => { pipelinePath, ...props, }, - provide: { - glFeatures: { - testFailureHistory, - }, - }, }); }; - const setReports = reports => { + const setReports = (reports) => { mockStore.state.status = reports.status; mockStore.state.summary = reports.summary; mockStore.state.reports = reports.suites; @@ -232,11 +227,9 @@ describe('Grouped test reports app', () => { }); it('renders resolved errors', () => { - expect( - findAllIssueDescriptions() - .at(2) - .text(), - ).toContain(resolvedFailures.suites[0].resolved_errors[0].name); + expect(findAllIssueDescriptions().at(2).text()).toContain( + resolvedFailures.suites[0].resolved_errors[0].name, + ); }); }); @@ -244,50 +237,25 @@ describe('Grouped test reports app', () => { describe('with recent failures counts', () => { beforeEach(() => { setReports(recentFailuresTestReports); + mountComponent(); }); - describe('with feature flag enabled', () => { - beforeEach(() => { - mountComponent({ testFailureHistory: true }); - }); - - it('renders the recently failed tests summary', () => { - expect(findHeader().text()).toContain( - '2 out of 3 failed tests have failed more than once in the last 14 days', - ); - }); - - it('renders the recently failed count on the test suite', () => { - expect(findSummaryDescription().text()).toContain( - '1 out of 2 failed tests has failed more than once in the last 14 days', - ); - }); - - it('renders the recent failures count on the test case', () => { - expect(findIssueDescription().text()).toContain( - 'Failed 8 times in master in the last 14 days', - ); - }); + it('renders the recently failed tests summary', () => { + expect(findHeader().text()).toContain( + '2 out of 3 failed tests have failed more than once in the last 14 days', + ); }); - describe('with feature flag disabled', () => { - beforeEach(() => { - mountComponent({ testFailureHistory: false }); - }); - - it('does not render the recently failed tests summary', () => { - expect(findHeader().text()).not.toContain('failed more than once in the last 14 days'); - }); - - it('does not render the recently failed count on the test suite', () => { - expect(findSummaryDescription().text()).not.toContain( - 'failed more than once in the last 14 days', - ); - }); + it('renders the recently failed count on the test suite', () => { + expect(findSummaryDescription().text()).toContain( + '1 out of 2 failed tests has failed more than once in the last 14 days', + ); + }); - it('renders the recent failures count on the test case', () => { - expect(findIssueDescription().text()).not.toContain('in the last 14 days'); - }); + it('renders the recent failures count on the test case', () => { + expect(findIssueDescription().text()).toContain( + 'Failed 8 times in master in the last 14 days', + ); }); }); diff --git a/spec/frontend/reports/components/issue_status_icon_spec.js b/spec/frontend/reports/components/issue_status_icon_spec.js index 3a55ff0a9e3..8706f2f8d83 100644 --- a/spec/frontend/reports/components/issue_status_icon_spec.js +++ b/spec/frontend/reports/components/issue_status_icon_spec.js @@ -20,7 +20,7 @@ describe('IssueStatusIcon', () => { it.each([STATUS_SUCCESS, STATUS_NEUTRAL, STATUS_FAILED])( 'renders "%s" state correctly', - status => { + (status) => { createComponent({ status }); expect(wrapper.element).toMatchSnapshot(); diff --git a/spec/frontend/reports/components/modal_open_name_spec.js b/spec/frontend/reports/components/modal_open_name_spec.js deleted file mode 100644 index d59f3571c4b..00000000000 --- a/spec/frontend/reports/components/modal_open_name_spec.js +++ /dev/null @@ -1,47 +0,0 @@ -import Vue from 'vue'; -import Vuex from 'vuex'; -import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; -import component from '~/reports/components/modal_open_name.vue'; - -Vue.use(Vuex); - -describe('Modal open name', () => { - const Component = Vue.extend(component); - let vm; - - const store = new Vuex.Store({ - actions: { - openModal: () => {}, - }, - state: {}, - mutations: {}, - }); - - beforeEach(() => { - vm = mountComponentWithStore(Component, { - store, - props: { - issue: { - title: 'Issue', - }, - status: 'failed', - }, - }); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('renders the issue name', () => { - expect(vm.$el.textContent.trim()).toEqual('Issue'); - }); - - it('calls openModal actions when button is clicked', () => { - jest.spyOn(vm, 'openModal').mockImplementation(() => {}); - - vm.$el.click(); - - expect(vm.openModal).toHaveBeenCalled(); - }); -}); diff --git a/spec/frontend/reports/components/modal_spec.js b/spec/frontend/reports/components/modal_spec.js index ff046e64b6e..39b84d1ee05 100644 --- a/spec/frontend/reports/components/modal_spec.js +++ b/spec/frontend/reports/components/modal_spec.js @@ -1,54 +1,63 @@ -import Vue from 'vue'; -import component from '~/reports/components/modal.vue'; +import { GlLink, GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; + +import CodeBlock from '~/vue_shared/components/code_block.vue'; +import ReportsModal from '~/reports/components/modal.vue'; import state from '~/reports/store/state'; -import mountComponent from '../../helpers/vue_mount_component_helper'; -import { trimText } from '../../helpers/text_helper'; + +const StubbedGlModal = { template: '<div><slot></slot></div>', name: 'GlModal', props: ['title'] }; describe('Grouped Test Reports Modal', () => { - const Component = Vue.extend(component); const modalDataStructure = state().modal.data; + const title = 'Test#sum when a is 1 and b is 2 returns summary'; // populate data modalDataStructure.execution_time.value = 0.009411; modalDataStructure.system_output.value = 'Failure/Error: is_expected.to eq(3)\n\n'; modalDataStructure.class.value = 'link'; - let vm; + let wrapper; beforeEach(() => { - vm = mountComponent(Component, { - title: 'Test#sum when a is 1 and b is 2 returns summary', - modalData: modalDataStructure, - }); + wrapper = extendedWrapper( + shallowMount(ReportsModal, { + propsData: { + title, + modalData: modalDataStructure, + visible: true, + }, + stubs: { GlModal: StubbedGlModal, GlSprintf }, + }), + ); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders code block', () => { - expect(vm.$el.querySelector('code').textContent).toEqual( - modalDataStructure.system_output.value, - ); + expect(wrapper.find(CodeBlock).props().code).toEqual(modalDataStructure.system_output.value); }); it('renders link', () => { - expect(vm.$el.querySelector('.js-modal-link').getAttribute('href')).toEqual( - modalDataStructure.class.value, - ); + const link = wrapper.findComponent(GlLink); - expect(trimText(vm.$el.querySelector('.js-modal-link').textContent)).toEqual( - modalDataStructure.class.value, - ); + expect(link.attributes().href).toEqual(modalDataStructure.class.value); + + expect(link.text()).toEqual(modalDataStructure.class.value); }); it('renders seconds', () => { - expect(vm.$el.textContent).toContain(`${modalDataStructure.execution_time.value} s`); + expect(wrapper.text()).toContain(`${modalDataStructure.execution_time.value} s`); }); it('render title', () => { - expect(trimText(vm.$el.querySelector('.modal-title').textContent)).toEqual( - 'Test#sum when a is 1 and b is 2 returns summary', - ); + expect(wrapper.findComponent(StubbedGlModal).props().title).toEqual(title); + }); + + it('re-emits hide event', () => { + wrapper.findComponent(StubbedGlModal).vm.$emit('hide'); + expect(wrapper.emitted().hide).toEqual([[]]); }); }); diff --git a/spec/frontend/reports/components/report_link_spec.js b/spec/frontend/reports/components/report_link_spec.js index f879899e9c5..fc21515ded6 100644 --- a/spec/frontend/reports/components/report_link_spec.js +++ b/spec/frontend/reports/components/report_link_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; import component from '~/reports/components/report_link.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; describe('report link', () => { let vm; diff --git a/spec/frontend/reports/components/report_section_spec.js b/spec/frontend/reports/components/report_section_spec.js index 2d228313a9b..c3219b34057 100644 --- a/spec/frontend/reports/components/report_section_spec.js +++ b/spec/frontend/reports/components/report_section_spec.js @@ -29,7 +29,7 @@ describe('Report section', () => { alwaysOpen: false, }; - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(reportSection, { propsData: { ...defaultProps, @@ -67,7 +67,7 @@ describe('Report section', () => { const issues = hasIssues ? 'has issues' : 'has no issues'; const open = alwaysOpen ? 'is always open' : 'is not always open'; - it(`is ${isCollapsible}, if the report ${issues} and ${open}`, done => { + it(`is ${isCollapsible}, if the report ${issues} and ${open}`, (done) => { vm.hasIssues = hasIssues; vm.alwaysOpen = alwaysOpen; @@ -93,7 +93,7 @@ describe('Report section', () => { const issues = isCollapsed ? 'is collapsed' : 'is not collapsed'; const open = alwaysOpen ? 'is always open' : 'is not always open'; - it(`is ${isExpanded}, if the report ${issues} and ${open}`, done => { + it(`is ${isExpanded}, if the report ${issues} and ${open}`, (done) => { vm.isCollapsed = isCollapsed; vm.alwaysOpen = alwaysOpen; @@ -144,7 +144,7 @@ describe('Report section', () => { describe('toggleCollapsed', () => { const hiddenCss = { display: 'none' }; - it('toggles issues', done => { + it('toggles issues', (done) => { vm.$el.querySelector('button').click(); Vue.nextTick() @@ -163,7 +163,7 @@ describe('Report section', () => { .catch(done.fail); }); - it('is always expanded, if always-open is set to true', done => { + it('is always expanded, if always-open is set to true', (done) => { vm.alwaysOpen = true; Vue.nextTick() .then(() => { @@ -177,7 +177,7 @@ describe('Report section', () => { }); describe('snowplow events', () => { - it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', done => { + 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(); @@ -192,7 +192,7 @@ describe('Report section', () => { .catch(done.fail); }); - it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', done => { + 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(); @@ -207,7 +207,7 @@ describe('Report section', () => { .catch(done.fail); }); - it('does not emit an event if always-open is set to true', done => { + it('does not emit an event if always-open is set to true', (done) => { createComponent({ alwaysOpen: true, hasIssues: true, shouldEmitToggleEvent: true }); wrapper.vm @@ -259,7 +259,7 @@ describe('Report section', () => { }); describe('Success and Error slots', () => { - const createComponentWithSlots = status => { + const createComponentWithSlots = (status) => { vm = mountComponentWithSlots(ReportSection, { props: { status, diff --git a/spec/frontend/reports/components/test_issue_body_spec.js b/spec/frontend/reports/components/test_issue_body_spec.js index ff81020a4eb..c13a3599fef 100644 --- a/spec/frontend/reports/components/test_issue_body_spec.js +++ b/spec/frontend/reports/components/test_issue_body_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; +import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { trimText } from 'helpers/text_helper'; import component from '~/reports/components/test_issue_body.vue'; import createStore from '~/reports/store'; -import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper'; -import { trimText } from '../../helpers/text_helper'; import { issue } from '../mock_data/mock_data'; describe('Test Issue body', () => { |