diff options
Diffstat (limited to 'spec/frontend/jobs/components')
5 files changed, 511 insertions, 117 deletions
diff --git a/spec/frontend/jobs/components/job_retry_forward_deployment_modal_spec.js b/spec/frontend/jobs/components/job_retry_forward_deployment_modal_spec.js new file mode 100644 index 00000000000..08973223c08 --- /dev/null +++ b/spec/frontend/jobs/components/job_retry_forward_deployment_modal_spec.js @@ -0,0 +1,76 @@ +import { GlLink, GlModal } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import JobRetryForwardDeploymentModal from '~/jobs/components/job_retry_forward_deployment_modal.vue'; +import { JOB_RETRY_FORWARD_DEPLOYMENT_MODAL } from '~/jobs/constants'; +import createStore from '~/jobs/store'; +import job from '../mock_data'; + +describe('Job Retry Forward Deployment Modal', () => { + let store; + let wrapper; + + const retryOutdatedJobDocsUrl = 'url-to-docs'; + const findLink = () => wrapper.find(GlLink); + const findModal = () => wrapper.find(GlModal); + + const createWrapper = ({ props = {}, provide = {}, stubs = {} } = {}) => { + store = createStore(); + wrapper = shallowMount(JobRetryForwardDeploymentModal, { + propsData: { + modalId: 'modal-id', + href: job.retry_path, + ...props, + }, + provide, + store, + stubs, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + beforeEach(createWrapper); + + describe('Modal configuration', () => { + it('should display the correct messages', () => { + const modal = findModal(); + expect(modal.attributes('title')).toMatch(JOB_RETRY_FORWARD_DEPLOYMENT_MODAL.title); + expect(modal.text()).toMatch(JOB_RETRY_FORWARD_DEPLOYMENT_MODAL.info); + expect(modal.text()).toMatch(JOB_RETRY_FORWARD_DEPLOYMENT_MODAL.areYouSure); + }); + }); + + describe('Modal docs help link', () => { + it('should not display an info link when none is provided', () => { + createWrapper(); + + expect(findLink().exists()).toBe(false); + }); + + it('should display an info link when one is provided', () => { + createWrapper({ provide: { retryOutdatedJobDocsUrl } }); + + expect(findLink().attributes('href')).toBe(retryOutdatedJobDocsUrl); + expect(findLink().text()).toMatch(JOB_RETRY_FORWARD_DEPLOYMENT_MODAL.moreInfo); + }); + }); + + describe('Modal actions', () => { + beforeEach(createWrapper); + + it('should correctly configure the primary action', () => { + expect(findModal().props('actionPrimary').attributes).toMatchObject([ + { + 'data-method': 'post', + href: job.retry_path, + variant: 'danger', + }, + ]); + }); + }); +}); diff --git a/spec/frontend/jobs/components/job_sidebar_details_container_spec.js b/spec/frontend/jobs/components/job_sidebar_details_container_spec.js new file mode 100644 index 00000000000..be684769b46 --- /dev/null +++ b/spec/frontend/jobs/components/job_sidebar_details_container_spec.js @@ -0,0 +1,132 @@ +import { shallowMount } from '@vue/test-utils'; +import SidebarJobDetailsContainer from '~/jobs/components/sidebar_job_details_container.vue'; +import DetailRow from '~/jobs/components/sidebar_detail_row.vue'; +import createStore from '~/jobs/store'; +import { extendedWrapper } from '../../helpers/vue_test_utils_helper'; +import job from '../mock_data'; + +describe('Job Sidebar Details Container', () => { + let store; + let wrapper; + + const findJobTimeout = () => wrapper.findByTestId('job-timeout'); + const findJobTags = () => wrapper.findByTestId('job-tags'); + const findAllDetailsRow = () => wrapper.findAll(DetailRow); + + const createWrapper = ({ props = {} } = {}) => { + store = createStore(); + wrapper = extendedWrapper( + shallowMount(SidebarJobDetailsContainer, { + propsData: props, + store, + stubs: { + DetailRow, + }, + }), + ); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + describe('when no details are available', () => { + it('should render an empty container', () => { + createWrapper(); + + expect(wrapper.isEmpty()).toBe(true); + }); + }); + + describe('when some of the details are available', () => { + beforeEach(createWrapper); + + it.each([ + ['duration', 'Duration: 6 seconds'], + ['erased_at', 'Erased: 3 weeks ago'], + ['finished_at', 'Finished: 3 weeks ago'], + ['queued', 'Queued: 9 seconds'], + ['runner', 'Runner: local ci runner (#1)'], + ['coverage', 'Coverage: 20%'], + ])('uses %s to render job-%s', async (detail, value) => { + await store.dispatch('receiveJobSuccess', { [detail]: job[detail] }); + const detailsRow = findAllDetailsRow(); + + expect(wrapper.isEmpty()).toBe(false); + expect(detailsRow).toHaveLength(1); + expect(detailsRow.at(0).text()).toBe(value); + }); + + it('only renders tags', async () => { + const { tags } = job; + await store.dispatch('receiveJobSuccess', { tags }); + const tagsComponent = findJobTags(); + + expect(wrapper.isEmpty()).toBe(false); + expect(tagsComponent.text()).toBe('Tags: tag'); + }); + }); + + describe('when all the info are available', () => { + it('renders all the details components', async () => { + createWrapper(); + await store.dispatch('receiveJobSuccess', job); + + expect(findAllDetailsRow()).toHaveLength(7); + }); + }); + + describe('timeout', () => { + const { + metadata: { timeout_human_readable, timeout_source }, + } = job; + + beforeEach(createWrapper); + + it('does not render if metadata is empty', async () => { + const metadata = {}; + await store.dispatch('receiveJobSuccess', { metadata }); + const detailsRow = findAllDetailsRow(); + + expect(wrapper.isEmpty()).toBe(true); + expect(detailsRow.exists()).toBe(false); + }); + + it('uses metadata to render timeout', async () => { + const metadata = { timeout_human_readable }; + await store.dispatch('receiveJobSuccess', { metadata }); + const detailsRow = findAllDetailsRow(); + + expect(wrapper.isEmpty()).toBe(false); + expect(detailsRow).toHaveLength(1); + expect(detailsRow.at(0).text()).toBe('Timeout: 1m 40s'); + }); + + it('uses metadata to render timeout and the source', async () => { + const metadata = { timeout_human_readable, timeout_source }; + await store.dispatch('receiveJobSuccess', { metadata }); + const detailsRow = findAllDetailsRow(); + + expect(detailsRow.at(0).text()).toBe('Timeout: 1m 40s (from runner)'); + }); + + it('should not render when no time is provided', async () => { + const metadata = { timeout_source }; + await store.dispatch('receiveJobSuccess', { metadata }); + + expect(findJobTimeout().exists()).toBe(false); + }); + + it('should pass the help URL', async () => { + const helpUrl = 'fakeUrl'; + const props = { runnerHelpUrl: helpUrl }; + createWrapper({ props }); + await store.dispatch('receiveJobSuccess', { metadata: { timeout_human_readable } }); + + expect(findJobTimeout().props('helpUrl')).toBe(helpUrl); + }); + }); +}); diff --git a/spec/frontend/jobs/components/job_sidebar_retry_button_spec.js b/spec/frontend/jobs/components/job_sidebar_retry_button_spec.js new file mode 100644 index 00000000000..4bf697ab7cc --- /dev/null +++ b/spec/frontend/jobs/components/job_sidebar_retry_button_spec.js @@ -0,0 +1,70 @@ +import { GlButton, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import job from '../mock_data'; +import JobsSidebarRetryButton from '~/jobs/components/job_sidebar_retry_button.vue'; +import createStore from '~/jobs/store'; + +describe('Job Sidebar Retry Button', () => { + let store; + let wrapper; + + const forwardDeploymentFailure = 'forward_deployment_failure'; + const findRetryButton = () => wrapper.find(GlButton); + const findRetryLink = () => wrapper.find(GlLink); + + const createWrapper = ({ props = {} } = {}) => { + store = createStore(); + wrapper = shallowMount(JobsSidebarRetryButton, { + propsData: { + href: job.retry_path, + modalId: 'modal-id', + ...props, + }, + store, + }); + }; + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } + }); + + beforeEach(createWrapper); + + it.each([ + [null, false, true], + ['unmet_prerequisites', false, true], + [forwardDeploymentFailure, true, false], + ])( + 'when error is: %s, should render button: %s | should render link: %s', + async (failureReason, buttonExists, linkExists) => { + await store.dispatch('receiveJobSuccess', { ...job, failure_reason: failureReason }); + + expect(findRetryButton().exists()).toBe(buttonExists); + expect(findRetryLink().exists()).toBe(linkExists); + expect(wrapper.text()).toMatch('Retry'); + }, + ); + + describe('Button', () => { + it('should have the correct configuration', async () => { + await store.dispatch('receiveJobSuccess', { failure_reason: forwardDeploymentFailure }); + + expect(findRetryButton().attributes()).toMatchObject({ + category: 'primary', + variant: 'info', + }); + }); + }); + + describe('Link', () => { + it('should have the correct configuration', () => { + expect(findRetryLink().attributes()).toMatchObject({ + 'data-method': 'post', + href: job.retry_path, + }); + }); + }); +}); diff --git a/spec/frontend/jobs/components/log/line_spec.js b/spec/frontend/jobs/components/log/line_spec.js index c2412a807c3..314b23ec29b 100644 --- a/spec/frontend/jobs/components/log/line_spec.js +++ b/spec/frontend/jobs/components/log/line_spec.js @@ -2,21 +2,26 @@ import { shallowMount } from '@vue/test-utils'; import Line from '~/jobs/components/log/line.vue'; import LineNumber from '~/jobs/components/log/line_number.vue'; +const httpUrl = 'http://example.com'; +const httpsUrl = 'https://example.com'; + +const mockProps = ({ text = 'Running with gitlab-runner 12.1.0 (de7731dd)' } = {}) => ({ + line: { + content: [ + { + text, + style: 'term-fg-l-green', + }, + ], + lineNumber: 0, + }, + path: '/jashkenas/underscore/-/jobs/335', +}); + describe('Job Log Line', () => { let wrapper; - - const data = { - line: { - content: [ - { - text: 'Running with gitlab-runner 12.1.0 (de7731dd)', - style: 'term-fg-l-green', - }, - ], - lineNumber: 0, - }, - path: '/jashkenas/underscore/-/jobs/335', - }; + let data; + let originalGon; const createComponent = (props = {}) => { wrapper = shallowMount(Line, { @@ -26,12 +31,25 @@ describe('Job Log Line', () => { }); }; + const findLine = () => wrapper.find('span'); + const findLink = () => findLine().find('a'); + const findLinksAt = i => + findLine() + .findAll('a') + .at(i); + beforeEach(() => { + originalGon = window.gon; + window.gon.features = { + ciJobLineLinks: false, + }; + + data = mockProps(); createComponent(data); }); afterEach(() => { - wrapper.destroy(); + window.gon = originalGon; }); it('renders the line number component', () => { @@ -39,10 +57,109 @@ describe('Job Log Line', () => { }); it('renders a span the provided text', () => { - expect(wrapper.find('span').text()).toBe(data.line.content[0].text); + expect(findLine().text()).toBe(data.line.content[0].text); }); it('renders the provided style as a class attribute', () => { - expect(wrapper.find('span').classes()).toContain(data.line.content[0].style); + expect(findLine().classes()).toContain(data.line.content[0].style); + }); + + describe.each([true, false])('when feature ci_job_line_links enabled = %p', ciJobLineLinks => { + beforeEach(() => { + window.gon.features = { + ciJobLineLinks, + }; + }); + + it('renders text with symbols', () => { + const text = 'apt-get update < /dev/null > /dev/null'; + createComponent(mockProps({ text })); + + expect(findLine().text()).toBe(text); + }); + + it.each` + tag | text + ${'a'} | ${'<a href="#">linked</a>'} + ${'script'} | ${'<script>doEvil();</script>'} + ${'strong'} | ${'<strong>highlighted</strong>'} + `('escapes `<$tag>` tags in text', ({ tag, text }) => { + createComponent(mockProps({ text })); + + expect( + findLine() + .find(tag) + .exists(), + ).toBe(false); + expect(findLine().text()).toBe(text); + }); + }); + + describe('when ci_job_line_links is enabled', () => { + beforeEach(() => { + window.gon.features = { + ciJobLineLinks: true, + }; + }); + + it('renders an http link', () => { + createComponent(mockProps({ text: httpUrl })); + + expect(findLink().text()).toBe(httpUrl); + expect(findLink().attributes().href).toBe(httpUrl); + }); + + it('renders an https link', () => { + createComponent(mockProps({ text: httpsUrl })); + + expect(findLink().text()).toBe(httpsUrl); + expect(findLink().attributes().href).toBe(httpsUrl); + }); + + it('renders a multiple links surrounded by text', () => { + createComponent(mockProps({ text: `My HTTP url: ${httpUrl} and my HTTPS url: ${httpsUrl}` })); + expect(findLine().text()).toBe( + 'My HTTP url: http://example.com and my HTTPS url: https://example.com', + ); + expect(findLinksAt(0).attributes().href).toBe(httpUrl); + expect(findLinksAt(1).attributes().href).toBe(httpsUrl); + }); + + it('renders a link with rel nofollow and noopener', () => { + createComponent(mockProps({ text: httpsUrl })); + + expect(findLink().attributes().rel).toBe('nofollow noopener noreferrer'); + }); + + it('renders a link with corresponding styles', () => { + createComponent(mockProps({ text: httpsUrl })); + + expect(findLink().classes()).toEqual(['gl-reset-color!', 'gl-text-decoration-underline']); + }); + + it('render links surrounded by text', () => { + createComponent( + mockProps({ text: `My HTTP url: ${httpUrl} and my HTTPS url: ${httpsUrl} are here.` }), + ); + expect(findLine().text()).toBe( + 'My HTTP url: http://example.com and my HTTPS url: https://example.com are here.', + ); + expect(findLinksAt(0).attributes().href).toBe(httpUrl); + expect(findLinksAt(1).attributes().href).toBe(httpsUrl); + }); + + const jshref = 'javascript:doEvil();'; // eslint-disable-line no-script-url + + test.each` + type | text + ${'js'} | ${jshref} + ${'file'} | ${'file:///a-file'} + ${'ftp'} | ${'ftp://example.com/file'} + ${'email'} | ${'email@example.com'} + ${'no scheme'} | ${'example.com/page'} + `('does not render a $type link', ({ text }) => { + createComponent(mockProps({ text })); + expect(findLink().exists()).toBe(false); + }); }); }); diff --git a/spec/frontend/jobs/components/sidebar_spec.js b/spec/frontend/jobs/components/sidebar_spec.js index 48788df0c93..1d4be2fb81e 100644 --- a/spec/frontend/jobs/components/sidebar_spec.js +++ b/spec/frontend/jobs/components/sidebar_spec.js @@ -1,167 +1,166 @@ -import Vue from 'vue'; -import sidebarDetailsBlock from '~/jobs/components/sidebar.vue'; +import { shallowMount } from '@vue/test-utils'; +import Sidebar, { forwardDeploymentFailureModalId } from '~/jobs/components/sidebar.vue'; +import StagesDropdown from '~/jobs/components/stages_dropdown.vue'; +import JobsContainer from '~/jobs/components/jobs_container.vue'; +import JobRetryForwardDeploymentModal from '~/jobs/components/job_retry_forward_deployment_modal.vue'; +import JobRetryButton from '~/jobs/components/job_sidebar_retry_button.vue'; import createStore from '~/jobs/store'; import job, { jobsInStage } from '../mock_data'; -import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper'; -import { trimText } from '../../helpers/text_helper'; +import { extendedWrapper } from '../../helpers/vue_test_utils_helper'; describe('Sidebar details block', () => { - const SidebarComponent = Vue.extend(sidebarDetailsBlock); - let vm; let store; + let wrapper; - beforeEach(() => { + const forwardDeploymentFailure = 'forward_deployment_failure'; + const findModal = () => wrapper.find(JobRetryForwardDeploymentModal); + const findCancelButton = () => wrapper.findByTestId('cancel-button'); + const findNewIssueButton = () => wrapper.findByTestId('job-new-issue'); + const findRetryButton = () => wrapper.find(JobRetryButton); + const findTerminalLink = () => wrapper.findByTestId('terminal-link'); + + const createWrapper = ({ props = {} } = {}) => { store = createStore(); - }); + wrapper = extendedWrapper( + shallowMount(Sidebar, { + ...props, + store, + }), + ); + }; afterEach(() => { - vm.$destroy(); + if (wrapper) { + wrapper.destroy(); + wrapper = null; + } }); describe('when there is no retry path retry', () => { - it('should not render a retry button', () => { - const copy = { ...job }; - delete copy.retry_path; - - store.dispatch('receiveJobSuccess', copy); - vm = mountComponentWithStore(SidebarComponent, { - store, - }); + it('should not render a retry button', async () => { + createWrapper(); + const copy = { ...job, retry_path: null }; + await store.dispatch('receiveJobSuccess', copy); - expect(vm.$el.querySelector('.js-retry-button')).toBeNull(); + expect(findRetryButton().exists()).toBe(false); }); }); describe('without terminal path', () => { - it('does not render terminal link', () => { - store.dispatch('receiveJobSuccess', job); - vm = mountComponentWithStore(SidebarComponent, { store }); + it('does not render terminal link', async () => { + createWrapper(); + await store.dispatch('receiveJobSuccess', job); - expect(vm.$el.querySelector('.js-terminal-link')).toBeNull(); + expect(findTerminalLink().exists()).toBe(false); }); }); describe('with terminal path', () => { - it('renders terminal link', () => { - store.dispatch('receiveJobSuccess', { ...job, terminal_path: 'job/43123/terminal' }); - vm = mountComponentWithStore(SidebarComponent, { - store, - }); + it('renders terminal link', async () => { + createWrapper(); + await store.dispatch('receiveJobSuccess', { ...job, terminal_path: 'job/43123/terminal' }); - expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull(); + expect(findTerminalLink().exists()).toBe(true); }); }); - beforeEach(() => { - store.dispatch('receiveJobSuccess', job); - vm = mountComponentWithStore(SidebarComponent, { store }); - }); - describe('actions', () => { - it('should render link to new issue', () => { - expect(vm.$el.querySelector('[data-testid="job-new-issue"]').getAttribute('href')).toEqual( - job.new_issue_path, - ); + beforeEach(() => { + createWrapper(); + return store.dispatch('receiveJobSuccess', job); + }); - expect(vm.$el.querySelector('[data-testid="job-new-issue"]').textContent.trim()).toEqual( - 'New issue', - ); + it('should render link to new issue', () => { + expect(findNewIssueButton().attributes('href')).toBe(job.new_issue_path); + expect(findNewIssueButton().text()).toBe('New issue'); }); - it('should render link to retry job', () => { - expect(vm.$el.querySelector('.js-retry-button').getAttribute('href')).toEqual(job.retry_path); + it('should render the retry button', () => { + expect(findRetryButton().props('href')).toBe(job.retry_path); }); it('should render link to cancel job', () => { - expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path); + expect(findCancelButton().text()).toMatch('Cancel'); + expect(findCancelButton().attributes('href')).toBe(job.cancel_path); }); }); - describe('information', () => { - it('should render job duration', () => { - expect(trimText(vm.$el.querySelector('.js-job-duration').textContent)).toEqual( - 'Duration: 6 seconds', - ); - }); - - it('should render erased date', () => { - expect(trimText(vm.$el.querySelector('.js-job-erased').textContent)).toEqual( - 'Erased: 3 weeks ago', - ); - }); - - it('should render finished date', () => { - expect(trimText(vm.$el.querySelector('.js-job-finished').textContent)).toEqual( - 'Finished: 3 weeks ago', - ); - }); - - it('should render queued date', () => { - expect(trimText(vm.$el.querySelector('.js-job-queued').textContent)).toEqual( - 'Queued: 9 seconds', + describe('forward deployment failure', () => { + describe('when the relevant data is missing', () => { + it.each` + retryPath | failureReason + ${null} | ${null} + ${''} | ${''} + ${job.retry_path} | ${''} + ${''} | ${forwardDeploymentFailure} + ${job.retry_path} | ${'unmet_prerequisites'} + `( + 'should not render the modal when path and failure are $retryPath, $failureReason', + async ({ retryPath, failureReason }) => { + createWrapper(); + await store.dispatch('receiveJobSuccess', { + ...job, + failure_reason: failureReason, + retry_path: retryPath, + }); + expect(findModal().exists()).toBe(false); + }, ); }); - it('should render runner ID', () => { - expect(trimText(vm.$el.querySelector('.js-job-runner').textContent)).toEqual( - 'Runner: local ci runner (#1)', - ); - }); + describe('when there is the relevant error', () => { + beforeEach(() => { + createWrapper(); + return store.dispatch('receiveJobSuccess', { + ...job, + failure_reason: forwardDeploymentFailure, + }); + }); - it('should render timeout information', () => { - expect(trimText(vm.$el.querySelector('.js-job-timeout').textContent)).toEqual( - 'Timeout: 1m 40s (from runner)', - ); - }); + it('should render the modal', () => { + expect(findModal().exists()).toBe(true); + }); - it('should render coverage', () => { - expect(trimText(vm.$el.querySelector('.js-job-coverage').textContent)).toEqual( - 'Coverage: 20%', - ); - }); + it('should provide the modal id to the button and modal', () => { + expect(findRetryButton().props('modalId')).toBe(forwardDeploymentFailureModalId); + expect(findModal().props('modalId')).toBe(forwardDeploymentFailureModalId); + }); - it('should render tags', () => { - expect(trimText(vm.$el.querySelector('.js-job-tags').textContent)).toEqual('Tags: tag'); + it('should provide the retry path to the button and modal', () => { + expect(findRetryButton().props('href')).toBe(job.retry_path); + expect(findModal().props('href')).toBe(job.retry_path); + }); }); }); describe('stages dropdown', () => { beforeEach(() => { - store.dispatch('receiveJobSuccess', job); + createWrapper(); + return store.dispatch('receiveJobSuccess', { ...job, stage: 'aStage' }); }); describe('with stages', () => { - beforeEach(() => { - vm = mountComponentWithStore(SidebarComponent, { store }); - }); - it('renders value provided as selectedStage as selected', () => { - expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual( - vm.selectedStage, - ); + expect(wrapper.find(StagesDropdown).props('selectedStage')).toBe('aStage'); }); }); describe('without jobs for stages', () => { - beforeEach(() => { - store.dispatch('receiveJobSuccess', job); - vm = mountComponentWithStore(SidebarComponent, { store }); - }); + beforeEach(() => store.dispatch('receiveJobSuccess', job)); - it('does not render job container', () => { - expect(vm.$el.querySelector('.js-jobs-container')).toBeNull(); + it('does not render jobs container', () => { + expect(wrapper.find(JobsContainer).exists()).toBe(false); }); }); describe('with jobs for stages', () => { - beforeEach(() => { - store.dispatch('receiveJobSuccess', job); - store.dispatch('receiveJobsForStageSuccess', jobsInStage.latest_statuses); - vm = mountComponentWithStore(SidebarComponent, { store }); + beforeEach(async () => { + await store.dispatch('receiveJobSuccess', job); + await store.dispatch('receiveJobsForStageSuccess', jobsInStage.latest_statuses); }); it('renders list of jobs', () => { - expect(vm.$el.querySelector('.js-jobs-container')).not.toBeNull(); + expect(wrapper.find(JobsContainer).exists()).toBe(true); }); }); }); |