diff options
author | Winnie Hellmann <winnie@gitlab.com> | 2019-05-29 23:28:59 +0200 |
---|---|---|
committer | Winnie Hellmann <winnie@gitlab.com> | 2019-05-30 00:11:57 +0200 |
commit | 9706f9525f3067ae940444acfa2b986e77a41572 (patch) | |
tree | a9061d76ce4e3fb328fdb9a4c055dec28362a455 /spec/frontend/notes/components/note_app_spec.js | |
parent | 399d80200c26105f1158ed32ee02557ee3a47686 (diff) | |
download | gitlab-ce-9706f9525f3067ae940444acfa2b986e77a41572.tar.gz |
Wait for requests to finish in note_app_spec.js
Diffstat (limited to 'spec/frontend/notes/components/note_app_spec.js')
-rw-r--r-- | spec/frontend/notes/components/note_app_spec.js | 188 |
1 files changed, 87 insertions, 101 deletions
diff --git a/spec/frontend/notes/components/note_app_spec.js b/spec/frontend/notes/components/note_app_spec.js index 7cd23a2592f..9ac58a2353f 100644 --- a/spec/frontend/notes/components/note_app_spec.js +++ b/spec/frontend/notes/components/note_app_spec.js @@ -1,5 +1,4 @@ import $ from 'helpers/jquery'; -import _ from 'underscore'; import Vue from 'vue'; import { mount, createLocalVue } from '@vue/test-utils'; import NotesApp from '~/notes/components/notes_app.vue'; @@ -9,11 +8,37 @@ import '~/behaviors/markdown/render_gfm'; // TODO: use generated fixture (https://gitlab.com/gitlab-org/gitlab-ce/issues/62491) import * as mockData from '../../../javascripts/notes/mock_data'; +const originalInterceptors = [...Vue.http.interceptors]; + +const emptyResponseInterceptor = (request, next) => { + next( + request.respondWith(JSON.stringify([]), { + status: 200, + }), + ); +}; + describe('note_app', () => { let mountComponent; let wrapper; let store; + /** + * waits for fetchNotes() to complete + */ + const waitForDiscussionsRequest = () => + new Promise(resolve => { + const { vm } = wrapper.find(NotesApp); + const unwatch = vm.$watch('isFetching', isFetching => { + if (isFetching) { + return; + } + + unwatch(); + resolve(); + }); + }); + beforeEach(() => { $('body').attr('data-page', 'projects:merge_requests:show'); @@ -46,24 +71,14 @@ describe('note_app', () => { afterEach(() => { wrapper.destroy(); + Vue.http.interceptors = [...originalInterceptors]; }); describe('set data', () => { - const responseInterceptor = (request, next) => { - next( - request.respondWith(JSON.stringify([]), { - status: 200, - }), - ); - }; - beforeEach(() => { - Vue.http.interceptors.push(responseInterceptor); + Vue.http.interceptors.push(emptyResponseInterceptor); wrapper = mountComponent(); - }); - - afterEach(() => { - Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor); + return waitForDiscussionsRequest(); }); it('should set notes data', () => { @@ -89,29 +104,23 @@ describe('note_app', () => { Vue.http.interceptors.push(mockData.individualNoteInterceptor); wrapper = mountComponent(); + return waitForDiscussionsRequest(); }); - afterEach(() => { - Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor); - }); - - it('should render list of notes', done => { + it('should render list of notes', () => { const note = mockData.INDIVIDUAL_NOTE_RESPONSE_MAP.GET[ '/gitlab-org/gitlab-ce/issues/26/discussions.json' ][0].notes[0]; - setTimeout(() => { - expect( - wrapper - .find('.main-notes-list .note-header-author-name') - .text() - .trim(), - ).toEqual(note.author.name); + expect( + wrapper + .find('.main-notes-list .note-header-author-name') + .text() + .trim(), + ).toEqual(note.author.name); - expect(wrapper.find('.main-notes-list .note-text').html()).toContain(note.note_html); - done(); - }, 0); + expect(wrapper.find('.main-notes-list .note-text').html()).toContain(note.note_html); }); it('should render form', () => { @@ -122,37 +131,42 @@ describe('note_app', () => { }); it('should not render form when commenting is disabled', () => { + wrapper.destroy(); + store.state.commentsDisabled = true; wrapper = mountComponent(); - - expect(wrapper.find('.js-main-target-form').exists()).toBe(false); + return waitForDiscussionsRequest().then(() => { + expect(wrapper.find('.js-main-target-form').exists()).toBe(false); + }); }); it('should render discussion filter note `commentsDisabled` is true', () => { + wrapper.destroy(); + store.state.commentsDisabled = true; wrapper = mountComponent(); - - expect(wrapper.find('.js-discussion-filter-note').exists()).toBe(true); + return waitForDiscussionsRequest().then(() => { + expect(wrapper.find('.js-discussion-filter-note').exists()).toBe(true); + }); }); it('should render form comment button as disabled', () => { expect(wrapper.find('.js-note-new-discussion').attributes('disabled')).toEqual('disabled'); }); - it('updates discussions badge', done => { - setTimeout(() => { - expect(document.querySelector('.js-discussions-count').textContent).toEqual('2'); - - done(); - }); + it('updates discussions badge', () => { + expect(document.querySelector('.js-discussions-count').textContent).toEqual('2'); }); }); describe('while fetching data', () => { beforeEach(() => { + Vue.http.interceptors.push(emptyResponseInterceptor); wrapper = mountComponent(); }); + afterEach(() => waitForDiscussionsRequest()); + it('renders skeleton notes', () => { expect(wrapper.find('.animation-container').exists()).toBe(true); }); @@ -167,78 +181,55 @@ describe('note_app', () => { describe('update note', () => { describe('individual note', () => { - beforeEach(done => { + beforeEach(() => { Vue.http.interceptors.push(mockData.individualNoteInterceptor); jest.spyOn(service, 'updateNote'); wrapper = mountComponent(); - setTimeout(() => { + return waitForDiscussionsRequest().then(() => { wrapper.find('.js-note-edit').trigger('click'); - Vue.nextTick(done); - }, 0); - }); - - afterEach(() => { - Vue.http.interceptors = _.without( - Vue.http.interceptors, - mockData.individualNoteInterceptor, - ); + }); }); it('renders edit form', () => { expect(wrapper.find('.js-vue-issue-note-form').exists()).toBe(true); }); - it('calls the service to update the note', done => { + it('calls the service to update the note', () => { wrapper.find('.js-vue-issue-note-form').value = 'this is a note'; wrapper.find('.js-vue-issue-save').trigger('click'); expect(service.updateNote).toHaveBeenCalled(); - // Wait for the requests to finish before destroying - setTimeout(() => { - done(); - }); }); }); describe('discussion note', () => { - beforeEach(done => { + beforeEach(() => { Vue.http.interceptors.push(mockData.discussionNoteInterceptor); jest.spyOn(service, 'updateNote'); wrapper = mountComponent(); - - setTimeout(() => { + return waitForDiscussionsRequest().then(() => { wrapper.find('.js-note-edit').trigger('click'); - Vue.nextTick(done); - }, 0); - }); - - afterEach(() => { - Vue.http.interceptors = _.without( - Vue.http.interceptors, - mockData.discussionNoteInterceptor, - ); + }); }); it('renders edit form', () => { expect(wrapper.find('.js-vue-issue-note-form').exists()).toBe(true); }); - it('updates the note and resets the edit form', done => { + it('updates the note and resets the edit form', () => { wrapper.find('.js-vue-issue-note-form').value = 'this is a note'; wrapper.find('.js-vue-issue-save').trigger('click'); expect(service.updateNote).toHaveBeenCalled(); - // Wait for the requests to finish before destroying - setTimeout(() => { - done(); - }); }); }); }); describe('new note form', () => { beforeEach(() => { + Vue.http.interceptors.push(mockData.individualNoteInterceptor); wrapper = mountComponent(); + return waitForDiscussionsRequest(); }); it('should render markdown docs url', () => { @@ -268,43 +259,37 @@ describe('note_app', () => { beforeEach(() => { Vue.http.interceptors.push(mockData.individualNoteInterceptor); wrapper = mountComponent(); + return waitForDiscussionsRequest(); }); - afterEach(() => { - Vue.http.interceptors = _.without(Vue.http.interceptors, mockData.individualNoteInterceptor); - }); + it('should render markdown docs url', () => { + wrapper.find('.js-note-edit').trigger('click'); + const { markdownDocsPath } = mockData.notesDataMock; - it('should render markdown docs url', done => { - setTimeout(() => { - wrapper.find('.js-note-edit').trigger('click'); - const { markdownDocsPath } = mockData.notesDataMock; - - Vue.nextTick(() => { - expect( - wrapper - .find(`.edit-note a[href="${markdownDocsPath}"]`) - .text() - .trim(), - ).toEqual('Markdown is supported'); - done(); - }); - }, 0); + return Vue.nextTick().then(() => { + expect( + wrapper + .find(`.edit-note a[href="${markdownDocsPath}"]`) + .text() + .trim(), + ).toEqual('Markdown is supported'); + }); }); - it('should not render quick actions docs url', done => { - setTimeout(() => { - wrapper.find('.js-note-edit').trigger('click'); - const { quickActionsDocsPath } = mockData.notesDataMock; - - Vue.nextTick(() => { - expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false); - done(); - }); - }, 0); + it('should not render quick actions docs url', () => { + wrapper.find('.js-note-edit').trigger('click'); + const { quickActionsDocsPath } = mockData.notesDataMock; + expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false); }); }); describe('emoji awards', () => { + beforeEach(() => { + Vue.http.interceptors.push(emptyResponseInterceptor); + wrapper = mountComponent(); + return waitForDiscussionsRequest(); + }); + it('dispatches toggleAward after toggleAward event', () => { const toggleAwardEvent = new CustomEvent('toggleAward', { detail: { @@ -316,13 +301,14 @@ describe('note_app', () => { wrapper.vm.$store.hotUpdate({ actions: { toggleAward: toggleAwardAction, + stopPolling() {}, }, }); wrapper.vm.$parent.$el.dispatchEvent(toggleAwardEvent); expect(toggleAwardAction).toHaveBeenCalledTimes(1); - const [, payload] = toggleAwardAction.calls.argsFor(0); + const [, payload] = toggleAwardAction.mock.calls[0]; expect(payload).toEqual({ awardName: 'test', |