Fix Karma failures for jQuery deferreds

This commit is contained in:
Kushal Pandya 2017-05-05 21:41:55 +00:00 committed by Jacob Schatz
parent 59a85c6b82
commit b801f414aa
2 changed files with 89 additions and 130 deletions

View File

@ -1356,7 +1356,7 @@ const normalizeNewlines = function(str) {
// Show updated comment content temporarily
$noteBodyText.html(formContent);
$editingNote.removeClass('is-editing').addClass('being-posted fade-in-half');
$editingNote.removeClass('is-editing fade-in-full').addClass('being-posted fade-in-half');
$editingNote.find('.note-headline-meta a').html('<i class="fa fa-spinner fa-spin" aria-label="Comment is being updated" aria-hidden="true"></i>');
/* eslint-disable promise/catch-or-return */

View File

@ -29,7 +29,7 @@ import '~/notes';
$('.js-comment-button').on('click', function(e) {
e.preventDefault();
});
this.notes = new Notes();
this.notes = new Notes('', []);
});
it('modifies the Markdown field', function() {
@ -51,7 +51,7 @@ import '~/notes';
var textarea = '.js-note-text';
beforeEach(function() {
this.notes = new Notes();
this.notes = new Notes('', []);
this.autoSizeSpy = spyOnEvent($(textarea), 'autosize:update');
spyOn(this.notes, 'renderNote').and.stub();
@ -273,9 +273,92 @@ import '~/notes';
});
});
describe('postComment & updateComment', () => {
const sampleComment = 'foo';
const updatedComment = 'bar';
const note = {
id: 1234,
html: `<li class="note note-row-1234 timeline-entry" id="note_1234">
<div class="note-text">${sampleComment}</div>
</li>`,
note: sampleComment,
valid: true
};
let $form;
let $notesContainer;
beforeEach(() => {
this.notes = new Notes('', []);
window.gon.current_username = 'root';
window.gon.current_user_fullname = 'Administrator';
$form = $('form.js-main-target-form');
$notesContainer = $('ul.main-notes-list');
$form.find('textarea.js-note-text').val(sampleComment);
});
it('should show placeholder note while new comment is being posted', () => {
$('.js-comment-button').click();
expect($notesContainer.find('.note.being-posted').length > 0).toEqual(true);
});
it('should remove placeholder note when new comment is done posting', () => {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
$('.js-comment-button').click();
deferred.resolve(note);
expect($notesContainer.find('.note.being-posted').length).toEqual(0);
});
it('should show actual note element when new comment is done posting', () => {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
$('.js-comment-button').click();
deferred.resolve(note);
expect($notesContainer.find(`#note_${note.id}`).length > 0).toEqual(true);
});
it('should reset Form when new comment is done posting', () => {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
$('.js-comment-button').click();
deferred.resolve(note);
expect($form.find('textarea.js-note-text').val()).toEqual('');
});
it('should show flash error message when new comment failed to be posted', () => {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
$('.js-comment-button').click();
deferred.reject();
expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
});
it('should show flash error message when comment failed to be updated', () => {
const deferred = $.Deferred();
spyOn($, 'ajax').and.returnValue(deferred.promise());
$('.js-comment-button').click();
deferred.resolve(note);
const $noteEl = $notesContainer.find(`#note_${note.id}`);
$noteEl.find('.js-note-edit').click();
$noteEl.find('textarea.js-note-text').val(updatedComment);
$noteEl.find('.js-comment-save-button').click();
deferred.reject();
const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
expect($updatedNoteEl.find('.note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
expect($('.flash-container').is(':visible')).toEqual(true); // Flash error message shown
});
});
describe('getFormData', () => {
it('should return form metadata object from form reference', () => {
this.notes = new Notes();
this.notes = new Notes('', []);
const $form = $('form');
const sampleComment = 'foobar';
@ -290,7 +373,7 @@ import '~/notes';
describe('hasSlashCommands', () => {
beforeEach(() => {
this.notes = new Notes();
this.notes = new Notes('', []);
});
it('should return true when comment has slash commands', () => {
@ -327,7 +410,7 @@ import '~/notes';
const currentUserFullname = 'Administrator';
beforeEach(() => {
this.notes = new Notes();
this.notes = new Notes('', []);
});
it('should return constructed placeholder element for regular note based on form contents', () => {
@ -364,129 +447,5 @@ import '~/notes';
expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeTruthy();
});
});
describe('postComment & updateComment', () => {
const sampleComment = 'foo';
const updatedComment = 'bar';
const note = {
id: 1234,
html: `<li class="note note-row-1234 timeline-entry" id="note_1234">
<div class="note-text">${sampleComment}</div>
</li>`,
note: sampleComment,
valid: true
};
let $form;
let $notesContainer;
beforeEach(() => {
this.notes = new Notes();
window.gon.current_username = 'root';
window.gon.current_user_fullname = 'Administrator';
$form = $('form');
$notesContainer = $('ul.main-notes-list');
$form.find('textarea.js-note-text').val(sampleComment);
$('.js-comment-button').click();
});
it('should show placeholder note while new comment is being posted', () => {
expect($notesContainer.find('.note.being-posted').length > 0).toEqual(true);
});
it('should remove placeholder note when new comment is done posting', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
expect($notesContainer.find('.note.being-posted').length).toEqual(0);
});
});
it('should show actual note element when new comment is done posting', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
expect($notesContainer.find(`#${note.id}`).length > 0).toEqual(true);
});
});
it('should reset Form when new comment is done posting', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
expect($form.find('textarea.js-note-text')).toEqual('');
});
});
it('should trigger ajax:success event on Form when new comment is done posting', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
spyOn($form, 'trigger');
expect($form.trigger).toHaveBeenCalledWith('ajax:success', [note]);
});
});
it('should show flash error message when new comment failed to be posted', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.error();
expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true);
});
});
it('should refill form textarea with original comment content when new comment failed to be posted', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.error();
expect($form.find('textarea.js-note-text')).toEqual(sampleComment);
});
});
it('should show updated comment as _actively being posted_ while comment being updated', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
const $noteEl = $notesContainer.find(`#note_${note.id}`);
$noteEl.find('.js-note-edit').click();
$noteEl.find('textarea.js-note-text').val(updatedComment);
$noteEl.find('.js-comment-save-button').click();
expect($noteEl.hasClass('.being-posted')).toEqual(true);
expect($noteEl.find('.note-text').text()).toEqual(updatedComment);
});
});
it('should show updated comment when comment update is done posting', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
const $noteEl = $notesContainer.find(`#note_${note.id}`);
$noteEl.find('.js-note-edit').click();
$noteEl.find('textarea.js-note-text').val(updatedComment);
$noteEl.find('.js-comment-save-button').click();
spyOn($, 'ajax').and.callFake((updateOptions) => {
const updatedNote = Object.assign({}, note);
updatedNote.note = updatedComment;
updatedNote.html = `<li class="note note-row-1234 timeline-entry" id="note_1234">
<div class="note-text">${updatedComment}</div>
</li>`;
updateOptions.success(updatedNote);
const $updatedNoteEl = $notesContainer.find(`#note_${updatedNote.id}`);
expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
expect($updatedNoteEl.find('note-text').text().trim()).toEqual(updatedComment); // Verify if comment text updated
});
});
});
it('should show flash error message when comment failed to be updated', () => {
spyOn($, 'ajax').and.callFake((options) => {
options.success(note);
const $noteEl = $notesContainer.find(`#note_${note.id}`);
$noteEl.find('.js-note-edit').click();
$noteEl.find('textarea.js-note-text').val(updatedComment);
$noteEl.find('.js-comment-save-button').click();
spyOn($, 'ajax').and.callFake((updateOptions) => {
updateOptions.error();
const $updatedNoteEl = $notesContainer.find(`#note_${note.id}`);
expect($updatedNoteEl.hasClass('.being-posted')).toEqual(false); // Remove being-posted visuals
expect($updatedNoteEl.find('note-text').text().trim()).toEqual(sampleComment); // See if comment reverted back to original
expect($notesContainer.parent().find('.flash-container .flash-text').is(':visible')).toEqual(true); // Flash error message shown
});
});
});
});
});
}).call(window);