diff options
Diffstat (limited to 'spec/frontend/jobs/components/job_sidebar_details_container_spec.js')
-rw-r--r-- | spec/frontend/jobs/components/job_sidebar_details_container_spec.js | 132 |
1 files changed, 132 insertions, 0 deletions
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); + }); + }); +}); |