gitlab-org--gitlab-foss/spec/frontend/notes/old_notes_spec.js

1025 lines
31 KiB
JavaScript
Raw Normal View History

/* eslint-disable import/no-commonjs, no-new */
import $ from 'jquery';
2018-02-01 04:07:16 -05:00
import MockAdapter from 'axios-mock-adapter';
import '~/behaviors/markdown/render_gfm';
import { createSpyObj } from 'helpers/jest_helpers';
import { setTestTimeoutOnce } from 'helpers/timeout';
import { TEST_HOST } from 'helpers/test_constants';
import * as urlUtility from '~/lib/utils/url_utility';
import axios from '~/lib/utils/axios_utils';
// These must be imported synchronously because they pull dependencies
// from the DOM.
window.jQuery = $;
require('autosize');
require('~/commons');
require('~/notes');
const { Notes } = window;
const FLASH_TYPE_ALERT = 'alert';
const NOTES_POST_PATH = /(.*)\/notes\?html=true$/;
const fixture = 'snippets/show.html';
let mockAxios;
window.project_uploads_path = `${TEST_HOST}/uploads`;
window.gon = window.gon || {};
2018-10-17 03:13:26 -04:00
window.gl = window.gl || {};
gl.utils = gl.utils || {};
gl.utils.disableButtonIfEmptyField = () => {};
2018-10-17 03:13:26 -04:00
// the following test is unreliable and failing in master 2-3 times a day
// see https://gitlab.com/gitlab-org/gitlab/issues/206906#note_290602581
// eslint-disable-next-line jest/no-disabled-tests
describe.skip('Old Notes (~/notes.js)', () => {
beforeEach(() => {
loadFixtures(fixture);
// Re-declare this here so that test_setup.js#beforeEach() doesn't
// overwrite it.
mockAxios = new MockAdapter(axios);
2016-08-31 10:32:48 -04:00
$.ajax = () => {
throw new Error('$.ajax should not be called through!');
};
// These jQuery+DOM tests are super flaky so increase the timeout to avoid
// random failures.
// It seems that running tests in parallel increases failure rate.
jest.setTimeout(4000);
setTestTimeoutOnce(4000);
});
afterEach(() => {
// The Notes component sets a polling interval. Clear it after every run.
// Make sure to use jest.runOnlyPendingTimers() instead of runAllTimers().
jest.clearAllTimers();
return axios.waitForAll().finally(() => mockAxios.restore());
2018-10-17 03:13:26 -04:00
});
it('loads the Notes class into the DOM', () => {
expect(Notes).toBeDefined();
expect(Notes.name).toBe('Notes');
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('addBinding', () => {
it('calls postComment when comment button is clicked', () => {
jest.spyOn(Notes.prototype, 'postComment');
2018-10-17 03:13:26 -04:00
new window.Notes('', []);
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
expect(Notes.prototype.postComment).toHaveBeenCalled();
});
2018-10-17 03:13:26 -04:00
});
describe('task lists', () => {
beforeEach(() => {
mockAxios.onAny().reply(200, {});
new Notes('', []);
2018-10-17 03:13:26 -04:00
});
2018-02-02 09:17:26 -05:00
it('modifies the Markdown field', () => {
2018-10-17 03:13:26 -04:00
const changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
$('input[type=checkbox]')
.attr('checked', true)[0]
.dispatchEvent(changeEvent);
2018-10-17 03:13:26 -04:00
expect($('.js-task-list-field.original-task-list').val()).toBe('- [x] Task List Item');
});
2016-08-31 10:32:48 -04:00
it('submits an ajax request on tasklist:changed', () => {
jest.spyOn(axios, 'patch');
2019-01-22 15:53:08 -05:00
const lineNumber = 8;
const lineSource = '- [ ] item 8';
const index = 3;
const checked = true;
$('.js-task-list-container').trigger({
type: 'tasklist:changed',
detail: { lineNumber, lineSource, index, checked },
});
expect(axios.patch).toHaveBeenCalledWith(undefined, {
note: {
note: '',
lock_version: undefined,
update_task: { index, checked, line_number: lineNumber, line_source: lineSource },
},
2016-08-31 10:32:48 -04:00
});
});
2018-10-17 03:13:26 -04:00
});
2016-08-31 10:32:48 -04:00
describe('comments', () => {
let notes;
let autosizeSpy;
let textarea;
2016-08-31 10:32:48 -04:00
beforeEach(() => {
notes = new Notes('', []);
2016-08-31 10:32:48 -04:00
textarea = $('.js-note-text');
textarea.data('autosave', {
reset: () => {},
2018-10-17 03:13:26 -04:00
});
autosizeSpy = jest.fn();
$(textarea).on('autosize:update', autosizeSpy);
jest.spyOn(notes, 'renderNote');
2016-08-31 10:32:48 -04:00
2018-10-17 03:13:26 -04:00
$('.js-comment-button').on('click', e => {
const $form = $(this);
e.preventDefault();
notes.addNote($form, {});
notes.reenableTargetFormSubmitButton(e);
notes.resetMainTargetForm(e);
2016-07-24 16:45:11 -04:00
});
2018-10-17 03:13:26 -04:00
});
2016-08-31 10:32:48 -04:00
it('autosizes after comment submission', () => {
textarea.text('This is an example comment note');
expect(autosizeSpy).not.toHaveBeenCalled();
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
expect(autosizeSpy).toHaveBeenCalled();
2018-10-17 03:13:26 -04:00
});
it('should not place escaped text in the comment box in case of error', () => {
2018-10-17 03:13:26 -04:00
const deferred = $.Deferred();
jest.spyOn($, 'ajax').mockReturnValueOnce(deferred);
2018-10-17 03:13:26 -04:00
$(textarea).text('A comment with `markup`.');
2018-10-17 03:13:26 -04:00
deferred.reject();
$('.js-comment-button').click();
2018-10-09 14:03:09 -04:00
expect($(textarea).val()).toBe('A comment with `markup`.');
$.ajax.mockRestore();
expect($.ajax.mock).toBeUndefined();
2016-07-24 16:45:11 -04:00
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('updateNote', () => {
let notes;
2018-10-17 03:13:26 -04:00
let noteEntity;
let $notesContainer;
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
window.gon.current_username = 'root';
window.gon.current_user_fullname = 'Administrator';
const sampleComment = 'foo';
2018-10-17 03:13:26 -04:00
noteEntity = {
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,
};
2018-10-17 03:13:26 -04:00
$notesContainer = $('ul.main-notes-list');
const $form = $('form.js-main-target-form');
2018-10-17 03:13:26 -04:00
$form.find('textarea.js-note-text').val(sampleComment);
2018-02-01 04:07:16 -05:00
mockAxios.onPost(NOTES_POST_PATH).reply(200, noteEntity);
2018-10-17 03:13:26 -04:00
});
2018-02-01 06:59:59 -05:00
it('updates note and resets edit form', () => {
jest.spyOn(notes, 'revertNoteEditForm');
jest.spyOn(notes, 'setupNewNote');
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
const $targetNote = $notesContainer.find(`#note_${noteEntity.id}`);
const updatedNote = { ...noteEntity };
updatedNote.note = 'bar';
notes.updateNote(updatedNote, $targetNote);
expect(notes.revertNoteEditForm).toHaveBeenCalledWith($targetNote);
expect(notes.setupNewNote).toHaveBeenCalled();
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('updateNoteTargetSelector', () => {
const hash = 'note_foo';
let $note;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
$note = $(`<div id="${hash}"></div>`);
jest.spyOn($note, 'filter');
jest.spyOn($note, 'toggleClass');
});
// urlUtility is a dependency of the notes module. Its getLocatinHash() method should be called internally.
2018-10-17 03:13:26 -04:00
it('sets target when hash matches', () => {
jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce(hash);
2018-10-17 03:13:26 -04:00
Notes.updateNoteTargetSelector($note);
expect(urlUtility.getLocationHash).toHaveBeenCalled();
2018-10-17 03:13:26 -04:00
expect($note.filter).toHaveBeenCalledWith(`#${hash}`);
expect($note.toggleClass).toHaveBeenCalledWith('target', true);
});
2018-10-17 03:13:26 -04:00
it('unsets target when hash does not match', () => {
jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce('note_doesnotexist');
2018-10-17 03:13:26 -04:00
Notes.updateNoteTargetSelector($note);
expect(urlUtility.getLocationHash).toHaveBeenCalled();
2018-10-17 03:13:26 -04:00
expect($note.toggleClass).toHaveBeenCalledWith('target', false);
});
2018-10-17 03:13:26 -04:00
it('unsets target when there is not a hash fragment anymore', () => {
jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce(null);
2018-10-17 03:13:26 -04:00
Notes.updateNoteTargetSelector($note);
expect(urlUtility.getLocationHash).toHaveBeenCalled();
2018-10-17 03:13:26 -04:00
expect($note.toggleClass).toHaveBeenCalledWith('target', false);
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('renderNote', () => {
let notes;
let note;
let $notesList;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
note = {
id: 1,
valid: true,
note: 'heya',
html: '<div>heya</div>',
};
$notesList = createSpyObj('$notesList', ['find', 'append']);
2018-10-17 03:13:26 -04:00
notes = createSpyObj('notes', [
2018-10-17 03:13:26 -04:00
'setupNewNote',
'refresh',
'collapseLongCommitList',
'updateNotesCount',
'putConflictEditWarningInPlace',
]);
notes.taskList = createSpyObj('tasklist', ['init']);
2018-10-17 03:13:26 -04:00
notes.note_ids = [];
notes.updatedNotesTrackingMap = {};
jest.spyOn(Notes, 'isNewNote');
jest.spyOn(Notes, 'isUpdatedNote');
jest.spyOn(Notes, 'animateAppendNote');
jest.spyOn(Notes, 'animateUpdateNote');
2018-10-17 03:13:26 -04:00
});
describe('when adding note', () => {
it('should call .animateAppendNote', () => {
Notes.isNewNote.mockReturnValueOnce(true);
2018-10-17 03:13:26 -04:00
Notes.prototype.renderNote.call(notes, note, null, $notesList);
expect(Notes.animateAppendNote).toHaveBeenCalledWith(note.html, $notesList);
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('when note was edited', () => {
it('should call .animateUpdateNote', () => {
Notes.isNewNote.mockReturnValueOnce(false);
Notes.isUpdatedNote.mockReturnValueOnce(true);
2018-10-17 03:13:26 -04:00
const $note = $('<div>');
$notesList.find.mockReturnValueOnce($note);
2018-10-17 03:13:26 -04:00
const $newNote = $(note.html);
Notes.animateUpdateNote.mockReturnValueOnce($newNote);
2017-05-03 13:41:16 -04:00
2018-10-17 03:13:26 -04:00
Notes.prototype.renderNote.call(notes, note, null, $notesList);
expect(Notes.animateUpdateNote).toHaveBeenCalledWith(note.html, $note);
expect(notes.setupNewNote).toHaveBeenCalledWith($newNote);
});
2018-10-17 03:13:26 -04:00
describe('while editing', () => {
it('should update textarea if nothing has been touched', () => {
Notes.isNewNote.mockReturnValueOnce(false);
Notes.isUpdatedNote.mockReturnValueOnce(true);
2018-10-17 03:13:26 -04:00
const $note = $(`<div class="is-editing">
<div class="original-note-content">initial</div>
<textarea class="js-note-text">initial</textarea>
</div>`);
$notesList.find.mockReturnValueOnce($note);
2017-05-03 13:41:16 -04:00
Notes.prototype.renderNote.call(notes, note, null, $notesList);
2018-10-17 03:13:26 -04:00
expect($note.find('.js-note-text').val()).toEqual(note.note);
2017-05-03 13:41:16 -04:00
});
2018-10-17 03:13:26 -04:00
it('should call .putConflictEditWarningInPlace', () => {
Notes.isNewNote.mockReturnValueOnce(false);
Notes.isUpdatedNote.mockReturnValueOnce(true);
2018-10-17 03:13:26 -04:00
const $note = $(`<div class="is-editing">
<div class="original-note-content">initial</div>
<textarea class="js-note-text">different</textarea>
</div>`);
$notesList.find.mockReturnValueOnce($note);
2018-10-17 03:13:26 -04:00
Notes.prototype.renderNote.call(notes, note, null, $notesList);
expect(notes.putConflictEditWarningInPlace).toHaveBeenCalledWith(note, $note);
2017-05-03 13:41:16 -04:00
});
});
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('isUpdatedNote', () => {
it('should consider same note text as the same', () => {
const result = Notes.isUpdatedNote(
{
note: 'initial',
},
$(`<div>
<div class="original-note-content">initial</div>
</div>`),
);
2018-10-17 03:13:26 -04:00
expect(result).toEqual(false);
});
2018-10-17 03:13:26 -04:00
it('should consider same note with trailing newline as the same', () => {
const result = Notes.isUpdatedNote(
{
note: 'initial\n',
},
$(`<div>
<div class="original-note-content">initial\n</div>
</div>`),
);
2018-10-17 03:13:26 -04:00
expect(result).toEqual(false);
});
2018-10-17 03:13:26 -04:00
it('should consider different notes as different', () => {
const result = Notes.isUpdatedNote(
{
note: 'foo',
},
$(`<div>
<div class="original-note-content">bar</div>
</div>`),
);
2018-10-17 03:13:26 -04:00
expect(result).toEqual(true);
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('renderDiscussionNote', () => {
let discussionContainer;
let note;
let notes;
let $form;
let row;
beforeEach(() => {
note = {
html: '<li></li>',
discussion_html: '<div></div>',
discussion_id: 1,
discussion_resolvable: false,
diff_discussion_html: false,
};
$form = createSpyObj('$form', ['closest', 'find']);
2018-10-17 03:13:26 -04:00
$form.length = 1;
row = createSpyObj('row', ['prevAll', 'first', 'find']);
2018-10-17 03:13:26 -04:00
notes = createSpyObj('notes', ['isParallelView', 'updateNotesCount']);
2018-10-17 03:13:26 -04:00
notes.note_ids = [];
jest.spyOn(Notes, 'isNewNote');
jest.spyOn(Notes, 'animateAppendNote').mockImplementation();
Notes.isNewNote.mockReturnValue(true);
notes.isParallelView.mockReturnValue(false);
row.prevAll.mockReturnValue(row);
row.first.mockReturnValue(row);
row.find.mockReturnValue(row);
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('Discussion root note', () => {
let body;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
body = createSpyObj('body', ['attr']);
2018-10-17 03:13:26 -04:00
discussionContainer = { length: 0 };
$form.closest.mockReturnValueOnce(row).mockReturnValue($form);
$form.find.mockReturnValue(discussionContainer);
body.attr.mockReturnValue('');
});
2018-10-17 03:13:26 -04:00
it('should call Notes.animateAppendNote', () => {
Notes.prototype.renderDiscussionNote.call(notes, note, $form);
2017-10-24 17:48:55 -04:00
2018-10-17 03:13:26 -04:00
expect(Notes.animateAppendNote).toHaveBeenCalledWith(
note.discussion_html,
$('.main-notes-list'),
);
});
2017-10-24 17:48:55 -04:00
2018-10-17 03:13:26 -04:00
it('should append to row selected with line_code', () => {
$form.length = 0;
note.discussion_line_code = 'line_code';
note.diff_discussion_html = '<tr></tr>';
2017-10-24 17:48:55 -04:00
2018-10-17 03:13:26 -04:00
const line = document.createElement('div');
line.id = note.discussion_line_code;
document.body.appendChild(line);
2017-10-24 17:48:55 -04:00
// Override mocks for this single test
$form.closest.mockReset();
$form.closest.mockReturnValue($form);
2017-10-24 17:48:55 -04:00
2018-10-17 03:13:26 -04:00
Notes.prototype.renderDiscussionNote.call(notes, note, $form);
2017-10-24 17:48:55 -04:00
2018-10-17 03:13:26 -04:00
expect(line.nextSibling.outerHTML).toEqual(note.diff_discussion_html);
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('Discussion sub note', () => {
beforeEach(() => {
discussionContainer = { length: 1 };
$form.closest.mockReturnValueOnce(row).mockReturnValueOnce($form);
$form.find.mockReturnValue(discussionContainer);
2018-10-17 03:13:26 -04:00
Notes.prototype.renderDiscussionNote.call(notes, note, $form);
});
2018-10-17 03:13:26 -04:00
it('should call Notes.animateAppendNote', () => {
expect(Notes.animateAppendNote).toHaveBeenCalledWith(note.html, discussionContainer);
});
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('animateAppendNote', () => {
let noteHTML;
let $notesList;
let $resultantNote;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
noteHTML = '<div></div>';
$notesList = createSpyObj('$notesList', ['append']);
2018-10-17 03:13:26 -04:00
$resultantNote = Notes.animateAppendNote(noteHTML, $notesList);
});
2018-10-17 03:13:26 -04:00
it('should have `fade-in-full` class', () => {
expect($resultantNote.hasClass('fade-in-full')).toEqual(true);
});
2018-10-17 03:13:26 -04:00
it('should append note to the notes list', () => {
expect($notesList.append).toHaveBeenCalledWith($resultantNote);
2017-05-03 13:41:16 -04:00
});
2018-10-17 03:13:26 -04:00
});
2017-05-03 13:41:16 -04:00
2018-10-17 03:13:26 -04:00
describe('animateUpdateNote', () => {
let noteHTML;
let $note;
let $updatedNote;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
noteHTML = '<div></div>';
$note = createSpyObj('$note', ['replaceWith']);
2017-05-03 13:41:16 -04:00
2018-10-17 03:13:26 -04:00
$updatedNote = Notes.animateUpdateNote(noteHTML, $note);
});
2017-05-03 13:41:16 -04:00
2018-10-17 03:13:26 -04:00
it('should have `fade-in` class', () => {
expect($updatedNote.hasClass('fade-in')).toEqual(true);
});
2018-10-17 03:13:26 -04:00
it('should call replaceWith on $note', () => {
expect($note.replaceWith).toHaveBeenCalledWith($updatedNote);
});
2018-10-17 03:13:26 -04:00
});
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
describe('putEditFormInPlace', () => {
it('should call GLForm with GFM parameter passed through', () => {
const notes = new Notes('', []);
const $el = $(`
<div>
<form></form>
</div>
`);
2018-10-17 03:13:26 -04:00
notes.putEditFormInPlace($el);
2018-10-17 03:13:26 -04:00
expect(notes.glForm.enableGFM).toBeTruthy();
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('postComment & updateComment', () => {
const sampleComment = 'foo';
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 notes;
2018-10-17 03:13:26 -04:00
let $form;
let $notesContainer;
function mockNotesPost() {
mockAxios.onPost(NOTES_POST_PATH).reply(200, note);
2018-10-17 03:13:26 -04:00
}
function mockNotesPostError() {
mockAxios.onPost(NOTES_POST_PATH).networkError();
2018-10-17 03:13:26 -04:00
}
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
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);
});
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
it('should show placeholder note while new comment is being posted', () => {
mockNotesPost();
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
expect($notesContainer.find('.note.being-posted').length).toBeGreaterThan(0);
});
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
it('should remove placeholder note when new comment is done posting', done => {
mockNotesPost();
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
setImmediate(() => {
2018-10-17 03:13:26 -04:00
expect($notesContainer.find('.note.being-posted').length).toEqual(0);
done();
});
});
2018-10-17 03:13:26 -04:00
describe('postComment', () => {
it('disables the submit button', done => {
const $submitButton = $form.find('.js-comment-submit-button');
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
expect($submitButton).not.toBeDisabled();
const dummyEvent = {
preventDefault() {},
target: $submitButton,
};
mockAxios.onPost(NOTES_POST_PATH).replyOnce(() => {
2018-10-17 03:13:26 -04:00
expect($submitButton).toBeDisabled();
return [200, note];
2018-02-01 04:07:16 -05:00
});
notes
2018-10-17 03:13:26 -04:00
.postComment(dummyEvent)
.then(() => {
expect($submitButton).not.toBeDisabled();
})
.then(done)
.catch(done.fail);
2018-03-21 15:45:23 -04:00
});
2018-10-17 03:13:26 -04:00
});
2018-03-21 15:45:23 -04:00
2018-10-17 03:13:26 -04:00
it('should show actual note element when new comment is done posting', done => {
mockNotesPost();
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
setImmediate(() => {
2018-10-17 03:13:26 -04:00
expect($notesContainer.find(`#note_${note.id}`).length).toBeGreaterThan(0);
done();
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
it('should reset Form when new comment is done posting', done => {
mockNotesPost();
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
setImmediate(() => {
2018-10-17 03:13:26 -04:00
expect($form.find('textarea.js-note-text').val()).toEqual('');
done();
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
it('should show flash error message when new comment failed to be posted', done => {
mockNotesPostError();
jest.spyOn(notes, 'addFlash');
2018-02-01 04:07:16 -05:00
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
setImmediate(() => {
expect(notes.addFlash).toHaveBeenCalled();
// JSDom doesn't support the :visible selector yet
expect(notes.flashContainer.style.display).not.toBe('none');
2018-10-17 03:13:26 -04:00
done();
});
2018-10-17 03:13:26 -04:00
});
});
describe('postComment with quick actions', () => {
2018-10-17 03:13:26 -04:00
const sampleComment = '/assign @root\n/award :100:';
const note = {
commands_changes: {
assignee_id: 1,
emoji_award: '100',
},
errors: {
commands_only: ['Commands applied'],
},
valid: false,
};
let $form;
let $notesContainer;
beforeEach(() => {
loadFixtures('commit/show.html');
mockAxios.onPost(NOTES_POST_PATH).reply(200, note);
2018-10-17 03:13:26 -04:00
new Notes('', []);
2018-10-17 03:13:26 -04:00
window.gon.current_username = 'root';
window.gon.current_user_fullname = 'Administrator';
gl.awardsHandler = {
addAwardToEmojiBar: () => {},
scrollToAwards: () => {},
};
gl.GfmAutoComplete = {
dataSources: {
commands: '/root/test-project/autocomplete_sources/commands',
},
};
2018-10-17 03:13:26 -04:00
$form = $('form.js-main-target-form');
$notesContainer = $('ul.main-notes-list');
$form.find('textarea.js-note-text').val(sampleComment);
});
it('should remove quick action placeholder when comment with quick actions is done posting', done => {
jest.spyOn(gl.awardsHandler, 'addAwardToEmojiBar');
2018-10-17 03:13:26 -04:00
$('.js-comment-button').click();
expect($notesContainer.find('.note.being-posted').length).toEqual(1); // Placeholder shown
2018-02-01 04:07:16 -05:00
setImmediate(() => {
expect($notesContainer.find('.note.being-posted').length).toEqual(0); // Placeholder removed
done();
});
});
});
describe('postComment with slash when quick actions are not supported', () => {
const sampleComment = '/assign @root';
let $form;
let $notesContainer;
beforeEach(() => {
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,
};
mockAxios.onPost(NOTES_POST_PATH).reply(200, note);
new Notes('', []);
$form = $('form.js-main-target-form');
$notesContainer = $('ul.main-notes-list');
$form.find('textarea.js-note-text').val(sampleComment);
});
it('should show message placeholder including lines starting with slash', done => {
$('.js-comment-button').click();
expect($notesContainer.find('.note.being-posted').length).toEqual(1); // Placeholder shown
expect($notesContainer.find('.note-body p').text()).toEqual(sampleComment); // No quick action processing
setImmediate(() => {
expect($notesContainer.find('.note.being-posted').length).toEqual(0); // Placeholder removed
2018-10-17 03:13:26 -04:00
done();
});
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('update comment with script tags', () => {
const sampleComment = '<script></script>';
const updatedComment = '<script></script>';
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(() => {
mockAxios.onPost(NOTES_POST_PATH).reply(200, note);
2018-10-17 03:13:26 -04:00
new Notes('', []);
2018-10-17 03:13:26 -04:00
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').html(sampleComment);
});
2018-10-17 03:13:26 -04:00
it('should not render a script tag', done => {
$('.js-comment-button').click();
2018-02-01 04:07:16 -05:00
setImmediate(() => {
2018-10-17 03:13:26 -04:00
const $noteEl = $notesContainer.find(`#note_${note.id}`);
$noteEl.find('.js-note-edit').click();
$noteEl.find('textarea.js-note-text').html(updatedComment);
$noteEl.find('.js-comment-save-button').click();
2018-10-17 03:13:26 -04:00
const $updatedNoteEl = $notesContainer
.find(`#note_${note.id}`)
.find('.js-task-list-container');
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
expect(
$updatedNoteEl
.find('.note-text')
.text()
.trim(),
).toEqual('');
2018-10-17 03:13:26 -04:00
done();
});
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('getFormData', () => {
let $form;
let sampleComment;
let notes;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
$form = $('form');
sampleComment = 'foobar';
});
2018-10-17 03:13:26 -04:00
it('should return form metadata object from form reference', () => {
$form.find('textarea.js-note-text').val(sampleComment);
const { formData, formContent, formAction } = notes.getFormData($form);
2018-10-17 03:13:26 -04:00
expect(formData.indexOf(sampleComment)).toBeGreaterThan(-1);
expect(formContent).toEqual(sampleComment);
expect(formAction).toEqual($form.attr('action'));
2017-05-05 06:57:29 -04:00
});
2018-10-17 03:13:26 -04:00
it('should return form metadata with sanitized formContent from form reference', () => {
sampleComment = '<script>alert("Boom!");</script>';
$form.find('textarea.js-note-text').val(sampleComment);
2017-05-05 06:57:29 -04:00
const { formContent } = notes.getFormData($form);
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
expect(formContent).toEqual('&lt;script&gt;alert(&quot;Boom!&quot;);&lt;/script&gt;');
});
});
2018-10-17 03:13:26 -04:00
describe('hasQuickActions', () => {
let notes;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
it('should return true when comment begins with a quick action', () => {
const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign Merging this';
const hasQuickActions = notes.hasQuickActions(sampleComment);
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
expect(hasQuickActions).toBeTruthy();
2017-05-05 06:57:29 -04:00
});
2018-10-17 03:13:26 -04:00
it('should return false when comment does NOT begin with a quick action', () => {
const sampleComment = 'Hey, /unassign Merging this';
const hasQuickActions = notes.hasQuickActions(sampleComment);
2018-10-17 03:13:26 -04:00
expect(hasQuickActions).toBeFalsy();
});
2018-10-17 03:13:26 -04:00
it('should return false when comment does NOT have any quick actions', () => {
const sampleComment = 'Looking good, Awesome!';
const hasQuickActions = notes.hasQuickActions(sampleComment);
2018-10-17 03:13:26 -04:00
expect(hasQuickActions).toBeFalsy();
});
});
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
describe('stripQuickActions', () => {
it('should strip quick actions from the comment which begins with a quick action', () => {
const notes = new Notes();
2018-10-17 03:13:26 -04:00
const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign Merging this';
const stripedComment = notes.stripQuickActions(sampleComment);
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
expect(stripedComment).toBe('');
2017-05-05 06:57:29 -04:00
});
2018-10-17 03:13:26 -04:00
it('should strip quick actions from the comment but leaves plain comment if it is present', () => {
const notes = new Notes();
2018-10-17 03:13:26 -04:00
const sampleComment = '/wip\n/milestone %1.0\n/merge\n/unassign\nMerging this';
const stripedComment = notes.stripQuickActions(sampleComment);
2018-10-17 03:13:26 -04:00
expect(stripedComment).toBe('Merging this');
});
2018-10-17 03:13:26 -04:00
it('should NOT strip string that has slashes within', () => {
const notes = new Notes();
2018-10-17 03:13:26 -04:00
const sampleComment = 'http://127.0.0.1:3000/root/gitlab-shell/issues/1';
const stripedComment = notes.stripQuickActions(sampleComment);
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
expect(stripedComment).toBe(sampleComment);
});
});
2018-10-17 03:13:26 -04:00
describe('getQuickActionDescription', () => {
const availableQuickActions = [
{ name: 'close', description: 'Close this issue', params: [] },
{ name: 'title', description: 'Change title', params: [{}] },
{ name: 'estimate', description: 'Set time estimate', params: [{}] },
];
let notes;
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
beforeEach(() => {
notes = new Notes();
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
it('should return executing quick action description when note has single quick action', () => {
const sampleComment = '/close';
2018-10-09 14:03:09 -04:00
expect(notes.getQuickActionDescription(sampleComment, availableQuickActions)).toBe(
2018-10-17 03:13:26 -04:00
'Applying command to close this issue',
);
});
2018-10-17 03:13:26 -04:00
it('should return generic multiple quick action description when note has multiple quick actions', () => {
const sampleComment = '/close\n/title [Duplicate] Issue foobar';
2017-05-05 06:57:29 -04:00
expect(notes.getQuickActionDescription(sampleComment, availableQuickActions)).toBe(
2018-10-17 03:13:26 -04:00
'Applying multiple commands',
);
});
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
it('should return generic quick action description when available quick actions list is not populated', () => {
const sampleComment = '/close\n/title [Duplicate] Issue foobar';
2018-10-09 14:03:09 -04:00
expect(notes.getQuickActionDescription(sampleComment)).toBe('Applying command');
2018-10-17 03:13:26 -04:00
});
});
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
describe('createPlaceholderNote', () => {
const sampleComment = 'foobar';
const uniqueId = 'b1234-a4567';
const currentUsername = 'root';
const currentUserFullname = 'Administrator';
const currentUserAvatar = 'avatar_url';
let notes;
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
it('should return constructed placeholder element for regular note based on form contents', () => {
const $tempNote = notes.createPlaceholderNote({
2018-10-17 03:13:26 -04:00
formContent: sampleComment,
uniqueId,
isDiscussionNote: false,
currentUsername,
currentUserFullname,
currentUserAvatar,
});
const $tempNoteHeader = $tempNote.find('.note-header');
expect($tempNote.prop('nodeName')).toEqual('LI');
expect($tempNote.attr('id')).toEqual(uniqueId);
expect($tempNote.hasClass('being-posted')).toBeTruthy();
expect($tempNote.hasClass('fade-in-half')).toBeTruthy();
$tempNote.find('.timeline-icon > a, .note-header-info > a').each((i, el) => {
expect(el.getAttribute('href')).toEqual(`/${currentUsername}`);
2018-10-17 03:13:26 -04:00
});
expect($tempNote.find('.timeline-icon .avatar').attr('src')).toEqual(currentUserAvatar);
expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeFalsy();
expect(
$tempNoteHeader
.find('.d-none.d-sm-inline-block')
.text()
.trim(),
).toEqual(currentUserFullname);
expect(
$tempNoteHeader
.find('.note-headline-light')
.text()
.trim(),
).toEqual(`@${currentUsername}`);
expect(
$tempNote
.find('.note-body .note-text p')
.text()
.trim(),
).toEqual(sampleComment);
});
2018-10-17 03:13:26 -04:00
it('should return constructed placeholder element for discussion note based on form contents', () => {
const $tempNote = notes.createPlaceholderNote({
2018-10-17 03:13:26 -04:00
formContent: sampleComment,
uniqueId,
isDiscussionNote: true,
currentUsername,
currentUserFullname,
2017-05-05 06:57:29 -04:00
});
2018-10-17 03:13:26 -04:00
expect($tempNote.prop('nodeName')).toEqual('LI');
expect($tempNote.find('.timeline-content').hasClass('discussion')).toBeTruthy();
});
2018-10-09 14:03:09 -04:00
2018-10-17 03:13:26 -04:00
it('should return a escaped user name', () => {
const currentUserFullnameXSS = 'Foo <script>alert("XSS")</script>';
const $tempNote = notes.createPlaceholderNote({
2018-10-17 03:13:26 -04:00
formContent: sampleComment,
uniqueId,
isDiscussionNote: false,
currentUsername,
currentUserFullname: currentUserFullnameXSS,
currentUserAvatar,
});
const $tempNoteHeader = $tempNote.find('.note-header');
expect(
$tempNoteHeader
.find('.d-none.d-sm-inline-block')
.text()
.trim(),
).toEqual('Foo &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
});
2018-10-17 03:13:26 -04:00
});
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
describe('createPlaceholderSystemNote', () => {
const sampleCommandDescription = 'Applying command to close this issue';
const uniqueId = 'b1234-a4567';
let notes;
2018-10-17 03:13:26 -04:00
beforeEach(() => {
notes = new Notes('', []);
2018-10-17 03:13:26 -04:00
});
2017-05-05 06:57:29 -04:00
2018-10-17 03:13:26 -04:00
it('should return constructed placeholder element for system note based on form contents', () => {
const $tempNote = notes.createPlaceholderSystemNote({
2018-10-17 03:13:26 -04:00
formContent: sampleCommandDescription,
uniqueId,
});
expect($tempNote.prop('nodeName')).toEqual('LI');
expect($tempNote.attr('id')).toEqual(uniqueId);
expect($tempNote.hasClass('being-posted')).toBeTruthy();
expect($tempNote.hasClass('fade-in-half')).toBeTruthy();
expect(
$tempNote
.find('.timeline-content i')
.text()
.trim(),
).toEqual(sampleCommandDescription);
2017-05-05 06:57:29 -04:00
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('appendFlash', () => {
it('shows a flash message', () => {
const notes = new Notes('', []);
notes.addFlash('Error message', FLASH_TYPE_ALERT, notes.parentTimeline.get(0));
const flash = $('.flash-alert')[0];
expect(document.contains(flash)).toBe(true);
expect(flash.parentNode.style.display).toBe('block');
});
2018-10-17 03:13:26 -04:00
});
2018-10-17 03:13:26 -04:00
describe('clearFlash', () => {
beforeEach(() => {
$(document).off('ajax:success');
});
2018-10-17 03:13:26 -04:00
it('hides visible flash message', () => {
const notes = new Notes('', []);
notes.addFlash('Error message 1', FLASH_TYPE_ALERT, notes.parentTimeline.get(0));
const flash = $('.flash-alert')[0];
notes.clearFlash();
expect(flash.parentNode.style.display).toBe('none');
expect(notes.flashContainer).toBeNull();
});
2016-07-24 16:45:11 -04:00
});
2018-10-17 03:13:26 -04:00
});