diff options
Diffstat (limited to 'spec/frontend/pipelines/time_ago_spec.js')
-rw-r--r-- | spec/frontend/pipelines/time_ago_spec.js | 69 |
1 files changed, 52 insertions, 17 deletions
diff --git a/spec/frontend/pipelines/time_ago_spec.js b/spec/frontend/pipelines/time_ago_spec.js index 93aeb049434..3de7995b476 100644 --- a/spec/frontend/pipelines/time_ago_spec.js +++ b/spec/frontend/pipelines/time_ago_spec.js @@ -1,25 +1,33 @@ import { GlIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import TimeAgo from '~/pipelines/components/pipelines_list/time_ago.vue'; describe('Timeago component', () => { let wrapper; - const createComponent = (props = {}) => { - wrapper = shallowMount(TimeAgo, { - propsData: { - pipeline: { - details: { - ...props, + const defaultProps = { duration: 0, finished_at: '' }; + + const createComponent = (props = defaultProps, stuck = false) => { + wrapper = extendedWrapper( + shallowMount(TimeAgo, { + propsData: { + pipeline: { + details: { + ...props, + }, + flags: { + stuck, + }, }, }, - }, - data() { - return { - iconTimerSvg: `<svg></svg>`, - }; - }, - }); + data() { + return { + iconTimerSvg: `<svg></svg>`, + }; + }, + }), + ); }; afterEach(() => { @@ -29,7 +37,10 @@ describe('Timeago component', () => { const duration = () => wrapper.find('.duration'); const finishedAt = () => wrapper.find('.finished-at'); - const findInProgress = () => wrapper.find('[data-testid="pipeline-in-progress"]'); + const findInProgress = () => wrapper.findByTestId('pipeline-in-progress'); + const findSkipped = () => wrapper.findByTestId('pipeline-skipped'); + const findHourGlassIcon = () => wrapper.findByTestId('hourglass-icon'); + const findWarningIcon = () => wrapper.findByTestId('warning-icon'); describe('with duration', () => { beforeEach(() => { @@ -46,7 +57,7 @@ describe('Timeago component', () => { describe('without duration', () => { beforeEach(() => { - createComponent({ duration: 0, finished_at: '' }); + createComponent(); }); it('should not render duration and timer svg', () => { @@ -71,7 +82,7 @@ describe('Timeago component', () => { describe('without finishedTime', () => { beforeEach(() => { - createComponent({ duration: 0, finished_at: '' }); + createComponent(); }); it('should not render time and calendar icon', () => { @@ -89,10 +100,34 @@ describe('Timeago component', () => { `( 'progress state shown: $shouldShow when pipeline duration is $durationTime and finished_at is $finishedAtTime', ({ durationTime, finishedAtTime, shouldShow }) => { - createComponent({ duration: durationTime, finished_at: finishedAtTime }); + createComponent({ + duration: durationTime, + finished_at: finishedAtTime, + }); expect(findInProgress().exists()).toBe(shouldShow); + expect(findSkipped().exists()).toBe(false); }, ); + + it('should show warning icon beside in progress if pipeline is stuck', () => { + const stuck = true; + + createComponent(defaultProps, stuck); + + expect(findWarningIcon().exists()).toBe(true); + expect(findHourGlassIcon().exists()).toBe(false); + }); + }); + + describe('skipped', () => { + it('should show skipped if pipeline was skipped', () => { + createComponent({ + status: { label: 'skipped' }, + }); + + expect(findSkipped().exists()).toBe(true); + expect(findInProgress().exists()).toBe(false); + }); }); }); |