summaryrefslogtreecommitdiff
path: root/spec/javascripts/notes/components
diff options
context:
space:
mode:
Diffstat (limited to 'spec/javascripts/notes/components')
-rw-r--r--spec/javascripts/notes/components/issue_note_app_spec.js222
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', () => {});
});
});
View Lorry Controller Status