Commit 9b1c0308 authored by Nicolas Dular's avatar Nicolas Dular

Refactor pipeline empty state specs

Aligns the spec with our current testing standards and prepares it for
a future experiment.
parent 9e1a552f
......@@ -29,11 +29,13 @@ export default {
</div>
<div class="col-12">
<div class="text-content">
<div class="gl-text-content">
<template v-if="canSetCi">
<h4 class="text-center">{{ s__('Pipelines|Build with confidence') }}</h4>
<h4 class="gl-text-center" data-testid="header-text">
{{ s__('Pipelines|Build with confidence') }}
</h4>
<p>
<p data-testid="info-text">
{{
s__(`Pipelines|Continuous Integration can help
catch bugs by running your tests automatically,
......@@ -42,12 +44,11 @@ export default {
}}
</p>
<div class="text-center">
<div class="gl-text-center">
<gl-button
:href="helpPagePath"
variant="info"
category="primary"
class="js-get-started-pipelines"
data-testid="get-started-pipelines"
>
{{ s__('Pipelines|Get started with Pipelines') }}
......@@ -55,7 +56,7 @@ export default {
</div>
</template>
<p v-else class="text-center">
<p v-else class="gl-text-center">
{{ s__('Pipelines|This project is not currently set up to run pipelines.') }}
</p>
</div>
......
import Vue from 'vue';
import emptyStateComp from '~/pipelines/components/pipelines_list/empty_state.vue';
import mountComponent from '../helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import EmptyState from '~/pipelines/components/pipelines_list/empty_state.vue';
describe('Pipelines Empty State', () => {
let component;
let EmptyStateComponent;
let wrapper;
const findGetStartedButton = () => wrapper.find('[data-testid="get-started-pipelines"]');
const findInfoText = () => wrapper.find('[data-testid="info-text"]').text();
const createWrapper = () => {
wrapper = shallowMount(EmptyState, {
propsData: {
helpPagePath: 'foo',
emptyStateSvgPath: 'foo',
canSetCi: true,
},
});
};
beforeEach(() => {
EmptyStateComponent = Vue.extend(emptyStateComp);
describe('renders', () => {
beforeEach(() => {
createWrapper();
});
component = mountComponent(EmptyStateComponent, {
helpPagePath: 'foo',
emptyStateSvgPath: 'foo',
canSetCi: true,
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
});
afterEach(() => {
component.$destroy();
});
it('should render empty state SVG', () => {
expect(wrapper.find('img').attributes('src')).toBe('foo');
});
it('should render empty state SVG', () => {
expect(component.$el.querySelector('.svg-content svg')).toBeDefined();
});
it('should render empty state header', () => {
expect(wrapper.find('[data-testid="header-text"]').text()).toBe('Build with confidence');
});
it('should render empty state information', () => {
expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence');
expect(
component.$el
.querySelector('p')
.innerHTML.trim()
.replace(/\n+\s+/m, ' ')
.replace(/\s\s+/g, ' '),
).toContain('Continuous Integration can help catch bugs by running your tests automatically,');
expect(
component.$el
.querySelector('p')
.innerHTML.trim()
.replace(/\n+\s+/m, ' ')
.replace(/\s\s+/g, ' '),
).toContain(
'while Continuous Deployment can help you deliver code to your product environment',
);
});
it('should render a link with provided help path', () => {
expect(findGetStartedButton().attributes('href')).toBe('foo');
});
it('should render a link with provided help path', () => {
expect(component.$el.querySelector('.js-get-started-pipelines').getAttribute('href')).toEqual(
'foo',
);
it('should render empty state information', () => {
expect(findInfoText()).toContain(
'Continuous Integration can help catch bugs by running your tests automatically',
'while Continuous Deployment can help you deliver code to your product environment',
);
});
expect(component.$el.querySelector('.js-get-started-pipelines').textContent).toContain(
'Get started with Pipelines',
);
it('should render a button', () => {
expect(findGetStartedButton().text()).toBe('Get started with Pipelines');
});
});
});
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