Commit 16b15a11 authored by Filipa Lacerda's avatar Filipa Lacerda

[ci skip] Adds unit tests for issue comment form spec

parent 3372ae8b
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
<div> <div>
<issue-note-signed-out-widget v-if="!isLoggedIn" /> <issue-note-signed-out-widget v-if="!isLoggedIn" />
<ul <ul
v-if="isLoggedIn" v-else
class="notes notes-form timeline new-note"> class="notes notes-form timeline new-note">
<li class="timeline-entry" ref="commentForm"> <li class="timeline-entry" ref="commentForm">
<div class="timeline-entry-inner"> <div class="timeline-entry-inner">
......
...@@ -74,8 +74,8 @@ ...@@ -74,8 +74,8 @@
}, },
onDelete() { onDelete() {
this.$emit('deleteHandler'); this.$emit('deleteHandler');
} },
} },
}; };
</script> </script>
......
import Vue from 'vue';
import store from '~/notes/stores';
import issueCommentForm from '~/notes/components/issue_comment_form.vue';
import { loggedOutIssueData, notesDataMock, userDataMock, issueDataMock } from '../mock_data';
import { keyboardDownEvent } from '../../issue_show/helpers';
describe('issue_comment_form component', () => { describe('issue_comment_form component', () => {
let vm;
const Component = Vue.extend(issueCommentForm);
let mountComponent;
beforeEach(() => {
mountComponent = () => new Component({
store,
}).$mount();
});
afterEach(() => {
vm.$destroy();
});
describe('user is logged in', () => { describe('user is logged in', () => {
it('should render user avatar with link', () => { beforeEach(() => {
store.dispatch('setUserData', userDataMock);
store.dispatch('setIssueData', issueDataMock);
store.dispatch('setNotesData', notesDataMock);
vm = mountComponent();
});
it('should render user avatar with link', () => {
expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path);
}); });
describe('textarea', () => { describe('textarea', () => {
it('should render textarea with placeholder', () => { it('should render textarea with placeholder', () => {
expect(
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'),
).toEqual('Write a comment or drag your files here...');
}); });
it('should support quick actions', () => { it('should support quick actions', () => {
expect(
vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
).toEqual('true');
}); });
it('should link to markdown docs', () => { it('should link to markdown docs', () => {
const { markdownDocs } = notesDataMock;
expect(vm.$el.querySelector(`a[href="${markdownDocs}"]`).textContent.trim()).toEqual('Markdown');
}); });
it('should link to quick actions docs', () => { it('should link to quick actions docs', () => {
const { quickActionsDocs } = notesDataMock;
expect(vm.$el.querySelector(`a[href="${quickActionsDocs}"]`).textContent.trim()).toEqual('quick actions');
}); });
describe('edit mode', () => { describe('edit mode', () => {
it('should enter edit mode when arrow up is pressed', () => { it('should enter edit mode when arrow up is pressed', () => {
spyOn(vm, 'editCurrentUserLastNote').and.callThrough();
vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(38, true));
}); expect(vm.editCurrentUserLastNote).toHaveBeenCalled();
});
describe('preview mode', () => {
it('should be possible to preview the note', () => {
}); });
}); });
describe('event enter', () => { describe('event enter', () => {
it('should save note when cmd/ctrl+enter is pressed', () => { it('should save note when cmd/ctrl+enter is pressed', () => {
spyOn(vm, 'handleSave').and.callThrough();
vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo';
vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, true));
expect(vm.handleSave).toHaveBeenCalled();
}); });
}); });
}); });
describe('actions', () => { describe('actions', () => {
describe('with empty note', () => { it('should be possible to close the issue', () => {
it('should render dropdown as disabled', () => { expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue');
});
}); });
describe('with note', () => { it('should render comment button as disabled', () => {
it('should render enabled dropdown with 2 actions', () => { expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled');
}); });
it('should render be possible to discard draft', () => { it('should enable comment button if it has note', (done) => {
vm.note = 'Foo';
Vue.nextTick(() => {
expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(null);
done();
}); });
}); });
describe('with open issue', () => { it('should update buttons texts when it has note', (done) => {
it('should be possible to close the issue', () => { vm.note = 'Foo';
Vue.nextTick(() => {
expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Comment & close issue');
expect(vm.$el.querySelector('.js-note-discard')).toBeDefined();
done();
}); });
}); });
describe('with closed issue', () => {
it('should be possible to reopen the issue', () => {
});
}); });
}); });
describe('user is not logged in', () => {
beforeEach(() => {
store.dispatch('setUserData', null);
store.dispatch('setIssueData', loggedOutIssueData);
store.dispatch('setNotesData', notesDataMock);
vm = mountComponent();
}); });
describe('user is not logged in', () => {
it('should render signed out widget', () => { it('should render signed out widget', () => {
expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
}); });
it('should not render submission form', () => { it('should not render submission form', () => {
expect(vm.$el.querySelector('textarea')).toEqual(null);
}); });
}); });
}); });
describe('issue_discussion component', () => { describe('issue_discussion component', () => {
it('should render user avatar', () => { it('should render user avatar', () => {
}); });
......
describe('issue_note_form component', () => { describe('issue_note_form component', () => {
describe('conflicts editing', () => { describe('conflicts editing', () => {
it('should show conflict message if note changes outside the component', () => { it('should show conflict message if note changes outside the component', () => {
......
...@@ -221,6 +221,47 @@ export const discussionMock = { ...@@ -221,6 +221,47 @@ export const discussionMock = {
individual_note: false, individual_note: false,
}; };
export const loggedOutIssueData = {
"id": 98,
"iid": 26,
"author_id": 1,
"description": "",
"lock_version": 1,
"milestone_id": null,
"state": "opened",
"title": "asdsa",
"updated_by_id": 1,
"created_at": "2017-02-07T10:11:18.395Z",
"updated_at": "2017-08-08T10:22:51.564Z",
"deleted_at": null,
"time_estimate": 0,
"total_time_spent": 0,
"human_time_estimate": null,
"human_total_time_spent": null,
"milestone": null,
"labels": [],
"branch_name": null,
"confidential": false,
"assignees": [{
"id": 1,
"name": "Root",
"username": "root",
"state": "active",
"avatar_url": null,
"web_url": "http://localhost:3000/root"
}],
"due_date": null,
"moved_to_id": null,
"project_id": 2,
"web_url": "/gitlab-org/gitlab-ce/issues/26",
"current_user": {
"can_create_note": false,
"can_update": false
},
"create_note_path": "/gitlab-org/gitlab-ce/notes?target_id=98&target_type=issue",
"preview_note_path": "/gitlab-org/gitlab-ce/preview_markdown?quick_actions_target_id=98&quick_actions_target_type=Issue"
}
export const individualNoteServerResponse = [{ export const individualNoteServerResponse = [{
"id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd", "id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
"reply_id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd", "reply_id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment