diff options
Diffstat (limited to 'spec/frontend/badges')
-rw-r--r-- | spec/frontend/badges/components/badge_settings_spec.js | 120 |
1 files changed, 37 insertions, 83 deletions
diff --git a/spec/frontend/badges/components/badge_settings_spec.js b/spec/frontend/badges/components/badge_settings_spec.js index b6a86746598..769be7cb1bd 100644 --- a/spec/frontend/badges/components/badge_settings_spec.js +++ b/spec/frontend/badges/components/badge_settings_spec.js @@ -1,117 +1,71 @@ -import Vue from 'vue'; -import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import Vuex from 'vuex'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlModal } from '@gitlab/ui'; import store from '~/badges/store'; import BadgeSettings from '~/badges/components/badge_settings.vue'; +import BadgeList from '~/badges/components/badge_list.vue'; +import BadgeListRow from '~/badges/components/badge_list_row.vue'; import { createDummyBadge } from '../dummy_badge'; -describe('BadgeSettings component', () => { - const Component = Vue.extend(BadgeSettings); - let vm; +const localVue = createLocalVue(); +localVue.use(Vuex); - beforeEach(() => { - setFixtures(` - <div id="dummy-element"></div> - <button - id="dummy-modal-button" - type="button" - data-toggle="modal" - data-target="#delete-badge-modal" - >Show modal</button> - `); +describe('BadgeSettings component', () => { + let wrapper; + const badge = createDummyBadge(); - // Can be removed once GlLoadingIcon no longer throws a warning - jest.spyOn(global.console, 'warn').mockImplementation(() => jest.fn()); + const createComponent = (isEditing = false) => { + store.state.badges = [badge]; + store.state.kind = 'project'; + store.state.isEditing = isEditing; - vm = mountComponentWithStore(Component, { - el: '#dummy-element', + wrapper = shallowMount(BadgeSettings, { store, + localVue, + stubs: { + 'badge-list': BadgeList, + 'badge-list-row': BadgeListRow, + }, }); + }; + + beforeEach(() => { + createComponent(); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - it('displays modal if button is clicked', done => { - const badge = createDummyBadge(); - store.state.badgeInModal = badge; - const modal = vm.$el.querySelector('#delete-badge-modal'); - const button = document.getElementById('dummy-modal-button'); + it('displays modal if button for deleting a badge is clicked', async () => { + const button = wrapper.find('[data-testid="delete-badge"]'); - button.click(); + button.vm.$emit('click'); + await wrapper.vm.$nextTick(); - Vue.nextTick() - .then(() => { - expect(modal.innerText).toMatch('Delete badge?'); - const badgeElement = modal.querySelector('img.project-badge'); - expect(badgeElement).not.toBe(null); - expect(badgeElement.getAttribute('src')).toBe(badge.renderedImageUrl); - }) - .then(done) - .catch(done.fail); + const modal = wrapper.find(GlModal); + expect(modal.isVisible()).toBe(true); }); it('displays a form to add a badge', () => { - const form = vm.$el.querySelector('form:nth-of-type(2)'); - - expect(form).not.toBe(null); - const button = form.querySelector('.btn-success'); - - expect(button).not.toBe(null); - expect(button).toHaveText(/Add badge/); + expect(wrapper.find('[data-testid="add-new-badge"]').isVisible()).toBe(true); }); it('displays badge list', () => { - const badgeListElement = vm.$el.querySelector('.card'); - - expect(badgeListElement).not.toBe(null); - expect(badgeListElement).toBeVisible(); - expect(badgeListElement.innerText).toMatch('Your badges'); + expect(wrapper.find(BadgeList).isVisible()).toBe(true); }); describe('when editing', () => { - beforeEach(done => { - store.state.isEditing = true; - - Vue.nextTick() - .then(done) - .catch(done.fail); + beforeEach(() => { + createComponent(true); }); it('displays a form to edit a badge', () => { - const form = vm.$el.querySelector('form:nth-of-type(1)'); - - expect(form).not.toBe(null); - const cancelButton = form.querySelector('[data-testid="cancelEditing"]'); - - expect(cancelButton).not.toBe(null); - expect(cancelButton).toHaveText(/Cancel/); - const submitButton = form.querySelector('[data-testid="saveEditing"]'); - - expect(submitButton).not.toBe(null); - expect(submitButton).toHaveText(/Save changes/); + expect(wrapper.find('[data-testid="edit-badge"]').isVisible()).toBe(true); }); it('displays no badge list', () => { - const badgeListElement = vm.$el.querySelector('.card'); - - expect(badgeListElement).toBeHidden(); - }); - }); - - describe('methods', () => { - describe('onSubmitModal', () => { - it('triggers ', () => { - jest.spyOn(vm, 'deleteBadge').mockImplementation(() => Promise.resolve()); - const modal = vm.$el.querySelector('#delete-badge-modal'); - const deleteButton = modal.querySelector('.btn-danger'); - - deleteButton.click(); - - const badge = store.state.badgeInModal; - - expect(vm.deleteBadge).toHaveBeenCalledWith(badge); - }); + expect(wrapper.find(BadgeList).isVisible()).toBe(false); }); }); }); |