diff options
Diffstat (limited to 'spec/frontend/pipelines/test_reports')
3 files changed, 106 insertions, 39 deletions
diff --git a/spec/frontend/pipelines/test_reports/empty_state_spec.js b/spec/frontend/pipelines/test_reports/empty_state_spec.js new file mode 100644 index 00000000000..ee0f8a90a11 --- /dev/null +++ b/spec/frontend/pipelines/test_reports/empty_state_spec.js @@ -0,0 +1,45 @@ +import { GlEmptyState } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import EmptyState, { i18n } from '~/pipelines/components/test_reports/empty_state.vue'; + +describe('Test report empty state', () => { + let wrapper; + + const findEmptyState = () => wrapper.findComponent(GlEmptyState); + + const createComponent = ({ hasTestReport = true } = {}) => { + wrapper = shallowMount(EmptyState, { + provide: { + emptyStateImagePath: '/image/path', + hasTestReport, + }, + stubs: { + GlEmptyState, + }, + }); + }; + + describe('when pipeline has a test report', () => { + it('should render empty test report message', () => { + createComponent(); + + expect(findEmptyState().props()).toMatchObject({ + primaryButtonText: i18n.noTestsButton, + description: i18n.noTestsDescription, + title: i18n.noTestsTitle, + }); + }); + }); + + describe('when pipeline does not have a test report', () => { + it('should render no test report message', () => { + createComponent({ hasTestReport: false }); + + expect(findEmptyState().props()).toMatchObject({ + primaryButtonText: i18n.noReportsButton, + description: i18n.noReportsDescription, + title: i18n.noReportsTitle, + }); + }); + }); +}); diff --git a/spec/frontend/pipelines/test_reports/test_case_details_spec.js b/spec/frontend/pipelines/test_reports/test_case_details_spec.js index e866586a2c3..c995eb864d1 100644 --- a/spec/frontend/pipelines/test_reports/test_case_details_spec.js +++ b/spec/frontend/pipelines/test_reports/test_case_details_spec.js @@ -1,5 +1,6 @@ import { GlModal } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import TestCaseDetails from '~/pipelines/components/test_reports/test_case_details.vue'; import CodeBlock from '~/vue_shared/components/code_block.vue'; @@ -13,29 +14,32 @@ describe('Test case details', () => { formattedTime: '10.04ms', recent_failures: { count: 2, - base_branch: 'master', + base_branch: 'main', }, system_output: 'Line 42 is broken', }; - const findModal = () => wrapper.find(GlModal); - const findName = () => wrapper.find('[data-testid="test-case-name"]'); - const findDuration = () => wrapper.find('[data-testid="test-case-duration"]'); - const findRecentFailures = () => wrapper.find('[data-testid="test-case-recent-failures"]'); - const findSystemOutput = () => wrapper.find('[data-testid="test-case-trace"]'); + const findModal = () => wrapper.findComponent(GlModal); + const findName = () => wrapper.findByTestId('test-case-name'); + const findDuration = () => wrapper.findByTestId('test-case-duration'); + const findRecentFailures = () => wrapper.findByTestId('test-case-recent-failures'); + const findAttachmentUrl = () => wrapper.findByTestId('test-case-attachment-url'); + const findSystemOutput = () => wrapper.findByTestId('test-case-trace'); const createComponent = (testCase = {}) => { - wrapper = shallowMount(TestCaseDetails, { - localVue, - propsData: { - modalId: 'my-modal', - testCase: { - ...defaultTestCase, - ...testCase, + wrapper = extendedWrapper( + shallowMount(TestCaseDetails, { + localVue, + propsData: { + modalId: 'my-modal', + testCase: { + ...defaultTestCase, + ...testCase, + }, }, - }, - stubs: { CodeBlock, GlModal }, - }); + stubs: { CodeBlock, GlModal }, + }), + ); }; afterEach(() => { @@ -91,6 +95,25 @@ describe('Test case details', () => { }); }); + describe('when test case has attachment URL', () => { + it('renders the attachment URL as a link', () => { + const expectedUrl = '/my/path.jpg'; + createComponent({ attachment_url: expectedUrl }); + const attachmentUrl = findAttachmentUrl(); + + expect(attachmentUrl.exists()).toBe(true); + expect(attachmentUrl.attributes('href')).toBe(expectedUrl); + }); + }); + + describe('when test case does not have attachment URL', () => { + it('does not render the attachment URL', () => { + createComponent({ attachment_url: null }); + + expect(findAttachmentUrl().exists()).toBe(false); + }); + }); + describe('when test case has system output', () => { it('renders the test case system output', () => { createComponent(); diff --git a/spec/frontend/pipelines/test_reports/test_reports_spec.js b/spec/frontend/pipelines/test_reports/test_reports_spec.js index da5763ddf8e..e44d59ba888 100644 --- a/spec/frontend/pipelines/test_reports/test_reports_spec.js +++ b/spec/frontend/pipelines/test_reports/test_reports_spec.js @@ -2,6 +2,8 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { getJSONFixture } from 'helpers/fixtures'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import EmptyState from '~/pipelines/components/test_reports/empty_state.vue'; import TestReports from '~/pipelines/components/test_reports/test_reports.vue'; import TestSummary from '~/pipelines/components/test_reports/test_summary.vue'; import TestSummaryTable from '~/pipelines/components/test_reports/test_summary_table.vue'; @@ -16,11 +18,11 @@ describe('Test reports app', () => { const testReports = getJSONFixture('pipelines/test_report.json'); - const loadingSpinner = () => wrapper.find(GlLoadingIcon); - const testsDetail = () => wrapper.find('[data-testid="tests-detail"]'); - const noTestsToShow = () => wrapper.find('[data-testid="no-tests-to-show"]'); - const testSummary = () => wrapper.find(TestSummary); - const testSummaryTable = () => wrapper.find(TestSummaryTable); + const loadingSpinner = () => wrapper.findComponent(GlLoadingIcon); + const testsDetail = () => wrapper.findByTestId('tests-detail'); + const emptyState = () => wrapper.findComponent(EmptyState); + const testSummary = () => wrapper.findComponent(TestSummary); + const testSummaryTable = () => wrapper.findComponent(TestSummaryTable); const actionSpies = { fetchTestSuite: jest.fn(), @@ -29,7 +31,7 @@ describe('Test reports app', () => { removeSelectedSuiteIndex: jest.fn(), }; - const createComponent = (state = {}) => { + const createComponent = ({ state = {} } = {}) => { store = new Vuex.Store({ state: { isLoading: false, @@ -41,10 +43,12 @@ describe('Test reports app', () => { getters, }); - wrapper = shallowMount(TestReports, { - store, - localVue, - }); + wrapper = extendedWrapper( + shallowMount(TestReports, { + store, + localVue, + }), + ); }; afterEach(() => { @@ -52,33 +56,28 @@ describe('Test reports app', () => { }); describe('when component is created', () => { - beforeEach(() => { + it('should call fetchSummary when pipeline has test report', () => { createComponent(); - }); - it('should call fetchSummary', () => { expect(actionSpies.fetchSummary).toHaveBeenCalled(); }); }); describe('when loading', () => { - beforeEach(() => createComponent({ isLoading: true })); + beforeEach(() => createComponent({ state: { isLoading: true } })); it('shows the loading spinner', () => { - expect(noTestsToShow().exists()).toBe(false); + expect(emptyState().exists()).toBe(false); expect(testsDetail().exists()).toBe(false); expect(loadingSpinner().exists()).toBe(true); }); }); describe('when the api returns no data', () => { - beforeEach(() => createComponent({ testReports: {} })); - - it('displays that there are no tests to show', () => { - const noTests = noTestsToShow(); + it('displays empty state component', () => { + createComponent({ state: { testReports: {} } }); - expect(noTests.exists()).toBe(true); - expect(noTests.text()).toBe('There are no tests to show.'); + expect(emptyState().exists()).toBe(true); }); }); @@ -97,7 +96,7 @@ describe('Test reports app', () => { describe('when a suite is clicked', () => { beforeEach(() => { - createComponent({ hasFullReport: true }); + createComponent({ state: { hasFullReport: true } }); testSummaryTable().vm.$emit('row-click', 0); }); @@ -109,7 +108,7 @@ describe('Test reports app', () => { describe('when clicking back to summary', () => { beforeEach(() => { - createComponent({ selectedSuiteIndex: 0 }); + createComponent({ state: { selectedSuiteIndex: 0 } }); testSummary().vm.$emit('on-back-click'); }); |