diff options
Diffstat (limited to 'spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js')
-rw-r--r-- | spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js | 120 |
1 files changed, 65 insertions, 55 deletions
diff --git a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js index e8a6e259837..7cd94deb3da 100644 --- a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js +++ b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js @@ -1,99 +1,109 @@ -import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; -import { TEST_HOST } from 'jest/helpers/test_constants'; -import promoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue'; -import eventHub from '~/pages/milestones/shared/event_hub'; +import { GlModal } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { TEST_HOST } from 'helpers/test_constants'; +import { setHTMLFixture } from 'helpers/fixtures'; +import waitForPromises from 'helpers/wait_for_promises'; +import PromoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue'; import axios from '~/lib/utils/axios_utils'; +import * as urlUtils from '~/lib/utils/url_utility'; +import * as flash from '~/flash'; + +jest.mock('~/lib/utils/url_utility'); +jest.mock('~/flash'); describe('Promote milestone modal', () => { - let vm; - const Component = Vue.extend(promoteMilestoneModal); + let wrapper; const milestoneMockData = { milestoneTitle: 'v1.0', url: `${TEST_HOST}/dummy/promote/milestones`, groupName: 'group', }; - describe('Modal title and description', () => { - beforeEach(() => { - vm = mountComponent(Component, milestoneMockData); + const promoteButton = () => document.querySelector('.js-promote-project-milestone-button'); + + beforeEach(() => { + setHTMLFixture(`<button + class="js-promote-project-milestone-button" + data-group-name="${milestoneMockData.groupName}" + data-milestone-title="${milestoneMockData.milestoneTitle}" + data-url="${milestoneMockData.url}"> + Promote + </button>`); + wrapper = shallowMount(PromoteMilestoneModal); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('Modal opener button', () => { + it('button gets disabled when the modal opens', () => { + expect(promoteButton().disabled).toBe(false); + + promoteButton().click(); + + expect(promoteButton().disabled).toBe(true); + }); + + it('button gets enabled when the modal closes', () => { + promoteButton().click(); + + wrapper.findComponent(GlModal).vm.$emit('hide'); + + expect(promoteButton().disabled).toBe(false); }); + }); - afterEach(() => { - vm.$destroy(); + describe('Modal title and description', () => { + beforeEach(() => { + promoteButton().click(); }); it('contains the proper description', () => { - expect(vm.text).toContain( + expect(wrapper.vm.text).toContain( `Promoting ${milestoneMockData.milestoneTitle} will make it available for all projects inside ${milestoneMockData.groupName}.`, ); }); it('contains the correct title', () => { - expect(vm.title).toEqual('Promote v1.0 to group milestone?'); + expect(wrapper.vm.title).toBe('Promote v1.0 to group milestone?'); }); }); describe('When requesting a milestone promotion', () => { beforeEach(() => { - vm = mountComponent(Component, { - ...milestoneMockData, - }); - jest.spyOn(eventHub, '$emit').mockImplementation(() => {}); - }); - - afterEach(() => { - vm.$destroy(); + promoteButton().click(); }); - it('redirects when a milestone is promoted', done => { + it('redirects when a milestone is promoted', async () => { const responseURL = `${TEST_HOST}/dummy/endpoint`; - jest.spyOn(axios, 'post').mockImplementation(url => { + jest.spyOn(axios, 'post').mockImplementation((url) => { expect(url).toBe(milestoneMockData.url); - expect(eventHub.$emit).toHaveBeenCalledWith( - 'promoteMilestoneModal.requestStarted', - milestoneMockData.url, - ); return Promise.resolve({ - request: { - responseURL, + data: { + url: responseURL, }, }); }); - vm.onSubmit() - .then(() => { - expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { - milestoneUrl: milestoneMockData.url, - successful: true, - }); - }) - .then(done) - .catch(done.fail); + wrapper.findComponent(GlModal).vm.$emit('primary'); + await waitForPromises(); + + expect(urlUtils.visitUrl).toHaveBeenCalledWith(responseURL); }); - it('displays an error if promoting a milestone failed', done => { + it('displays an error if promoting a milestone failed', async () => { const dummyError = new Error('promoting milestone failed'); dummyError.response = { status: 500 }; - jest.spyOn(axios, 'post').mockImplementation(url => { + jest.spyOn(axios, 'post').mockImplementation((url) => { expect(url).toBe(milestoneMockData.url); - expect(eventHub.$emit).toHaveBeenCalledWith( - 'promoteMilestoneModal.requestStarted', - milestoneMockData.url, - ); return Promise.reject(dummyError); }); - vm.onSubmit() - .catch(error => { - expect(error).toBe(dummyError); - expect(eventHub.$emit).toHaveBeenCalledWith('promoteMilestoneModal.requestFinished', { - milestoneUrl: milestoneMockData.url, - successful: false, - }); - }) - .then(done) - .catch(done.fail); + wrapper.findComponent(GlModal).vm.$emit('primary'); + await waitForPromises(); + + expect(flash.deprecatedCreateFlash).toHaveBeenCalledWith(dummyError); }); }); }); |