diff options
Diffstat (limited to 'spec/frontend/batch_comments/components')
6 files changed, 78 insertions, 69 deletions
diff --git a/spec/frontend/batch_comments/components/diff_file_drafts_spec.js b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js index dcb68b1804f..6a5ff1af7c9 100644 --- a/spec/frontend/batch_comments/components/diff_file_drafts_spec.js +++ b/spec/frontend/batch_comments/components/diff_file_drafts_spec.js @@ -1,11 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import DiffFileDrafts from '~/batch_comments/components/diff_file_drafts.vue'; import DraftNote from '~/batch_comments/components/draft_note.vue'; +import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue'; -const localVue = createLocalVue(); - -localVue.use(Vuex); +Vue.use(Vuex); describe('Batch comments diff file drafts component', () => { let vm; @@ -22,9 +22,8 @@ describe('Batch comments diff file drafts component', () => { }, }); - vm = shallowMount(localVue.extend(DiffFileDrafts), { + vm = shallowMount(DiffFileDrafts, { store, - localVue, propsData: { fileHash: 'filehash' }, }); } @@ -42,10 +41,12 @@ describe('Batch comments diff file drafts component', () => { it('renders index of draft note', () => { factory(); - expect(vm.findAll('.js-diff-notes-index').length).toEqual(2); + const elements = vm.findAll(DesignNotePin); + + expect(elements.length).toEqual(2); - expect(vm.findAll('.js-diff-notes-index').at(0).text()).toEqual('1'); + expect(elements.at(0).props('label')).toEqual(1); - expect(vm.findAll('.js-diff-notes-index').at(1).text()).toEqual('2'); + expect(elements.at(1).props('label')).toEqual(2); }); }); diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js index 5d22823e974..6a997ebaaa8 100644 --- a/spec/frontend/batch_comments/components/draft_note_spec.js +++ b/spec/frontend/batch_comments/components/draft_note_spec.js @@ -1,14 +1,15 @@ +import { nextTick } from 'vue'; +import { GlButton, GlBadge } from '@gitlab/ui'; import { getByRole } from '@testing-library/dom'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import { stubComponent } from 'helpers/stub_component'; import DraftNote from '~/batch_comments/components/draft_note.vue'; +import PublishButton from '~/batch_comments/components/publish_button.vue'; import { createStore } from '~/batch_comments/stores'; import NoteableNote from '~/notes/components/noteable_note.vue'; import '~/behaviors/markdown/render_gfm'; import { createDraft } from '../mock_data'; -const localVue = createLocalVue(); - const NoteableNoteStub = stubComponent(NoteableNote, { template: ` <div> @@ -29,12 +30,13 @@ describe('Batch comments draft note component', () => { }; const getList = () => getByRole(wrapper.element, 'list'); + const findSubmitReviewButton = () => wrapper.findComponent(PublishButton); + const findAddCommentButton = () => wrapper.findComponent(GlButton); const createComponent = (propsData = { draft }) => { - wrapper = shallowMount(localVue.extend(DraftNote), { + wrapper = shallowMount(DraftNote, { store, propsData, - localVue, stubs: { NoteableNote: NoteableNoteStub, }, @@ -54,7 +56,7 @@ describe('Batch comments draft note component', () => { it('renders template', () => { createComponent(); - expect(wrapper.find('.draft-pending-label').exists()).toBe(true); + expect(wrapper.findComponent(GlBadge).exists()).toBe(true); const note = wrapper.find(NoteableNote); @@ -65,7 +67,7 @@ describe('Batch comments draft note component', () => { describe('add comment now', () => { it('dispatches publishSingleDraft when clicking', () => { createComponent(); - const publishNowButton = wrapper.find({ ref: 'publishNowButton' }); + const publishNowButton = findAddCommentButton(); publishNowButton.vm.$emit('click'); expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith( @@ -74,45 +76,60 @@ describe('Batch comments draft note component', () => { ); }); - it('sets as loading when draft is publishing', (done) => { + it('sets as loading when draft is publishing', async () => { createComponent(); wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1); - wrapper.vm.$nextTick(() => { - const publishNowButton = wrapper.find({ ref: 'publishNowButton' }); + await nextTick(); + const publishNowButton = findAddCommentButton(); - expect(publishNowButton.props().loading).toBe(true); + expect(publishNowButton.props().loading).toBe(true); + }); - done(); - }); + it('sets as disabled when review is publishing', async () => { + createComponent(); + wrapper.vm.$store.state.batchComments.isPublishing = true; + + await nextTick(); + const publishNowButton = findAddCommentButton(); + + expect(publishNowButton.props().disabled).toBe(true); + expect(publishNowButton.props().loading).toBe(false); + }); + }); + + describe('submit review', () => { + it('sets as disabled when draft is publishing', async () => { + createComponent(); + wrapper.vm.$store.state.batchComments.currentlyPublishingDrafts.push(1); + + await nextTick(); + const publishNowButton = findSubmitReviewButton(); + + expect(publishNowButton.attributes().disabled).toBeTruthy(); }); }); describe('update', () => { - it('dispatches updateDraft', (done) => { + it('dispatches updateDraft', async () => { createComponent(); const note = wrapper.find(NoteableNote); note.vm.$emit('handleEdit'); - wrapper.vm - .$nextTick() - .then(() => { - const formData = { - note: draft, - noteText: 'a', - resolveDiscussion: false, - }; - - note.vm.$emit('handleUpdateNote', formData); - - expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith( - 'batchComments/updateDraft', - formData, - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + const formData = { + note: draft, + noteText: 'a', + resolveDiscussion: false, + }; + + note.vm.$emit('handleUpdateNote', formData); + + expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith( + 'batchComments/updateDraft', + formData, + ); }); }); @@ -130,7 +147,7 @@ describe('Batch comments draft note component', () => { }); describe('quick actions', () => { - it('renders referenced commands', (done) => { + it('renders referenced commands', async () => { createComponent(); wrapper.setProps({ draft: { @@ -141,14 +158,11 @@ describe('Batch comments draft note component', () => { }, }); - wrapper.vm.$nextTick(() => { - const referencedCommands = wrapper.find('.referenced-commands'); + await nextTick(); + const referencedCommands = wrapper.find('.referenced-commands'); - expect(referencedCommands.exists()).toBe(true); - expect(referencedCommands.text()).toContain('test command'); - - done(); - }); + expect(referencedCommands.exists()).toBe(true); + expect(referencedCommands.text()).toContain('test command'); }); }); diff --git a/spec/frontend/batch_comments/components/drafts_count_spec.js b/spec/frontend/batch_comments/components/drafts_count_spec.js index 5f74de9c014..390ef21929c 100644 --- a/spec/frontend/batch_comments/components/drafts_count_spec.js +++ b/spec/frontend/batch_comments/components/drafts_count_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; import DraftsCount from '~/batch_comments/components/drafts_count.vue'; import { createStore } from '~/batch_comments/stores'; @@ -27,17 +27,14 @@ describe('Batch comments drafts count component', () => { expect(vm.$el.textContent).toContain('1'); }); - it('renders screen reader text', (done) => { + it('renders screen reader text', async () => { const el = vm.$el.querySelector('.sr-only'); expect(el.textContent).toContain('draft'); vm.$store.state.batchComments.drafts.push('comment 2'); - vm.$nextTick(() => { - expect(el.textContent).toContain('drafts'); - - done(); - }); + await nextTick(); + expect(el.textContent).toContain('drafts'); }); }); diff --git a/spec/frontend/batch_comments/components/preview_dropdown_spec.js b/spec/frontend/batch_comments/components/preview_dropdown_spec.js index 5327879f003..bf3bbf4de26 100644 --- a/spec/frontend/batch_comments/components/preview_dropdown_spec.js +++ b/spec/frontend/batch_comments/components/preview_dropdown_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue'; @@ -49,7 +49,7 @@ describe('Batch comments preview dropdown', () => { wrapper.findByTestId('preview-item').vm.$emit('click'); - await Vue.nextTick(); + await nextTick(); expect(setCurrentFileHash).toHaveBeenCalledWith(expect.anything(), 'hash'); expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' }); @@ -63,7 +63,7 @@ describe('Batch comments preview dropdown', () => { wrapper.findByTestId('preview-item').vm.$emit('click'); - await Vue.nextTick(); + await nextTick(); expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 }); }); diff --git a/spec/frontend/batch_comments/components/publish_button_spec.js b/spec/frontend/batch_comments/components/publish_button_spec.js index eca424814b4..9a782ec09b6 100644 --- a/spec/frontend/batch_comments/components/publish_button_spec.js +++ b/spec/frontend/batch_comments/components/publish_button_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; import PublishButton from '~/batch_comments/components/publish_button.vue'; import { createStore } from '~/batch_comments/stores'; @@ -29,13 +29,10 @@ describe('Batch comments publish button component', () => { expect(vm.$store.dispatch).toHaveBeenCalledWith('batchComments/publishReview', undefined); }); - it('sets loading when isPublishing is true', (done) => { + it('sets loading when isPublishing is true', async () => { vm.$store.state.batchComments.isPublishing = true; - vm.$nextTick(() => { - expect(vm.$el.getAttribute('disabled')).toBe('disabled'); - - done(); - }); + await nextTick(); + expect(vm.$el.getAttribute('disabled')).toBe('disabled'); }); }); diff --git a/spec/frontend/batch_comments/components/publish_dropdown_spec.js b/spec/frontend/batch_comments/components/publish_dropdown_spec.js index bd8091c20e0..a3168931f1f 100644 --- a/spec/frontend/batch_comments/components/publish_dropdown_spec.js +++ b/spec/frontend/batch_comments/components/publish_dropdown_spec.js @@ -1,13 +1,13 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; 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); +Vue.use(Vuex); describe('Batch comments publish dropdown component', () => { let wrapper; |