Skip to content

G
gitlab-ce
Commit ca7f684f authored by Frédéric Caplette's avatar Frédéric Caplette Committed by Andrew Fontaine
Browse files
Options

Refactor job_app to avoid js selectors 

This commit removes all js selectors that are
use in job_app and related tests. While I was
at it, I also refactored most of the test files
I was touching to use VTU.
parent f4b8fb60
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 244 deletions
app/assets/javascripts/jobs/components/empty_state.vue
View file @ ca7f684f
......@@ -71,9 +71,9 @@ export default {
<div class="col-12">
<div class="text-content">
<h4 class="js-job-empty-state-title text-center">{{ title }}</h4>
<h4 class="text-center" data-testid="job-empty-state-title">{{ title }}</h4>
<p v-if="content" class="js-job-empty-state-content">{{ content }}</p>
<p v-if="content" data-testid="job-empty-state-content">{{ content }}</p>
</div>
<manual-variables-form
v-if="shouldRenderManualVariables"
......@@ -85,7 +85,8 @@ export default {
<gl-link
:href="action.path"
:data-method="action.method"
class="js-job-empty-state-action btn btn-primary"
class="btn btn-primary"
data-testid="job-empty-state-action"
>{{ action.button_title }}</gl-link
>
</div>
......
app/assets/javascripts/jobs/components/job_app.vue
View file @ ca7f684f
......@@ -198,17 +198,13 @@ export default {
</script>
<template>
<div>
<gl-loading-icon
v-if="isLoading"
size="lg"
class="js-job-loading qa-loading-animation prepend-top-20"
/>
<gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation prepend-top-20" />
<template v-else-if="shouldRenderContent">
<div class="js-job-content build-page">
<div class="build-page" data-testid="job-content">
<!-- Header Section -->
<header>
<div class="js-build-header build-header top-area">
<div class="build-header top-area">
<ci-header
:status="job.status"
:item-id="job.id"
......@@ -230,7 +226,6 @@ export default {
<!-- Body Section -->
<stuck-block
v-if="job.stuck"
class="js-job-stuck"
:has-no-runners-for-project="hasRunnersForProject"
:tags="job.tags"
:runners-path="runnerSettingsUrl"
......@@ -238,13 +233,11 @@ export default {
<unmet-prerequisites-block
v-if="hasUnmetPrerequisitesFailure"
class="js-job-failed"
:help-path="deploymentHelpUrl"
/>
<shared-runner
v-if="shouldRenderSharedRunnerLimitWarning"
class="js-shared-runner-limit"
:quota-used="job.runners.quota.used"
:quota-limit="job.runners.quota.limit"
:runners-path="runnerHelpUrl"
......@@ -254,7 +247,6 @@ export default {
<environments-block
v-if="hasEnvironment"
class="js-job-environment"
:deployment-status="job.deployment_status"
:deployment-cluster="job.deployment_cluster"
:icon-status="job.status"
......@@ -262,7 +254,7 @@ export default {
<erased-block
v-if="job.erased_at"
class="js-job-erased-block"
data-testid="job-erased-block"
:user="job.erased_by"
:erased-at="job.erased_at"
/>
......@@ -270,8 +262,9 @@ export default {
<div
v-if="job.archived"
ref="sticky"
class="js-archived-job gl-mt-3 archived-job"
class="gl-mt-3 archived-job"
:class="{ 'sticky-top border-bottom-0': hasTrace }"
data-testid="archived-job"
>
<icon name="lock" class="align-text-bottom" />
{{ __('This job is archived. Only the complete pipeline can be retried.') }}
......@@ -305,7 +298,6 @@ export default {
<!-- empty state -->
<empty-state
v-if="!hasTrace"
class="js-job-empty-state"
:illustration-path="emptyStateIllustration.image"
:illustration-size-class="emptyStateIllustration.size"
:title="emptyStateTitle"
......@@ -323,12 +315,12 @@ export default {
<sidebar
v-if="shouldRenderContent"
class="js-job-sidebar"
:class="{
'right-sidebar-expanded': isSidebarOpen,
'right-sidebar-collapsed': !isSidebarOpen,
}"
:runner-help-url="runnerHelpUrl"
data-testid="job-sidebar"
/>
</div>
</template>
app/assets/javascripts/jobs/components/job_log_controllers.vue
View file @ ca7f684f
......@@ -71,13 +71,14 @@ export default {
<template>
<div class="top-bar">
<!-- truncate information -->
<div class="js-truncated-info truncated-info d-none d-sm-block float-left">
<div class="truncated-info d-none d-sm-block float-left" data-testid="log-truncated-info">
<template v-if="isTraceSizeVisible">
{{ jobLogSize }}
<gl-link
v-if="rawPath"
:href="rawPath"
class="js-raw-link text-plain text-underline gl-ml-2"
class="text-plain text-underline gl-ml-2"
data-testid="raw-link"
>{{ s__('Job|Complete Raw') }}</gl-link
>
</template>
......@@ -91,7 +92,8 @@ export default {
v-gl-tooltip.body
:title="s__('Job|Show complete raw')"
:href="rawPath"
class="js-raw-link-controller controllers-buttons"
class="controllers-buttons"
data-testid="job-raw-link-controller"
>
<icon name="doc-text" />
</gl-link>
......@@ -102,7 +104,8 @@ export default {
:title="s__('Job|Erase job log')"
:href="erasePath"
:data-confirm="__('Are you sure you want to erase this build?')"
class="js-erase-link controllers-buttons"
class="controllers-buttons"
data-testid="job-log-erase-link"
data-method="post"
>
<icon name="remove" />
......@@ -114,7 +117,8 @@ export default {
<gl-deprecated-button
:disabled="isScrollTopDisabled"
type="button"
class="js-scroll-top btn-scroll btn-transparent btn-blank"
class="btn-scroll btn-transparent btn-blank"
data-testid="job-controller-scroll-top"
@click="handleScrollToTop"
>
<icon name="scroll_up" />
......@@ -126,6 +130,7 @@ export default {
:disabled="isScrollBottomDisabled"
class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
:class="{ animate: isScrollingDown }"
data-testid="job-controller-scroll-bottom"
@click="handleScrollToBottom"
v-html="$options.scrollDown"
/>
......
app/assets/javascripts/jobs/components/manual_variables_form.vue
View file @ ca7f684f
......@@ -100,7 +100,7 @@ export default {
};
</script>
<template>
<div class="js-manual-vars-form col-12">
<div class="col-12" data-testid="manual-vars-form">
<label>{{ s__('CiVariables|Variables') }}</label>
<div class="ci-table">
......
app/assets/javascripts/jobs/components/sidebar.vue
View file @ ca7f684f
......@@ -147,7 +147,8 @@ export default {
<gl-link
v-if="job.new_issue_path"
:href="job.new_issue_path"
class="js-new-issue btn btn-success btn-inverted float-left mr-2"
class="btn btn-success btn-inverted float-left mr-2"
data-testid="job-new-issue"
>{{ __('New issue') }}</gl-link
>
<gl-link
......
app/assets/javascripts/jobs/components/stuck_block.vue
View file @ ca7f684f
......@@ -26,22 +26,27 @@ export default {
</script>
<template>
<div class="bs-callout bs-callout-warning">
<p v-if="tags.length" class="js-stuck-with-tags gl-mb-0">
<p v-if="tags.length" class="gl-mb-0" data-testid="job-stuck-with-tags">
{{
s__(`This job is stuck because you don't have
any active runners online or available with any of these tags assigned to them:`)
}}
<span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2">
<span
v-for="(tag, index) in tags"
:key="index"
class="badge badge-primary gl-mr-2"
data-testid="badge"
>
{{ tag }}
</span>
</p>
<p v-else-if="hasNoRunnersForProject" class="js-stuck-no-runners gl-mb-0">
<p v-else-if="hasNoRunnersForProject" class="gl-mb-0" data-testid="job-stuck-no-runners">
{{
s__(`Job|This job is stuck because the project
doesn't have any runners online assigned to it.`)
}}
</p>
<p v-else class="js-stuck-no-active-runner gl-mb-0">
<p v-else class="gl-mb-0" data-testid="job-stuck-no-active-runners">
{{
s__(`This job is stuck because you don't
have any active runners that can run this job.`)
......@@ -49,7 +54,7 @@ export default {
</p>
{{ __('Go to project') }}
<gl-link v-if="runnersPath" :href="runnersPath" class="js-runners-path">
<gl-link v-if="runnersPath" :href="runnersPath">
{{ __('CI settings') }}
</gl-link>
</div>
......
spec/features/projects/jobs/user_browses_job_spec.rb
View file @ ca7f684f
......@@ -26,7 +26,7 @@ RSpec.describe 'User browses a job', :js do
# scroll to the top of the page first
execute_script "window.scrollTo(0,0)"
accept_confirm { find('.js-erase-link').click }
accept_confirm { find('[data-testid="job-log-erase-link"]').click }
expect(page).to have_no_css('.artifacts')
expect(build).not_to have_trace
......
spec/features/projects/jobs_spec.rb
View file @ ca7f684f
......@@ -282,7 +282,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
href = new_project_issue_path(project, options)
page.within('.build-sidebar') do
expect(find('.js-new-issue')['href']).to include(href)
expect(find('[data-testid="job-new-issue"]')['href']).to include(href)
end
end
end
......@@ -425,7 +425,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
it do
wait_for_all_requests
expect(page).to have_css('.js-raw-link-controller')
expect(page).to have_css('[data-testid="job-raw-link-controller"]')
end
end
......@@ -875,7 +875,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
visit project_job_path(project, job)
wait_for_requests
page.within('.js-job-erased-block') do
page.within('[data-testid="job-erased-block"]') do
expect(page).to have_content('Job has been erased')
end
end
......@@ -888,7 +888,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
visit project_job_path(project, job)
wait_for_requests
expect(page).not_to have_css('.js-job-erased-block')
expect(page).not_to have_css('[data-testid="job-erased-block"]')
end
end
......@@ -901,8 +901,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
visit project_job_path(project, job)
wait_for_requests
expect(page).to have_css('.js-job-sidebar.right-sidebar-collapsed', visible: false)
expect(page).not_to have_css('.js-job-sidebar.right-sidebar-expanded', visible: false)
expect(page).to have_css('[data-testid="job-sidebar"].right-sidebar-collapsed', visible: false)
expect(page).not_to have_css('[data-testid="job-sidebar"].right-sidebar-expanded', visible: false)
end
end
......@@ -913,8 +913,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
visit project_job_path(project, job)
wait_for_requests
expect(page).to have_css('.js-job-sidebar.right-sidebar-expanded')
expect(page).not_to have_css('.js-job-sidebar.right-sidebar-collapsed')
expect(page).to have_css('[data-testid="job-sidebar"].right-sidebar-expanded')
expect(page).not_to have_css('[data-testid="job-sidebar"].right-sidebar-collapsed')
end
end
......@@ -929,7 +929,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner) }
it 'renders message about job being stuck because no runners are active' do
expect(page).to have_css('.js-stuck-no-active-runner')
expect(page).to have_selector('[data-testid="job-stuck-no-active-runners"]')
expect(page).to have_content("This job is stuck because you don't have any active runners that can run this job.")
end
end
......@@ -939,7 +939,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner, tag_list: %w(docker linux)) }
it 'renders message about job being stuck because of no runners with the specified tags' do
expect(page).to have_css('.js-stuck-with-tags')
expect(page).to have_selector('[data-testid="job-stuck-with-tags"')
expect(page).to have_content("This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:")
end
end
......@@ -949,7 +949,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner, tag_list: %w(docker linux)) }
it 'renders message about job being stuck because of no runners with the specified tags' do
expect(page).to have_css('.js-stuck-with-tags')
expect(page).to have_selector('[data-testid="job-stuck-with-tags"')
expect(page).to have_content("This job is stuck because you don't have any active runners online or available with any of these tags assigned to them:")
end
end
......@@ -957,8 +957,8 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
context 'without any runners available' do
let(:job) { create(:ci_build, :pending, pipeline: pipeline) }
it 'renders message about job being stuck because not runners are available' do
expect(page).to have_css('.js-stuck-no-active-runner')
it 'renders message about job being stuck because no runners are available' do
expect(page).to have_selector('[data-testid="job-stuck-no-active-runners"]')
expect(page).to have_content("This job is stuck because you don't have any active runners that can run this job.")
end
end
......@@ -968,7 +968,7 @@ RSpec.describe 'Jobs', :clean_gitlab_redis_shared_state do
let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner) }
it 'renders message about job being stuck because runners are offline' do
expect(page).to have_css('.js-stuck-no-runners')
expect(page).to have_selector('[data-testid="job-stuck-no-runners"')
expect(page).to have_content("This job is stuck because the project doesn't have any runners online assigned to it.")
end
end
......
spec/frontend/jobs/components/empty_state_spec.js
View file @ ca7f684f
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);
});
});
});
spec/frontend/jobs/components/job_app_spec.js
View file @ ca7f684f
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 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';
......@@ -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);
});
});
});
spec/frontend/jobs/components/job_log_controllers_spec.js
View file @ ca7f684f
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');
});
});
});
......
spec/frontend/jobs/components/sidebar_spec.js
View file @ ca7f684f
......@@ -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', () => {
......
spec/frontend/jobs/components/stuck_block_spec.js
View file @ ca7f684f
import Vue from 'vue';
import component from '~/jobs/components/stuck_block.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';
import { 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('[data-testid="badge"]');
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',
);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7