diff options
Diffstat (limited to 'spec/frontend/reports')
| -rw-r--r-- | spec/frontend/reports/components/grouped_test_reports_app_spec.js | 320 | ||||
| -rw-r--r-- | spec/frontend/reports/mock_data/new_errors_report.json | 20 |
2 files changed, 147 insertions, 193 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 1a01db391da..6a402277f52 100644 --- a/spec/frontend/reports/components/grouped_test_reports_app_spec.js +++ b/spec/frontend/reports/components/grouped_test_reports_app_spec.js @@ -1,260 +1,214 @@ -import Vue from 'vue'; -import MockAdapter from 'axios-mock-adapter'; -import axios from '~/lib/utils/axios_utils'; -import state from '~/reports/store/state'; -import component from '~/reports/components/grouped_test_reports_app.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; +import { mount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; +import GroupedTestReportsApp from '~/reports/components/grouped_test_reports_app.vue'; +import store from '~/reports/store'; + import { failedReport } from '../mock_data/mock_data'; +import successTestReports from '../mock_data/no_failures_report.json'; import newFailedTestReports from '../mock_data/new_failures_report.json'; import newErrorsTestReports from '../mock_data/new_errors_report.json'; -import successTestReports from '../mock_data/no_failures_report.json'; import mixedResultsTestReports from '../mock_data/new_and_fixed_failures_report.json'; import resolvedFailures from '../mock_data/resolved_failures.json'; -describe('Grouped Test Reports App', () => { - let vm; - let mock; - const Component = Vue.extend(component); +const localVue = createLocalVue(); +localVue.use(Vuex); + +describe('Grouped test reports app', () => { + const endpoint = 'endpoint.json'; + const Component = localVue.extend(GroupedTestReportsApp); + let wrapper; + let mockStore; + + const mountComponent = () => { + wrapper = mount(Component, { + store: mockStore, + localVue, + propsData: { + endpoint, + }, + methods: { + fetchReports: () => {}, + }, + }); + }; + + const setReports = reports => { + mockStore.state.status = reports.status; + mockStore.state.summary = reports.summary; + mockStore.state.reports = reports.suites; + }; + + const findHeader = () => wrapper.find('[data-testid="report-section-code-text"]'); + const findSummaryDescription = () => wrapper.find('[data-testid="test-summary-row-description"]'); + const findIssueDescription = () => wrapper.find('[data-testid="test-issue-body-description"]'); + const findAllIssueDescriptions = () => + wrapper.findAll('[data-testid="test-issue-body-description"]'); beforeEach(() => { - mock = new MockAdapter(axios); + mockStore = store(); + mountComponent(); }); afterEach(() => { - vm.$store.replaceState(state()); - vm.$destroy(); - mock.restore(); + wrapper.destroy(); + wrapper = null; }); describe('with success result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, successTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(successTestReports); + mountComponent(); }); - it('renders success summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained no changed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found no changed test results out of 8 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'java ant found no changed test results out of 3 total tests', - ); - done(); - }); + it('renders success summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained no changed test results out of 11 total tests', + ); }); }); - describe('with 204 result', () => { + describe('with new failed result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(204, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(newFailedTestReports); + mountComponent(); }); - it('renders success summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).not.toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary results are being parsed', - ); - - done(); - }); + it('renders failed summary text', () => { + expect(findHeader().text()).toBe('Test summary contained 2 failed out of 11 total tests'); }); - }); - describe('with new failed result', () => { - beforeEach(() => { - mock.onGet('test_results.json').reply(200, newFailedTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + it('renders failed test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 2 failed out of 8 total tests', + ); }); - it('renders failed summary text + new badge', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 failed out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain('rspec:pg found 2 failed out of 8 total tests'); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain( - 'java ant found no changed test results out of 3 total tests', - ); - done(); - }); + it('renders failed issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#sum when a is 1 and b is 2 returns summary', + ); }); }); describe('with new error result', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, newErrorsTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(newErrorsTestReports); + mountComponent(); + }); + + it('renders error summary text', () => { + expect(findHeader().text()).toBe('Test summary contained 2 errors out of 11 total tests'); + }); + + it('renders error test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'karma found 2 errors out of 3 total tests', + ); }); - it('renders error summary text + new badge', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 errors out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain('karma found 2 errors out of 3 total tests'); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain( - 'rspec:pg found no changed test results out of 8 total tests', - ); - done(); - }); + it('renders error issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#sum when a is 1 and b is 2 returns summary', + ); }); }); describe('with mixed results', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, mixedResultsTestReports, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(mixedResultsTestReports); + mountComponent(); + }); + + it('renders summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained 2 failed and 2 fixed test results out of 11 total tests', + ); }); - it('renders summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 2 failed and 2 fixed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found 1 failed and 2 fixed test results out of 8 total tests', - ); - - expect(vm.$el.textContent).toContain('New'); - expect(vm.$el.textContent).toContain(' java ant found 1 failed out of 3 total tests'); - done(); - }); + it('renders failed test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 1 failed and 2 fixed test results out of 8 total tests', + ); + }); + + it('renders failed issue in list', () => { + expect(findIssueDescription().text()).toContain('New'); + expect(findIssueDescription().text()).toContain( + 'Test#subtract when a is 2 and b is 1 returns correct result', + ); }); }); describe('with resolved failures and resolved errors', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, resolvedFailures, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(resolvedFailures); + mountComponent(); }); - it('renders summary text', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.gl-spinner')).toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary contained 4 fixed test results out of 11 total tests', - ); - - expect(vm.$el.textContent).toContain( - 'rspec:pg found 4 fixed test results out of 8 total tests', - ); - done(); - }); + it('renders summary text', () => { + expect(findHeader().text()).toBe( + 'Test summary contained 4 fixed test results out of 11 total tests', + ); + }); + + it('renders resolved test suite', () => { + expect(findSummaryDescription().text()).toContain( + 'rspec:pg found 4 fixed test results out of 8 total tests', + ); }); - it('renders resolved failures', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_failures[0].name, - ); - - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_failures[1].name, - ); - done(); - }); + it('renders resolved failures', () => { + expect(findIssueDescription().text()).toContain( + resolvedFailures.suites[0].resolved_failures[0].name, + ); }); - it('renders resolved errors', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_errors[0].name, - ); - - expect(vm.$el.querySelector('.report-block-container').textContent).toContain( - resolvedFailures.suites[0].resolved_errors[1].name, - ); - done(); - }); + it('renders resolved errors', () => { + expect( + findAllIssueDescriptions() + .at(2) + .text(), + ).toContain(resolvedFailures.suites[0].resolved_errors[0].name); }); }); describe('with a report that failed to load', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, failedReport, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + setReports(failedReport); + mountComponent(); }); - it('renders an error status for the report', done => { - setImmediate(() => { - const { name } = failedReport.suites[0]; + it('renders an error status for the report', () => { + const { name } = failedReport.suites[0]; - expect(vm.$el.querySelector('.report-block-list-issue').textContent).toContain( - `An error occurred while loading ${name} results`, - ); - done(); - }); + expect(findSummaryDescription().text()).toContain( + `An error occurred while loading ${name} result`, + ); }); }); describe('with error', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(500, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + mockStore.state.isLoading = false; + mockStore.state.hasError = true; + mountComponent(); }); - it('renders loading summary text with loading icon', done => { - setImmediate(() => { - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary failed loading results', - ); - done(); - }); + it('renders loading state', () => { + expect(findHeader().text()).toBe('Test summary failed loading results'); }); }); describe('while loading', () => { beforeEach(() => { - mock.onGet('test_results.json').reply(200, {}, {}); - vm = mountComponent(Component, { - endpoint: 'test_results.json', - }); + mockStore.state.isLoading = true; + mountComponent(); }); - it('renders loading summary text with loading icon', done => { - expect(vm.$el.querySelector('.gl-spinner')).not.toBeNull(); - expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual( - 'Test summary results are being parsed', - ); - - setImmediate(() => { - done(); - }); + it('renders loading state', () => { + expect(findHeader().text()).toBe('Test summary results are being parsed'); }); }); }); diff --git a/spec/frontend/reports/mock_data/new_errors_report.json b/spec/frontend/reports/mock_data/new_errors_report.json index cebf98fdb63..6573d23ee50 100644 --- a/spec/frontend/reports/mock_data/new_errors_report.json +++ b/spec/frontend/reports/mock_data/new_errors_report.json @@ -2,16 +2,6 @@ "summary": { "total": 11, "resolved": 0, "errored": 2, "failed": 0 }, "suites": [ { - "name": "rspec:pg", - "summary": { "total": 8, "resolved": 0, "errored": 0, "failed": 0 }, - "new_failures": [], - "resolved_failures": [], - "existing_failures": [], - "new_errors": [], - "resolved_errors": [], - "existing_errors": [] - }, - { "name": "karma", "summary": { "total": 3, "resolved": 0, "errored": 2, "failed": 0 }, "new_failures": [], @@ -33,6 +23,16 @@ ], "resolved_errors": [], "existing_errors": [] + }, + { + "name": "rspec:pg", + "summary": { "total": 8, "resolved": 0, "errored": 0, "failed": 0 }, + "new_failures": [], + "resolved_failures": [], + "existing_failures": [], + "new_errors": [], + "resolved_errors": [], + "existing_errors": [] } ] } |