summaryrefslogtreecommitdiff
path: root/spec/frontend/jobs
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/jobs')
-rw-r--r--spec/frontend/jobs/components/empty_state_spec.js128
-rw-r--r--spec/frontend/jobs/components/job_app_spec.js85
-rw-r--r--spec/frontend/jobs/components/job_log_controllers_spec.js167
-rw-r--r--spec/frontend/jobs/components/log/mock_data.js2
-rw-r--r--spec/frontend/jobs/components/sidebar_spec.js6
-rw-r--r--spec/frontend/jobs/components/stuck_block_spec.js68
6 files changed, 255 insertions, 201 deletions
diff --git a/spec/frontend/jobs/components/empty_state_spec.js b/spec/frontend/jobs/components/empty_state_spec.js
index c6eac4e27b3..29d0c4e07aa 100644
--- a/spec/frontend/jobs/components/empty_state_spec.js
+++ b/spec/frontend/jobs/components/empty_state_spec.js
@@ -1,12 +1,10 @@
-import Vue from 'vue';
-import component from '~/jobs/components/empty_state.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import EmptyState from '~/jobs/components/empty_state.vue';
describe('Empty State', () => {
- const Component = Vue.extend(component);
- let vm;
+ let wrapper;
- const props = {
+ const defaultProps = {
illustrationPath: 'illustrations/pending_job_empty.svg',
illustrationSizeClass: 'svg-430',
title: 'This job has not started yet',
@@ -14,100 +12,107 @@ describe('Empty State', () => {
variablesSettingsUrl: '',
};
+ const createWrapper = props => {
+ wrapper = mount(EmptyState, {
+ propsData: {
+ ...defaultProps,
+ ...props,
+ },
+ });
+ };
+
const content = 'This job is in pending state and is waiting to be picked by a runner';
+ const findEmptyStateImage = () => wrapper.find('img');
+ const findTitle = () => wrapper.find('[data-testid="job-empty-state-title"]');
+ const findContent = () => wrapper.find('[data-testid="job-empty-state-content"]');
+ const findAction = () => wrapper.find('[data-testid="job-empty-state-action"]');
+ const findManualVarsForm = () => wrapper.find('[data-testid="manual-vars-form"]');
+
afterEach(() => {
- vm.$destroy();
+ if (wrapper?.destroy) {
+ wrapper.destroy();
+ wrapper = null;
+ }
});
describe('renders image and title', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
- ...props,
- content,
- });
+ createWrapper();
});
- it('renders img with provided path and size', () => {
- expect(vm.$el.querySelector('img').getAttribute('src')).toEqual(props.illustrationPath);
- expect(vm.$el.querySelector('.svg-content').classList).toContain(props.illustrationSizeClass);
+ it('renders empty state image', () => {
+ expect(findEmptyStateImage().exists()).toBe(true);
});
it('renders provided title', () => {
- expect(vm.$el.querySelector('.js-job-empty-state-title').textContent.trim()).toEqual(
- props.title,
- );
+ expect(
+ findTitle()
+ .text()
+ .trim(),
+ ).toBe(defaultProps.title);
});
});
describe('with content', () => {
- it('renders content', () => {
- vm = mountComponent(Component, {
- ...props,
- content,
- });
+ beforeEach(() => {
+ createWrapper({ content });
+ });
- expect(vm.$el.querySelector('.js-job-empty-state-content').textContent.trim()).toEqual(
- content,
- );
+ it('renders content', () => {
+ expect(
+ findContent()
+ .text()
+ .trim(),
+ ).toBe(content);
});
});
describe('without content', () => {
- it('does not render content', () => {
- vm = mountComponent(Component, {
- ...props,
- });
+ beforeEach(() => {
+ createWrapper();
+ });
- expect(vm.$el.querySelector('.js-job-empty-state-content')).toBeNull();
+ it('does not render content', () => {
+ expect(findContent().exists()).toBe(false);
});
});
describe('with action', () => {
- it('renders action', () => {
- vm = mountComponent(Component, {
- ...props,
- content,
+ beforeEach(() => {
+ createWrapper({
action: {
path: 'runner',
button_title: 'Check runner',
method: 'post',
},
});
+ });
- expect(vm.$el.querySelector('.js-job-empty-state-action').getAttribute('href')).toEqual(
- 'runner',
- );
+ it('renders action', () => {
+ expect(findAction().attributes('href')).toBe('runner');
});
});
describe('without action', () => {
- it('does not render action', () => {
- vm = mountComponent(Component, {
- ...props,
- content,
+ beforeEach(() => {
+ createWrapper({
action: null,
});
+ });
- expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull();
+ it('does not render action', () => {
+ expect(findAction().exists()).toBe(false);
});
- });
- describe('without playbale action', () => {
it('does not render manual variables form', () => {
- vm = mountComponent(Component, {
- ...props,
- content,
- });
-
- expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+ expect(findManualVarsForm().exists()).toBe(false);
});
});
- describe('with playbale action and not scheduled job', () => {
+ describe('with playable action and not scheduled job', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
- ...props,
+ createWrapper({
content,
playable: true,
scheduled: false,
@@ -120,22 +125,25 @@ describe('Empty State', () => {
});
it('renders manual variables form', () => {
- expect(vm.$el.querySelector('.js-manual-vars-form')).not.toBeNull();
+ expect(findManualVarsForm().exists()).toBe(true);
});
it('does not render the empty state action', () => {
- expect(vm.$el.querySelector('.js-job-empty-state-action')).toBeNull();
+ expect(findAction().exists()).toBe(false);
});
});
- describe('with playbale action and scheduled job', () => {
- it('does not render manual variables form', () => {
- vm = mountComponent(Component, {
- ...props,
+ describe('with playable action and scheduled job', () => {
+ beforeEach(() => {
+ createWrapper({
+ playable: true,
+ scheduled: true,
content,
});
+ });
- expect(vm.$el.querySelector('.js-manual-vars-form')).toBeNull();
+ it('does not render manual variables form', () => {
+ expect(findManualVarsForm().exists()).toBe(false);
});
});
});
diff --git a/spec/frontend/jobs/components/job_app_spec.js b/spec/frontend/jobs/components/job_app_spec.js
index d0b3d4f6247..e9ecafcd4c3 100644
--- a/spec/frontend/jobs/components/job_app_spec.js
+++ b/spec/frontend/jobs/components/job_app_spec.js
@@ -1,12 +1,19 @@
import Vuex from 'vuex';
import { mount, createLocalVue } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
import MockAdapter from 'axios-mock-adapter';
import { getJSONFixture } from 'helpers/fixtures';
+import { TEST_HOST } from 'jest/helpers/test_constants';
import axios from '~/lib/utils/axios_utils';
import JobApp from '~/jobs/components/job_app.vue';
+import Sidebar from '~/jobs/components/sidebar.vue';
+import StuckBlock from '~/jobs/components/stuck_block.vue';
+import UnmetPrerequisitesBlock from '~/jobs/components/unmet_prerequisites_block.vue';
+import EnvironmentsBlock from '~/jobs/components/environments_block.vue';
+import ErasedBlock from '~/jobs/components/erased_block.vue';
+import EmptyState from '~/jobs/components/empty_state.vue';
import createStore from '~/jobs/store';
import job from '../mock_data';
-import { TEST_HOST } from 'jest/helpers/test_constants';
describe('Job App', () => {
const localVue = createLocalVue();
@@ -55,6 +62,26 @@ describe('Job App', () => {
.then(() => wrapper.vm.$nextTick());
};
+ const findLoadingComponent = () => wrapper.find(GlLoadingIcon);
+ const findSidebar = () => wrapper.find(Sidebar);
+ const findJobContent = () => wrapper.find('[data-testid="job-content"');
+ const findStuckBlockComponent = () => wrapper.find(StuckBlock);
+ const findStuckBlockWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"');
+ const findStuckBlockNoActiveRunners = () =>
+ wrapper.find('[data-testid="job-stuck-no-active-runners"');
+ const findFailedJobComponent = () => wrapper.find(UnmetPrerequisitesBlock);
+ const findEnvironmentsBlockComponent = () => wrapper.find(EnvironmentsBlock);
+ const findErasedBlock = () => wrapper.find(ErasedBlock);
+ const findArchivedJob = () => wrapper.find('[data-testid="archived-job"]');
+ const findEmptyState = () => wrapper.find(EmptyState);
+ const findJobNewIssueLink = () => wrapper.find('[data-testid="job-new-issue"]');
+ const findJobEmptyStateTitle = () => wrapper.find('[data-testid="job-empty-state-title"]');
+ const findJobTraceScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
+ const findJobTraceScrollBottom = () =>
+ wrapper.find('[data-testid="job-controller-scroll-bottom"]');
+ const findJobTraceController = () => wrapper.find('[data-testid="job-raw-link-controller"]');
+ const findJobTraceEraseLink = () => wrapper.find('[data-testid="job-log-erase-link"]');
+
beforeEach(() => {
mock = new MockAdapter(axios);
store = createStore();
@@ -72,9 +99,9 @@ describe('Job App', () => {
});
it('renders loading icon', () => {
- expect(wrapper.find('.js-job-loading').exists()).toBe(true);
- expect(wrapper.find('.js-job-sidebar').exists()).toBe(false);
- expect(wrapper.find('.js-job-content').exists()).toBe(false);
+ expect(findLoadingComponent().exists()).toBe(true);
+ expect(findSidebar().exists()).toBe(false);
+ expect(findJobContent().exists()).toBe(false);
});
});
@@ -115,7 +142,7 @@ describe('Job App', () => {
});
it('should render new issue link', () => {
- expect(wrapper.find('.js-new-issue').attributes('href')).toEqual(job.new_issue_path);
+ expect(findJobNewIssueLink().attributes('href')).toEqual(job.new_issue_path);
});
});
@@ -134,7 +161,7 @@ describe('Job App', () => {
});
describe('stuck block', () => {
- describe('without active runners availabl', () => {
+ describe('without active runners available', () => {
it('renders stuck block when there are no runners', () =>
setupAndMount({
jobData: {
@@ -153,8 +180,8 @@ describe('Job App', () => {
tags: [],
},
}).then(() => {
- expect(wrapper.find('.js-job-stuck').exists()).toBe(true);
- expect(wrapper.find('.js-job-stuck .js-stuck-no-active-runner').exists()).toBe(true);
+ expect(findStuckBlockComponent().exists()).toBe(true);
+ expect(findStuckBlockNoActiveRunners().exists()).toBe(true);
}));
});
@@ -176,8 +203,8 @@ describe('Job App', () => {
},
},
}).then(() => {
- expect(wrapper.find('.js-job-stuck').text()).toContain(job.tags[0]);
- expect(wrapper.find('.js-job-stuck .js-stuck-with-tags').exists()).toBe(true);
+ expect(findStuckBlockComponent().text()).toContain(job.tags[0]);
+ expect(findStuckBlockWithTags().exists()).toBe(true);
}));
});
@@ -199,8 +226,8 @@ describe('Job App', () => {
},
},
}).then(() => {
- expect(wrapper.find('.js-job-stuck').text()).toContain(job.tags[0]);
- expect(wrapper.find('.js-job-stuck .js-stuck-with-tags').exists()).toBe(true);
+ expect(findStuckBlockComponent().text()).toContain(job.tags[0]);
+ expect(findStuckBlockWithTags().exists()).toBe(true);
}));
});
@@ -210,7 +237,7 @@ describe('Job App', () => {
runners: { available: true },
},
}).then(() => {
- expect(wrapper.find('.js-job-stuck').exists()).toBe(false);
+ expect(findStuckBlockComponent().exists()).toBe(false);
}));
});
@@ -239,7 +266,7 @@ describe('Job App', () => {
tags: [],
},
}).then(() => {
- expect(wrapper.find('.js-job-failed').exists()).toBe(true);
+ expect(findFailedJobComponent().exists()).toBe(true);
}));
});
@@ -255,12 +282,12 @@ describe('Job App', () => {
},
},
}).then(() => {
- expect(wrapper.find('.js-job-environment').exists()).toBe(true);
+ expect(findEnvironmentsBlockComponent().exists()).toBe(true);
}));
it('does not render environment block when job has environment', () =>
setupAndMount().then(() => {
- expect(wrapper.find('.js-job-environment').exists()).toBe(false);
+ expect(findEnvironmentsBlockComponent().exists()).toBe(false);
}));
});
@@ -275,7 +302,7 @@ describe('Job App', () => {
erased_at: '2016-11-07T11:11:16.525Z',
},
}).then(() => {
- expect(wrapper.find('.js-job-erased-block').exists()).toBe(true);
+ expect(findErasedBlock().exists()).toBe(true);
}));
it('does not render erased block when `erased` is false', () =>
@@ -284,7 +311,7 @@ describe('Job App', () => {
erased_at: null,
},
}).then(() => {
- expect(wrapper.find('.js-job-erased-block').exists()).toBe(false);
+ expect(findErasedBlock().exists()).toBe(false);
}));
});
@@ -313,7 +340,7 @@ describe('Job App', () => {
},
},
}).then(() => {
- expect(wrapper.find('.js-job-empty-state').exists()).toBe(true);
+ expect(findEmptyState().exists()).toBe(true);
}));
it('does not render empty state when job does not have trace but it is running', () =>
@@ -329,12 +356,12 @@ describe('Job App', () => {
},
},
}).then(() => {
- expect(wrapper.find('.js-job-empty-state').exists()).toBe(false);
+ expect(findEmptyState().exists()).toBe(false);
}));
it('does not render empty state when job has trace but it is not running', () =>
setupAndMount({ jobData: { has_trace: true } }).then(() => {
- expect(wrapper.find('.js-job-empty-state').exists()).toBe(false);
+ expect(findEmptyState().exists()).toBe(false);
}));
it('displays remaining time for a delayed job', () => {
@@ -345,9 +372,9 @@ describe('Job App', () => {
() => new Date(delayedJobFixture.scheduled_at).getTime() - oneHourInMilliseconds,
);
return setupAndMount({ jobData: delayedJobFixture }).then(() => {
- expect(wrapper.find('.js-job-empty-state').exists()).toBe(true);
+ expect(findEmptyState().exists()).toBe(true);
- const title = wrapper.find('.js-job-empty-state-title').text();
+ const title = findJobEmptyStateTitle().text();
expect(title).toEqual('This is a delayed job to run in 01:00:00');
});
@@ -386,7 +413,7 @@ describe('Job App', () => {
beforeEach(() => setupAndMount({ jobData: { archived: true } }));
it('renders warning about job being archived', () => {
- expect(wrapper.find('.js-archived-job ').exists()).toBe(true);
+ expect(findArchivedJob().exists()).toBe(true);
});
});
@@ -394,7 +421,7 @@ describe('Job App', () => {
beforeEach(() => setupAndMount());
it('does not warning about job being archived', () => {
- expect(wrapper.find('.js-archived-job ').exists()).toBe(false);
+ expect(findArchivedJob().exists()).toBe(false);
});
});
@@ -413,16 +440,16 @@ describe('Job App', () => {
);
it('should render scroll buttons', () => {
- expect(wrapper.find('.js-scroll-top').exists()).toBe(true);
- expect(wrapper.find('.js-scroll-bottom').exists()).toBe(true);
+ expect(findJobTraceScrollTop().exists()).toBe(true);
+ expect(findJobTraceScrollBottom().exists()).toBe(true);
});
it('should render link to raw ouput', () => {
- expect(wrapper.find('.js-raw-link-controller').exists()).toBe(true);
+ expect(findJobTraceController().exists()).toBe(true);
});
it('should render link to erase job', () => {
- expect(wrapper.find('.js-erase-link').exists()).toBe(true);
+ expect(findJobTraceEraseLink().exists()).toBe(true);
});
});
});
diff --git a/spec/frontend/jobs/components/job_log_controllers_spec.js b/spec/frontend/jobs/components/job_log_controllers_spec.js
index 04f20811601..233cef05622 100644
--- a/spec/frontend/jobs/components/job_log_controllers_spec.js
+++ b/spec/frontend/jobs/components/job_log_controllers_spec.js
@@ -1,16 +1,17 @@
-import Vue from 'vue';
-import component from '~/jobs/components/job_log_controllers.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
+import JobLogControllers from '~/jobs/components/job_log_controllers.vue';
describe('Job log controllers', () => {
- const Component = Vue.extend(component);
- let vm;
+ let wrapper;
afterEach(() => {
- vm.$destroy();
+ if (wrapper?.destroy) {
+ wrapper.destroy();
+ wrapper = null;
+ }
});
- const props = {
+ const defaultProps = {
rawPath: '/raw',
erasePath: '/erase',
size: 511952,
@@ -20,70 +21,80 @@ describe('Job log controllers', () => {
isTraceSizeVisible: true,
};
+ const createWrapper = props => {
+ wrapper = mount(JobLogControllers, {
+ propsData: {
+ ...defaultProps,
+ ...props,
+ },
+ });
+ };
+
+ const findTruncatedInfo = () => wrapper.find('[data-testid="log-truncated-info"]');
+ const findRawLink = () => wrapper.find('[data-testid="raw-link"]');
+ const findRawLinkController = () => wrapper.find('[data-testid="job-raw-link-controller"]');
+ const findEraseLink = () => wrapper.find('[data-testid="job-log-erase-link"]');
+ const findScrollTop = () => wrapper.find('[data-testid="job-controller-scroll-top"]');
+ const findScrollBottom = () => wrapper.find('[data-testid="job-controller-scroll-bottom"]');
+
describe('Truncate information', () => {
describe('with isTraceSizeVisible', () => {
beforeEach(() => {
- vm = mountComponent(Component, props);
+ createWrapper();
});
it('renders size information', () => {
- expect(vm.$el.querySelector('.js-truncated-info').textContent).toContain('499.95 KiB');
+ expect(findTruncatedInfo().text()).toMatch('499.95 KiB');
});
it('renders link to raw trace', () => {
- expect(vm.$el.querySelector('.js-raw-link').getAttribute('href')).toEqual('/raw');
+ expect(findRawLink().attributes('href')).toBe(defaultProps.rawPath);
});
});
});
describe('links section', () => {
describe('with raw trace path', () => {
- it('renders raw trace link', () => {
- vm = mountComponent(Component, props);
+ beforeEach(() => {
+ createWrapper();
+ });
- expect(vm.$el.querySelector('.js-raw-link-controller').getAttribute('href')).toEqual(
- '/raw',
- );
+ it('renders raw trace link', () => {
+ expect(findRawLinkController().attributes('href')).toBe(defaultProps.rawPath);
});
});
describe('without raw trace path', () => {
- it('does not render raw trace link', () => {
- vm = mountComponent(Component, {
- erasePath: '/erase',
- size: 511952,
- isScrollTopDisabled: true,
- isScrollBottomDisabled: true,
- isScrollingDown: false,
- isTraceSizeVisible: true,
+ beforeEach(() => {
+ createWrapper({
+ rawPath: null,
});
+ });
- expect(vm.$el.querySelector('.js-raw-link-controller')).toBeNull();
+ it('does not render raw trace link', () => {
+ expect(findRawLinkController().exists()).toBe(false);
});
});
describe('when is erasable', () => {
beforeEach(() => {
- vm = mountComponent(Component, props);
+ createWrapper();
});
it('renders erase job link', () => {
- expect(vm.$el.querySelector('.js-erase-link')).not.toBeNull();
+ expect(findEraseLink().exists()).toBe(true);
});
});
describe('when it is not erasable', () => {
- it('does not render erase button', () => {
- vm = mountComponent(Component, {
- rawPath: '/raw',
- size: 511952,
- isScrollTopDisabled: true,
- isScrollBottomDisabled: true,
- isScrollingDown: false,
- isTraceSizeVisible: true,
+ beforeEach(() => {
+ createWrapper({
+ erasePath: null,
});
+ });
- expect(vm.$el.querySelector('.js-erase-link')).toBeNull();
+ it('does not render erase button', () => {
+ expect(findEraseLink().exists()).toBe(false);
});
});
});
@@ -92,45 +103,39 @@ describe('Job log controllers', () => {
describe('scroll top button', () => {
describe('when user can scroll top', () => {
beforeEach(() => {
- vm = mountComponent(Component, props);
+ createWrapper({
+ isScrollTopDisabled: false,
+ });
});
- it('renders enabled scroll top button', () => {
- expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toBeNull();
- });
+ it('emits scrollJobLogTop event on click', async () => {
+ findScrollTop().trigger('click');
- it('emits scrollJobLogTop event on click', () => {
- jest.spyOn(vm, '$emit').mockImplementation(() => {});
- vm.$el.querySelector('.js-scroll-top').click();
+ await wrapper.vm.$nextTick();
- expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogTop');
+ expect(wrapper.emitted().scrollJobLogTop).toHaveLength(1);
});
});
describe('when user can not scroll top', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
- rawPath: '/raw',
- erasePath: '/erase',
- size: 511952,
+ createWrapper({
isScrollTopDisabled: true,
isScrollBottomDisabled: false,
isScrollingDown: false,
- isTraceSizeVisible: true,
});
});
it('renders disabled scroll top button', () => {
- expect(vm.$el.querySelector('.js-scroll-top').getAttribute('disabled')).toEqual(
- 'disabled',
- );
+ expect(findScrollTop().attributes('disabled')).toBe('disabled');
});
- it('does not emit scrollJobLogTop event on click', () => {
- jest.spyOn(vm, '$emit').mockImplementation(() => {});
- vm.$el.querySelector('.js-scroll-top').click();
+ it('does not emit scrollJobLogTop event on click', async () => {
+ findScrollTop().trigger('click');
- expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop');
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.emitted().scrollJobLogTop).toBeUndefined();
});
});
});
@@ -138,69 +143,61 @@ describe('Job log controllers', () => {
describe('scroll bottom button', () => {
describe('when user can scroll bottom', () => {
beforeEach(() => {
- vm = mountComponent(Component, props);
+ createWrapper();
});
- it('renders enabled scroll bottom button', () => {
- expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toBeNull();
- });
+ it('emits scrollJobLogBottom event on click', async () => {
+ findScrollBottom().trigger('click');
- it('emits scrollJobLogBottom event on click', () => {
- jest.spyOn(vm, '$emit').mockImplementation(() => {});
- vm.$el.querySelector('.js-scroll-bottom').click();
+ await wrapper.vm.$nextTick();
- expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogBottom');
+ expect(wrapper.emitted().scrollJobLogBottom).toHaveLength(1);
});
});
describe('when user can not scroll bottom', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
- rawPath: '/raw',
- erasePath: '/erase',
- size: 511952,
+ createWrapper({
isScrollTopDisabled: false,
isScrollBottomDisabled: true,
isScrollingDown: false,
- isTraceSizeVisible: true,
});
});
it('renders disabled scroll bottom button', () => {
- expect(vm.$el.querySelector('.js-scroll-bottom').getAttribute('disabled')).toEqual(
- 'disabled',
- );
+ expect(findScrollBottom().attributes('disabled')).toEqual('disabled');
});
- it('does not emit scrollJobLogBottom event on click', () => {
- jest.spyOn(vm, '$emit').mockImplementation(() => {});
- vm.$el.querySelector('.js-scroll-bottom').click();
+ it('does not emit scrollJobLogBottom event on click', async () => {
+ findScrollBottom().trigger('click');
- expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');
+ await wrapper.vm.$nextTick();
+
+ expect(wrapper.emitted().scrollJobLogBottom).toBeUndefined();
});
});
describe('while isScrollingDown is true', () => {
- it('renders animate class for the scroll down button', () => {
- vm = mountComponent(Component, props);
+ beforeEach(() => {
+ createWrapper();
+ });
- expect(vm.$el.querySelector('.js-scroll-bottom').className).toContain('animate');
+ it('renders animate class for the scroll down button', () => {
+ expect(findScrollBottom().classes()).toContain('animate');
});
});
describe('while isScrollingDown is false', () => {
- it('does not render animate class for the scroll down button', () => {
- vm = mountComponent(Component, {
- rawPath: '/raw',
- erasePath: '/erase',
- size: 511952,
+ beforeEach(() => {
+ createWrapper({
isScrollTopDisabled: true,
isScrollBottomDisabled: false,
isScrollingDown: false,
- isTraceSizeVisible: true,
});
+ });
- expect(vm.$el.querySelector('.js-scroll-bottom').className).not.toContain('animate');
+ it('does not render animate class for the scroll down button', () => {
+ expect(findScrollBottom().classes()).not.toContain('animate');
});
});
});
diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js
index a6a767f7921..eb8c4fe8bc9 100644
--- a/spec/frontend/jobs/components/log/mock_data.js
+++ b/spec/frontend/jobs/components/log/mock_data.js
@@ -34,7 +34,7 @@ export const utilsMockData = [
content: [
{
text:
- 'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.6-golang-1.14-git-2.27-lfs-2.9-chrome-83-node-12.x-yarn-1.21-postgresql-11-graphicsmagick-1.3.34',
+ 'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.6-golang-1.14-git-2.28-lfs-2.9-chrome-84-node-12.x-yarn-1.21-postgresql-11-graphicsmagick-1.3.34',
},
],
section: 'prepare-executor',
diff --git a/spec/frontend/jobs/components/sidebar_spec.js b/spec/frontend/jobs/components/sidebar_spec.js
index 0c8e2dc3aef..48788df0c93 100644
--- a/spec/frontend/jobs/components/sidebar_spec.js
+++ b/spec/frontend/jobs/components/sidebar_spec.js
@@ -59,11 +59,13 @@ describe('Sidebar details block', () => {
describe('actions', () => {
it('should render link to new issue', () => {
- expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual(
+ expect(vm.$el.querySelector('[data-testid="job-new-issue"]').getAttribute('href')).toEqual(
job.new_issue_path,
);
- expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue');
+ expect(vm.$el.querySelector('[data-testid="job-new-issue"]').textContent.trim()).toEqual(
+ 'New issue',
+ );
});
it('should render link to retry job', () => {
diff --git a/spec/frontend/jobs/components/stuck_block_spec.js b/spec/frontend/jobs/components/stuck_block_spec.js
index c320793b2be..926286bf75a 100644
--- a/spec/frontend/jobs/components/stuck_block_spec.js
+++ b/spec/frontend/jobs/components/stuck_block_spec.js
@@ -1,31 +1,50 @@
-import Vue from 'vue';
-import component from '~/jobs/components/stuck_block.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import { GlBadge, GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import StuckBlock from '~/jobs/components/stuck_block.vue';
describe('Stuck Block Job component', () => {
- const Component = Vue.extend(component);
- let vm;
+ let wrapper;
afterEach(() => {
- vm.$destroy();
+ if (wrapper?.destroy) {
+ wrapper.destroy();
+ wrapper = null;
+ }
});
+ const createWrapper = props => {
+ wrapper = shallowMount(StuckBlock, {
+ propsData: {
+ ...props,
+ },
+ });
+ };
+
+ const tags = ['docker', 'gitlab-org'];
+
+ const findStuckNoActiveRunners = () =>
+ wrapper.find('[data-testid="job-stuck-no-active-runners"]');
+ const findStuckNoRunners = () => wrapper.find('[data-testid="job-stuck-no-runners"]');
+ const findStuckWithTags = () => wrapper.find('[data-testid="job-stuck-with-tags"]');
+ const findRunnerPathLink = () => wrapper.find(GlLink);
+ const findAllBadges = () => wrapper.findAll(GlBadge);
+
describe('with no runners for project', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
+ createWrapper({
hasNoRunnersForProject: true,
runnersPath: '/root/project/runners#js-runners-settings',
});
});
it('renders only information about project not having runners', () => {
- expect(vm.$el.querySelector('.js-stuck-no-runners')).not.toBeNull();
- expect(vm.$el.querySelector('.js-stuck-with-tags')).toBeNull();
- expect(vm.$el.querySelector('.js-stuck-no-active-runner')).toBeNull();
+ expect(findStuckNoRunners().exists()).toBe(true);
+ expect(findStuckWithTags().exists()).toBe(false);
+ expect(findStuckNoActiveRunners().exists()).toBe(false);
});
it('renders link to runners page', () => {
- expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+ expect(findRunnerPathLink().attributes('href')).toBe(
'/root/project/runners#js-runners-settings',
);
});
@@ -33,26 +52,27 @@ describe('Stuck Block Job component', () => {
describe('with tags', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
+ createWrapper({
hasNoRunnersForProject: false,
- tags: ['docker', 'gitlab-org'],
+ tags,
runnersPath: '/root/project/runners#js-runners-settings',
});
});
it('renders information about the tags not being set', () => {
- expect(vm.$el.querySelector('.js-stuck-no-runners')).toBeNull();
- expect(vm.$el.querySelector('.js-stuck-with-tags')).not.toBeNull();
- expect(vm.$el.querySelector('.js-stuck-no-active-runner')).toBeNull();
+ expect(findStuckWithTags().exists()).toBe(true);
+ expect(findStuckNoActiveRunners().exists()).toBe(false);
+ expect(findStuckNoRunners().exists()).toBe(false);
});
it('renders tags', () => {
- expect(vm.$el.textContent).toContain('docker');
- expect(vm.$el.textContent).toContain('gitlab-org');
+ findAllBadges().wrappers.forEach((badgeElt, index) => {
+ return expect(badgeElt.text()).toBe(tags[index]);
+ });
});
it('renders link to runners page', () => {
- expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+ expect(findRunnerPathLink().attributes('href')).toBe(
'/root/project/runners#js-runners-settings',
);
});
@@ -60,20 +80,20 @@ describe('Stuck Block Job component', () => {
describe('without active runners', () => {
beforeEach(() => {
- vm = mountComponent(Component, {
+ createWrapper({
hasNoRunnersForProject: false,
runnersPath: '/root/project/runners#js-runners-settings',
});
});
it('renders information about project not having runners', () => {
- expect(vm.$el.querySelector('.js-stuck-no-runners')).toBeNull();
- expect(vm.$el.querySelector('.js-stuck-with-tags')).toBeNull();
- expect(vm.$el.querySelector('.js-stuck-no-active-runner')).not.toBeNull();
+ expect(findStuckNoActiveRunners().exists()).toBe(true);
+ expect(findStuckNoRunners().exists()).toBe(false);
+ expect(findStuckWithTags().exists()).toBe(false);
});
it('renders link to runners page', () => {
- expect(vm.$el.querySelector('.js-runners-path').getAttribute('href')).toEqual(
+ expect(findRunnerPathLink().attributes('href')).toBe(
'/root/project/runners#js-runners-settings',
);
});