diff options
Diffstat (limited to 'spec/frontend/batch_comments/components/publish_dropdown_spec.js')
-rw-r--r-- | spec/frontend/batch_comments/components/publish_dropdown_spec.js | 87 |
1 files changed, 15 insertions, 72 deletions
diff --git a/spec/frontend/batch_comments/components/publish_dropdown_spec.js b/spec/frontend/batch_comments/components/publish_dropdown_spec.js index fb3c532174d..f235867f002 100644 --- a/spec/frontend/batch_comments/components/publish_dropdown_spec.js +++ b/spec/frontend/batch_comments/components/publish_dropdown_spec.js @@ -1,96 +1,39 @@ -import Vue from 'vue'; -import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; +import Vuex from 'vuex'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue'; import { createStore } from '~/mr_notes/stores'; import '~/behaviors/markdown/render_gfm'; import { createDraft } from '../mock_data'; +const localVue = createLocalVue(); +localVue.use(Vuex); + describe('Batch comments publish dropdown component', () => { - let vm; - let Component; + let wrapper; - function createComponent(extendStore = () => {}) { + function createComponent() { const store = createStore(); store.state.batchComments.drafts.push(createDraft(), { ...createDraft(), id: 2 }); - extendStore(store); - - vm = mountComponentWithStore(Component, { store }); + wrapper = shallowMount(PreviewDropdown, { + store, + }); } - beforeAll(() => { - Component = Vue.extend(PreviewDropdown); - }); - afterEach(() => { - vm.$destroy(); - }); - - it('toggles dropdown when clicking button', done => { - createComponent(); - - jest.spyOn(vm.$store, 'dispatch'); - - vm.$el.querySelector('.review-preview-dropdown-toggle').click(); - - expect(vm.$store.dispatch).toHaveBeenCalledWith( - 'batchComments/toggleReviewDropdown', - expect.anything(), - ); - - setImmediate(() => { - expect(vm.$el.classList).toContain('show'); - - done(); - }); - }); - - it('toggles dropdown when clicking body', () => { - createComponent(); - - vm.$store.state.batchComments.showPreviewDropdown = true; - - jest.spyOn(vm.$store, 'dispatch').mockImplementation(); - - document.body.click(); - - expect(vm.$store.dispatch).toHaveBeenCalledWith( - 'batchComments/toggleReviewDropdown', - undefined, - ); + wrapper.destroy(); }); it('renders list of drafts', () => { - createComponent(store => { - Object.assign(store.state.notes, { - isNotesFetched: true, - }); - }); - - expect(vm.$el.querySelectorAll('.dropdown-content li').length).toBe(2); - }); - - it('adds is-last class to last item', () => { - createComponent(store => { - Object.assign(store.state.notes, { - isNotesFetched: true, - }); - }); - - expect(vm.$el.querySelectorAll('.dropdown-content li')[1].querySelector('.is-last')).not.toBe( - null, - ); - }); - - it('renders draft count in dropdown title', () => { createComponent(); - expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('2 pending comments'); + expect(wrapper.findAll(GlDropdownItem).length).toBe(2); }); - it('renders publish button in footer', () => { + it('renders draft count in dropdown title', () => { createComponent(); - expect(vm.$el.querySelector('.dropdown-footer .js-publish-draft-button')).not.toBe(null); + expect(wrapper.find(GlDropdown).props('headerText')).toEqual('2 pending comments'); }); }); |