diff options
Diffstat (limited to 'spec/frontend/pipelines/empty_state_spec.js')
-rw-r--r-- | spec/frontend/pipelines/empty_state_spec.js | 86 |
1 files changed, 40 insertions, 46 deletions
diff --git a/spec/frontend/pipelines/empty_state_spec.js b/spec/frontend/pipelines/empty_state_spec.js index 79356664834..28a73c8863c 100644 --- a/spec/frontend/pipelines/empty_state_spec.js +++ b/spec/frontend/pipelines/empty_state_spec.js @@ -1,58 +1,52 @@ -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'); + }); }); }); |