diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-08-09 00:24:49 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-08-09 00:26:05 +0100 |
commit | 0c1cf67975f7d4c51da8c1aed59019e026d2e3be (patch) | |
tree | 8697924b5980c2970c88d392557b136510b39aca /spec/javascripts/notes/components | |
parent | 23334ac0a151a60ada07b643f703dd0a75223094 (diff) | |
download | gitlab-ce-0c1cf67975f7d4c51da8c1aed59019e026d2e3be.tar.gz |
[ci skip] Adds tests for issue app
Diffstat (limited to 'spec/javascripts/notes/components')
-rw-r--r-- | spec/javascripts/notes/components/issue_note_app_spec.js | 222 |
1 files changed, 131 insertions, 91 deletions
diff --git a/spec/javascripts/notes/components/issue_note_app_spec.js b/spec/javascripts/notes/components/issue_note_app_spec.js index 9b48d3817a6..084dde29ca8 100644 --- a/spec/javascripts/notes/components/issue_note_app_spec.js +++ b/spec/javascripts/notes/components/issue_note_app_spec.js @@ -1,23 +1,45 @@ import Vue from 'vue'; import issueNotesApp from '~/notes/components/issue_notes_app.vue'; import service from '~/notes/services/issue_notes_service'; -import { keyboardDownEvent } from '../../issue_show/helpers'; import * as mockData from '../mock_data'; describe('issue_note_app', () => { let mountComponent; + let vm; + + const individualNoteInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify(mockData.individualNoteServerResponse), { + status: 200, + })); + }; + + const discussionNoteInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify(mockData.discussionNoteServerResponse), { + status: 200, + })); + }; beforeEach(() => { const IssueNotesApp = Vue.extend(issueNotesApp); - mountComponent = props => new IssueNotesApp({ - propsData: props, - }).$mount(); + mountComponent = (data) => { + const props = data || { + issueData: mockData.issueDataMock, + notesData: mockData.notesDataMock, + userData: mockData.userDataMock, + }; + + return new IssueNotesApp({ + propsData: props, + }).$mount(); + }; }); - describe('set data', () => { - let vm; + afterEach(() => { + vm.$destroy(); + }); + describe('set data', () => { const responseInterceptor = (request, next) => { next(request.respondWith(JSON.stringify([]), { status: 200, @@ -26,11 +48,7 @@ describe('issue_note_app', () => { beforeEach(() => { Vue.http.interceptors.push(responseInterceptor); - vm = mountComponent({ - issueData: mockData.issueDataMock, - notesData: mockData.notesDataMock, - userData: mockData.userDataMock, - }); + vm = mountComponent(); }); afterEach(() => { @@ -55,29 +73,17 @@ describe('issue_note_app', () => { }); describe('render', () => { - let vm; - - const responseInterceptor = (request, next) => { - next(request.respondWith(JSON.stringify(mockData.discussionResponse), { - status: 200, - })); - }; - beforeEach(() => { - Vue.http.interceptors.push(responseInterceptor); - vm = mountComponent({ - issueData: mockData.issueDataMock, - notesData: mockData.notesDataMock, - userData: mockData.userDataMock, - }); + Vue.http.interceptors.push(individualNoteInterceptor); + vm = mountComponent(); }); afterEach(() => { - Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor); + Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor); }); it('should render list of notes', (done) => { - const note = mockData.discussionResponse[0].notes[0]; + const note = mockData.individualNoteServerResponse[0].notes[0]; setTimeout(() => { expect( @@ -95,16 +101,17 @@ describe('issue_note_app', () => { vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'), ).toEqual('Write a comment or drag your files here...'); }); + + it('should render form comment button as disabled', () => { + expect( + vm.$el.querySelector('.js-note-new-discussion').getAttribute('disabled'), + ).toEqual('disabled'); + }); }); describe('while fetching data', () => { - let vm; beforeEach(() => { - vm = mountComponent({ - issueData: mockData.issueDataMock, - notesData: mockData.notesDataMock, - userData: mockData.userDataMock, - }); + vm = mountComponent(); }); it('should render loading icon', () => { @@ -121,104 +128,137 @@ describe('issue_note_app', () => { describe('update note', () => { describe('individual note', () => { - let vm; - - const responseInterceptor = (request, next) => { - next(request.respondWith(JSON.stringify(mockData.discussionResponse), { - status: 200, - })); - }; - beforeEach(() => { - Vue.http.interceptors.push(responseInterceptor); - - vm = mountComponent({ - issueData: mockData.issueDataMock, - notesData: mockData.notesDataMock, - userData: mockData.userDataMock, - }); - + Vue.http.interceptors.push(individualNoteInterceptor); + spyOn(service, 'updateNote').and.callFake(() => Promise.resolve()); + vm = mountComponent(); }); afterEach(() => { - Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor); + Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor); }); - it('renders edit form', () => { + it('renders edit form', (done) => { setTimeout(() => { vm.$el.querySelector('.js-note-edit').click(); Vue.nextTick(() => { expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined(); + done(); }); }, 0); }); - it('updates the note and resets the edit form', () => {}); - }); + it('calls the service to update the note', (done) => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + Vue.nextTick(() => { + vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note'; + vm.$el.querySelector('.js-vue-issue-save').click(); - describe('dicussion note note', () => { - it('renders edit form', () => { + expect(service.updateNote).toHaveBeenCalled(); + done(); + }); + }, 0); }); - - it('updates the note and resets the edit form', () => {}); }); - }); - - describe('set target hash', () => { - it('updates the URL when the note date is clicked', () => { - }); + describe('dicussion note', () => { + beforeEach(() => { + Vue.http.interceptors.push(discussionNoteInterceptor); + spyOn(service, 'updateNote').and.callFake(() => Promise.resolve()); + vm = mountComponent(); + }); - it('stores the correct hash', () => { + afterEach(() => { + Vue.http.interceptors = _.without(Vue.http.interceptors, discussionNoteInterceptor); + }); - }); + it('renders edit form', (done) => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined(); + done(); + }); + }, 0); + }); - it('updates visually the target note', () => { + it('updates the note and resets the edit form', (done) => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + Vue.nextTick(() => { + vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note'; + vm.$el.querySelector('.js-vue-issue-save').click(); + expect(service.updateNote).toHaveBeenCalled(); + done(); + }); + }, 0); + }); }); }); - describe('create new note', () => { - it('should show placeholder note while new comment is being posted', () => {}); - it('should remove placeholder note when new comment is done posting', () => {}); - it('should show actual note element when new comment is done posting', () => {}); - it('should show flash error message when new comment failed to be posted', () => {}); - it('should show flash error message when comment failed to be updated', () => {}); - }); - - describe('quick actions', () => { - it('should return executing quick action description when note has single quick action', () => { + describe('new note form', () => { + beforeEach(() => { + vm = mountComponent(); }); - it('should return generic multiple quick action description when note has multiple quick actions', () => { + it('should render markdown docs url', () => { + const { markdownDocs } = mockData.notesDataMock; + expect(vm.$el.querySelector(`a[href="${markdownDocs}"]`).textContent.trim()).toEqual('Markdown'); }); - it('should return generic quick action description when available quick actions list is not populated', () => { + it('should render quick action docs url', () => { + const { quickActionsDocs } = mockData.notesDataMock; + expect(vm.$el.querySelector(`a[href="${quickActionsDocs}"]`).textContent.trim()).toEqual('quick actions'); }); }); - describe('new note form', () => { - it('should render markdown docs url', () => { - + describe('edit form', () => { + beforeEach(() => { + Vue.http.interceptors.push(individualNoteInterceptor); + vm = mountComponent(); }); - it('should render quick action docs url', () => { - + afterEach(() => { + Vue.http.interceptors = _.without(Vue.http.interceptors, individualNoteInterceptor); }); - it('should preview markdown', () => { - + it('should render markdown docs url', (done) => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + const { markdownDocs } = mockData.notesDataMock; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector(`.edit-note a[href="${markdownDocs}"]`).textContent.trim(), + ).toEqual('Markdown is supported'); + done(); + }); + }, 0); }); - describe('discard draft', () => { - it('should reset form when reset button is clicked', () => { - - }); + it('should not render quick actions docs url', (done) => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + const { quickActionsDocs } = mockData.notesDataMock; + + Vue.nextTick(() => { + expect( + vm.$el.querySelector(`.edit-note a[href="${quickActionsDocs}"]`), + ).toEqual(null); + done(); + }); + }, 0); }); }); - describe('edit form', () => { - it('should render markdown docs url', () => {}); - it('should not render quick actions docs url', () => {}); + // TODO: FILIPA + describe('create new note', () => { + it('should show placeholder note while new comment is being posted', () => {}); + it('should remove placeholder note when new comment is done posting', () => {}); + it('should show actual note element when new comment is done posting', () => {}); + it('should show flash error message when new comment failed to be posted', () => {}); + it('should show flash error message when comment failed to be updated', () => {}); }); }); |