diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-30 00:09:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-01-30 00:09:22 +0300 |
commit | 27d314277bfe7fffec215efa9b1833a23bb82940 (patch) | |
tree | 898c606409718e70579beea62174624f84e28629 /spec/javascripts | |
parent | 6b9d3a4e8351e662c4586b24bb152de78ae9e3bf (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/javascripts')
-rw-r--r-- | spec/javascripts/pipelines/header_component_spec.js | 55 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/header_ci_component_spec.js | 37 |
2 files changed, 58 insertions, 34 deletions
diff --git a/spec/javascripts/pipelines/header_component_spec.js b/spec/javascripts/pipelines/header_component_spec.js index 8c033447ce4..9043f30397d 100644 --- a/spec/javascripts/pipelines/header_component_spec.js +++ b/spec/javascripts/pipelines/header_component_spec.js @@ -8,6 +8,7 @@ describe('Pipeline details header', () => { let props; beforeEach(() => { + spyOn(eventHub, '$emit'); HeaderComponent = Vue.extend(headerComponent); const threeWeeksAgo = new Date(); @@ -33,8 +34,9 @@ describe('Pipeline details header', () => { email: 'foo@bar.com', avatar_url: 'link', }, - retry_path: 'path', - delete_path: 'path', + retry_path: 'retry', + cancel_path: 'cancel', + delete_path: 'delete', }, isLoading: false, }; @@ -43,9 +45,14 @@ describe('Pipeline details header', () => { }); afterEach(() => { + eventHub.$off(); vm.$destroy(); }); + const findDeleteModal = () => document.getElementById(headerComponent.DELETE_MODAL_ID); + const findDeleteModalSubmit = () => + [...findDeleteModal().querySelectorAll('.btn')].find(x => x.textContent === 'Delete pipeline'); + it('should render provided pipeline info', () => { expect( vm.$el @@ -56,22 +63,46 @@ describe('Pipeline details header', () => { }); describe('action buttons', () => { - it('should call postAction when retry button action is clicked', done => { - eventHub.$on('headerPostAction', action => { - expect(action.path).toEqual('path'); - done(); - }); + it('should not trigger eventHub when nothing happens', () => { + expect(eventHub.$emit).not.toHaveBeenCalled(); + }); + it('should call postAction when retry button action is clicked', () => { vm.$el.querySelector('.js-retry-button').click(); + + expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'retry'); + }); + + it('should call postAction when cancel button action is clicked', () => { + vm.$el.querySelector('.js-btn-cancel-pipeline').click(); + + expect(eventHub.$emit).toHaveBeenCalledWith('headerPostAction', 'cancel'); }); - it('should fire modal event when delete button action is clicked', done => { - vm.$root.$on('bv::modal::show', action => { - expect(action.componentId).toEqual('pipeline-delete-modal'); - done(); + it('does not show delete modal', () => { + expect(findDeleteModal()).not.toBeVisible(); + }); + + describe('when delete button action is clicked', () => { + beforeEach(done => { + vm.$el.querySelector('.js-btn-delete-pipeline').click(); + + // Modal needs two ticks to show + vm.$nextTick() + .then(() => vm.$nextTick()) + .then(done) + .catch(done.fail); }); - vm.$el.querySelector('.js-btn-delete-pipeline').click(); + it('should show delete modal', () => { + expect(findDeleteModal()).toBeVisible(); + }); + + it('should call delete when modal is submitted', () => { + findDeleteModalSubmit().click(); + + expect(eventHub.$emit).toHaveBeenCalledWith('headerDeleteAction', 'delete'); + }); }); }); }); diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js index ea2eed2886a..b1abc972e1d 100644 --- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js +++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper'; import headerCi from '~/vue_shared/components/header_ci_component.vue'; describe('Header CI Component', () => { @@ -27,14 +27,6 @@ describe('Header CI Component', () => { email: 'foo@bar.com', avatar_url: 'link', }, - actions: [ - { - label: 'Retry', - path: 'path', - cssClass: 'btn', - isLoading: false, - }, - ], hasSidebarButton: true, }; }); @@ -43,6 +35,8 @@ describe('Header CI Component', () => { vm.$destroy(); }); + const findActionButtons = () => vm.$el.querySelector('.header-action-buttons'); + describe('render', () => { beforeEach(() => { vm = mountComponent(HeaderCi, props); @@ -68,24 +62,23 @@ describe('Header CI Component', () => { expect(vm.$el.querySelector('.js-user-link').innerText.trim()).toContain(props.user.name); }); - it('should render provided actions', () => { - const btn = vm.$el.querySelector('.btn'); + it('should render sidebar toggle button', () => { + expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull(); + }); - expect(btn.tagName).toEqual('BUTTON'); - expect(btn.textContent.trim()).toEqual(props.actions[0].label); + it('should not render header action buttons when empty', () => { + expect(findActionButtons()).toBeNull(); }); + }); - it('should show loading icon', done => { - vm.actions[0].isLoading = true; + describe('slot', () => { + it('should render header action buttons', () => { + vm = mountComponentWithSlots(HeaderCi, { props, slots: { default: 'Test Actions' } }); - Vue.nextTick(() => { - expect(vm.$el.querySelector('.btn .gl-spinner').getAttribute('style')).toBeFalsy(); - done(); - }); - }); + const buttons = findActionButtons(); - it('should render sidebar toggle button', () => { - expect(vm.$el.querySelector('.js-sidebar-build-toggle')).not.toBeNull(); + expect(buttons).not.toBeNull(); + expect(buttons.textContent).toEqual('Test Actions'); }); }); |