diff options
Diffstat (limited to 'spec/frontend/ide/components/commit_sidebar')
9 files changed, 145 insertions, 241 deletions
diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js index ed9d11246ae..c9425f6c9cd 100644 --- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import { projectData, branches } from 'jest/ide/mock_data'; import commitActions from '~/ide/components/commit_sidebar/actions.vue'; @@ -71,15 +71,12 @@ describe('IDE commit sidebar actions', () => { expect(findText()).toContain('Commit to main branch'); }); - it('hides merge request option when project merge requests are disabled', (done) => { + it('hides merge request option when project merge requests are disabled', async () => { createComponent({ hasMR: false }); - vm.$nextTick(() => { - expect(findRadios().length).toBe(2); - expect(findText()).not.toContain('Create a new branch and merge request'); - - done(); - }); + await nextTick(); + expect(findRadios().length).toBe(2); + expect(findText()).not.toContain('Create a new branch and merge request'); }); describe('currentBranchText', () => { @@ -105,22 +102,18 @@ describe('IDE commit sidebar actions', () => { expect(vm.$store.dispatch).not.toHaveBeenCalled(); }); - it('calls again after staged changes', (done) => { + it('calls again after staged changes', async () => { createComponent({ currentBranchId: null }); vm.$store.state.currentBranchId = 'main'; vm.$store.state.changedFiles.push({}); vm.$store.state.stagedFiles.push({}); - vm.$nextTick() - .then(() => { - expect(vm.$store.dispatch).toHaveBeenCalledWith( - ACTION_UPDATE_COMMIT_ACTION, - expect.anything(), - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$store.dispatch).toHaveBeenCalledWith( + ACTION_UPDATE_COMMIT_ACTION, + expect.anything(), + ); }); it.each` diff --git a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js index 50635ffe894..6e4c66cb780 100644 --- a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js @@ -1,11 +1,11 @@ -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import EditorHeader from '~/ide/components/commit_sidebar/editor_header.vue'; import { createStore } from '~/ide/stores'; import { file } from '../../helpers'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); const TEST_FILE_PATH = 'test/file/path'; @@ -16,7 +16,6 @@ describe('IDE commit editor header', () => { const createComponent = (fileProps = {}) => { wrapper = mount(EditorHeader, { store, - localVue, propsData: { activeFile: { ...file(TEST_FILE_PATH), diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js index 83d1bbb842e..d3b2923ac6c 100644 --- a/spec/frontend/ide/components/commit_sidebar/form_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js @@ -1,6 +1,6 @@ import { GlModal } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { stubComponent } from 'helpers/stub_component'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import waitForPromises from 'helpers/wait_for_promises'; @@ -56,7 +56,6 @@ describe('IDE commit form', () => { disabled: findCommitButton().props('disabled'), tooltip: getBinding(findCommitButtonTooltip().element, 'gl-tooltip').value.title, }); - const clickCommitButton = () => findCommitButton().vm.$emit('click'); const findForm = () => wrapper.find('form'); const submitForm = () => findForm().trigger('submit'); const findCommitMessageInput = () => wrapper.find(CommitMessageField); @@ -98,7 +97,7 @@ describe('IDE commit form', () => { it(`at view=${viewFn.name}, ${buttonFn.name} has disabled=${disabled} tooltip=${tooltip}`, async () => { viewFn(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(buttonFn()).toEqual({ disabled, @@ -116,7 +115,7 @@ describe('IDE commit form', () => { goToEditView(); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('renders commit button in compact mode', () => { @@ -135,7 +134,7 @@ describe('IDE commit form', () => { it('when begin commit button is clicked, shows form', async () => { findBeginCommitButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(true); }); @@ -143,7 +142,7 @@ describe('IDE commit form', () => { it('when begin commit button is clicked, sets activity view', async () => { findBeginCommitButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); }); @@ -153,14 +152,14 @@ describe('IDE commit form', () => { setLastCommitMessage('test'); goToEditView(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(true); // Now test that it collapses when lastCommitMsg is cleared setLastCommitMessage(''); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(false); }); @@ -177,7 +176,7 @@ describe('IDE commit form', () => { goToCommitView(); - await wrapper.vm.$nextTick(); + await nextTick(); }); afterEach(() => { @@ -188,12 +187,12 @@ describe('IDE commit form', () => { expect(findForm().exists()).toBe(false); store.state.stagedFiles = []; - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(false); store.state.stagedFiles.push('test'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(false); }); @@ -208,7 +207,7 @@ describe('IDE commit form', () => { goToCommitView(); - await wrapper.vm.$nextTick(); + await nextTick(); }); it('shows form', () => { @@ -222,7 +221,7 @@ describe('IDE commit form', () => { describe('when no changed files', () => { beforeEach(async () => { store.state.stagedFiles = []; - await wrapper.vm.$nextTick(); + await nextTick(); }); it('hides form', () => { @@ -231,7 +230,7 @@ describe('IDE commit form', () => { it('expands again when staged files are added', async () => { store.state.stagedFiles.push('test'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findForm().exists()).toBe(true); }); @@ -240,7 +239,7 @@ describe('IDE commit form', () => { it('updates commitMessage in store on input', async () => { setCommitMessageInput('testing commit message'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(store.state.commit.commitMessage).toBe('testing commit message'); }); @@ -253,14 +252,14 @@ describe('IDE commit form', () => { it('resets commitMessage when clicking discard button', async () => { setCommitMessageInput('testing commit message'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findCommitMessageInput().props('text')).toBe('testing commit message'); // Test that commitMessage is cleared on click findDiscardDraftButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findCommitMessageInput().props('text')).toBe(''); }); @@ -274,24 +273,24 @@ describe('IDE commit form', () => { goToCommitView(); - await wrapper.vm.$nextTick(); + await nextTick(); setCommitMessageInput('testing commit message'); - await wrapper.vm.$nextTick(); + await nextTick(); jest.spyOn(store, 'dispatch').mockResolvedValue(); }); - it.each([clickCommitButton, submitForm])('when %p, commits changes', (fn) => { - fn(); + it('when submitting form, commits changes', () => { + submitForm(); expect(store.dispatch).toHaveBeenCalledWith('commit/commitChanges', undefined); }); it('when cannot push code, submitting does nothing', async () => { store.state.projects.abcproject.userPermissions.pushCode = false; - await wrapper.vm.$nextTick(); + await nextTick(); submitForm(); @@ -309,7 +308,7 @@ describe('IDE commit form', () => { const error = createError(); store.state.commit.commitError = error; - await wrapper.vm.$nextTick(); + await nextTick(); expect(modal.vm.show).toHaveBeenCalled(); expect(modal.props()).toMatchObject({ @@ -342,7 +341,7 @@ describe('IDE commit form', () => { async ({ commitError, expectedActions }) => { store.state.commit.commitError = commitError('test message'); - await wrapper.vm.$nextTick(); + await nextTick(); wrapper.find(GlModal).vm.$emit('ok'); diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js index b91ee88e0d6..dea920ecb5e 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js @@ -1,5 +1,6 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { trimText } from 'helpers/text_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import listItem from '~/ide/components/commit_sidebar/list_item.vue'; import { createRouter } from '~/ide/ide_router'; @@ -41,54 +42,42 @@ describe('Multi-file editor commit sidebar list item', () => { expect(findPathText()).toContain(f.path); }); - it('correctly renders renamed entries', (done) => { + it('correctly renders renamed entries', async () => { Vue.set(vm.file, 'prevName', 'Old name'); - vm.$nextTick() - .then(() => { - expect(findPathText()).toEqual(`Old name → ${f.name}`); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(findPathText()).toEqual(`Old name → ${f.name}`); }); - it('correctly renders entry, the name of which did not change after rename (as within a folder)', (done) => { + it('correctly renders entry, the name of which did not change after rename (as within a folder)', async () => { Vue.set(vm.file, 'prevName', f.name); - vm.$nextTick() - .then(() => { - expect(findPathText()).toEqual(f.name); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(findPathText()).toEqual(f.name); }); - it('opens a closed file in the editor when clicking the file path', (done) => { + it('opens a closed file in the editor when clicking the file path', async () => { jest.spyOn(vm, 'openPendingTab'); jest.spyOn(router, 'push').mockImplementation(() => {}); findPathEl.click(); - setImmediate(() => { - expect(vm.openPendingTab).toHaveBeenCalled(); - expect(router.push).toHaveBeenCalled(); + await nextTick(); - done(); - }); + expect(vm.openPendingTab).toHaveBeenCalled(); + expect(router.push).toHaveBeenCalled(); }); - it('calls updateViewer with diff when clicking file', (done) => { + it('calls updateViewer with diff when clicking file', async () => { jest.spyOn(vm, 'openFileInEditor'); jest.spyOn(vm, 'updateViewer'); jest.spyOn(router, 'push').mockImplementation(() => {}); findPathEl.click(); - setImmediate(() => { - expect(vm.updateViewer).toHaveBeenCalledWith('diff'); + await waitForPromises(); - done(); - }); + expect(vm.updateViewer).toHaveBeenCalledWith('diff'); }); describe('computed', () => { @@ -134,14 +123,11 @@ describe('Multi-file editor commit sidebar list item', () => { expect(vm.$el.querySelector('.is-active')).toBe(null); }); - it('adds active class when keys match', (done) => { + it('adds active class when keys match', async () => { vm.keyPrefix = 'staged'; - vm.$nextTick(() => { - expect(vm.$el.querySelector('.is-active')).not.toBe(null); - - done(); - }); + await nextTick(); + expect(vm.$el.querySelector('.is-active')).not.toBe(null); }); }); }); diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js index eb12fc994a5..1d42512c9ee 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import commitSidebarList from '~/ide/components/commit_sidebar/list.vue'; import { createStore } from '~/ide/stores'; @@ -31,12 +31,11 @@ describe('Multi-file editor commit sidebar list', () => { }); describe('with a list of files', () => { - beforeEach((done) => { + beforeEach(async () => { const f = file('file name'); f.changed = true; vm.fileList.push(f); - - Vue.nextTick(done); + await nextTick(); }); it('renders list', () => { diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js index 1514fbc2c3b..e66de6bb0b0 100644 --- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import createComponent from 'helpers/vue_mount_component_helper'; import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; @@ -23,34 +23,23 @@ describe('IDE commit message field', () => { vm.$destroy(); }); - it('adds is-focused class on focus', (done) => { + it('adds is-focused class on focus', async () => { vm.$el.querySelector('textarea').focus(); - vm.$nextTick(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - done(); - }); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); }); - it('removed is-focused class on blur', (done) => { + it('removed is-focused class on blur', async () => { vm.$el.querySelector('textarea').focus(); - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - vm.$el.querySelector('textarea').blur(); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - return vm.$nextTick(); - }) - .then(() => { - expect(vm.$el.querySelector('.is-focused')).toBeNull(); + vm.$el.querySelector('textarea').blur(); - done(); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).toBeNull(); }); it('emits input event on input', () => { @@ -66,105 +55,78 @@ describe('IDE commit message field', () => { describe('highlights', () => { describe('subject line', () => { - it('does not highlight less than 50 characters', (done) => { + it('does not highlight less than 50 characters', async () => { vm.text = 'text less than 50 chars'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars', - ); + await nextTick(); + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars', + ); - expect(vm.$el.querySelector('mark').style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); + expect(vm.$el.querySelector('mark').style.display).toBe('none'); }); - it('highlights characters over 50 length', (done) => { + it('highlights characters over 50 length', async () => { vm.text = 'text less than 50 chars that should not highlighted. text more than 50 should be highlighted'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars that should not highlighte', - ); - - expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); - expect(vm.$el.querySelector('mark').textContent).toBe( - 'd. text more than 50 should be highlighted', - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars that should not highlighte', + ); + + expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); + expect(vm.$el.querySelector('mark').textContent).toBe( + 'd. text more than 50 should be highlighted', + ); }); }); describe('body text', () => { - it('does not highlight body text less tan 72 characters', (done) => { + it('does not highlight body text less tan 72 characters', async () => { vm.text = 'subject line\nbody content'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); }); - it('highlights body text more than 72 characters', (done) => { + it('highlights body text more than 72 characters', async () => { vm.text = 'subject line\nbody content that will be highlighted when it is more than 72 characters in length'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); }); - it('highlights body text & subject line', (done) => { + it('highlights body text & subject line', async () => { vm.text = 'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark').length).toBe(2); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); + expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); }); }); }); describe('scrolling textarea', () => { - it('updates transform of highlights', (done) => { + it('updates transform of highlights', async () => { vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content'; - vm.$nextTick() - .then(() => { - vm.$el.querySelector('textarea').scrollTo(0, 50); - - vm.handleScroll(); - }) - .then(vm.$nextTick) - .then(() => { - expect(vm.scrollTop).toBe(50); - expect(vm.$el.querySelector('.highlights').style.transform).toBe( - 'translate3d(0, -50px, 0)', - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + vm.$el.querySelector('textarea').scrollTo(0, 50); + + vm.handleScroll(); + + await nextTick(); + expect(vm.scrollTop).toBe(50); + expect(vm.$el.querySelector('.highlights').style.transform).toBe('translate3d(0, -50px, 0)'); }); }); }); diff --git a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js index 4474647552d..64b53264b4d 100644 --- a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import { projectData, branches } from 'jest/ide/mock_data'; import NewMergeRequestOption from '~/ide/components/commit_sidebar/new_merge_request_option.vue'; @@ -72,15 +72,11 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('has new MR', (done) => { + it('has new MR', async () => { setMR(); - vm.$nextTick() - .then(() => { - expect(vm.$el.textContent).not.toBe(''); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.textContent).not.toBe(''); }); }); @@ -96,15 +92,11 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).toBe(''); }); - it('has new MR', (done) => { + it('has new MR', async () => { setMR(); - vm.$nextTick() - .then(() => { - expect(vm.$el.textContent).toBe(''); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.textContent).toBe(''); }); }); }); @@ -121,15 +113,11 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is rendered if MR exists', (done) => { + it('is rendered if MR exists', async () => { setMR(); - vm.$nextTick() - .then(() => { - expect(vm.$el.textContent).not.toBe(''); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.textContent).not.toBe(''); }); }); @@ -144,15 +132,11 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is hidden if MR exists', (done) => { + it('is hidden if MR exists', async () => { setMR(); - vm.$nextTick() - .then(() => { - expect(vm.$el.textContent).toBe(''); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.textContent).toBe(''); }); }); }); @@ -168,15 +152,11 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is hidden if MR exists', (done) => { + it('is hidden if MR exists', async () => { setMR(); - vm.$nextTick() - .then(() => { - expect(vm.$el.textContent).toBe(''); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.textContent).toBe(''); }); it('shows enablded checkbox', () => { diff --git a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js index a6f3253321b..d899bc4f7d8 100644 --- a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue'; import { createStore } from '~/ide/stores'; @@ -7,7 +7,7 @@ describe('IDE commit sidebar radio group', () => { let vm; let store; - beforeEach((done) => { + beforeEach(async () => { store = createStore(); const Component = Vue.extend(radioGroup); @@ -22,7 +22,7 @@ describe('IDE commit sidebar radio group', () => { vm.$mount(); - Vue.nextTick(done); + await nextTick(); }); afterEach(() => { @@ -33,7 +33,7 @@ describe('IDE commit sidebar radio group', () => { expect(vm.$el.textContent).toContain('test'); }); - it('uses slot if label is not present', (done) => { + it('uses slot if label is not present', async () => { vm.$destroy(); vm = new Vue({ @@ -47,25 +47,19 @@ describe('IDE commit sidebar radio group', () => { vm.$mount(); - Vue.nextTick(() => { - expect(vm.$el.textContent).toContain('Testing slot'); - - done(); - }); + await nextTick(); + expect(vm.$el.textContent).toContain('Testing slot'); }); - it('updates store when changing radio button', (done) => { + it('updates store when changing radio button', async () => { vm.$el.querySelector('input').dispatchEvent(new Event('change')); - Vue.nextTick(() => { - expect(store.state.commit.commitAction).toBe('1'); - - done(); - }); + await nextTick(); + expect(store.state.commit.commitAction).toBe('1'); }); describe('with input', () => { - beforeEach((done) => { + beforeEach(async () => { vm.$destroy(); const Component = Vue.extend(radioGroup); @@ -82,32 +76,27 @@ describe('IDE commit sidebar radio group', () => { vm.$mount(); - Vue.nextTick(done); + await nextTick(); }); it('renders input box when commitAction matches value', () => { expect(vm.$el.querySelector('.form-control')).not.toBeNull(); }); - it('hides input when commitAction doesnt match value', (done) => { + it('hides input when commitAction doesnt match value', async () => { store.state.commit.commitAction = '2'; - Vue.nextTick(() => { - expect(vm.$el.querySelector('.form-control')).toBeNull(); - done(); - }); + await nextTick(); + expect(vm.$el.querySelector('.form-control')).toBeNull(); }); - it('updates branch name in store on input', (done) => { + it('updates branch name in store on input', async () => { const input = vm.$el.querySelector('.form-control'); input.value = 'testing-123'; input.dispatchEvent(new Event('input')); - Vue.nextTick(() => { - expect(store.state.commit.newBranchName).toBe('testing-123'); - - done(); - }); + await nextTick(); + expect(store.state.commit.newBranchName).toBe('testing-123'); }); it('renders newBranchName if present', () => { diff --git a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js index 7bbe47d37af..52e35bdbb73 100644 --- a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import successMessage from '~/ide/components/commit_sidebar/success_message.vue'; import { createStore } from '~/ide/stores'; @@ -23,13 +23,10 @@ describe('IDE commit panel successful commit state', () => { vm.$destroy(); }); - it('renders last commit message when it exists', (done) => { + it('renders last commit message when it exists', async () => { vm.$store.state.lastCommitMsg = 'testing commit message'; - Vue.nextTick(() => { - expect(vm.$el.textContent).toContain('testing commit message'); - - done(); - }); + await nextTick(); + expect(vm.$el.textContent).toContain('testing commit message'); }); }); |