diff --git a/spec/javascripts/notes/components/issue_note_awards_list_spec.js b/spec/javascripts/notes/components/issue_note_awards_list_spec.js index 82d6f677feaa4364b7cdb396473a7fb2feff20df..d4156e29ba09e0454f5c1f678d6a4f654f8766ac 100644 --- a/spec/javascripts/notes/components/issue_note_awards_list_spec.js +++ b/spec/javascripts/notes/components/issue_note_awards_list_spec.js @@ -1,13 +1,55 @@ +import Vue from 'vue'; +import store from '~/notes/stores'; +import awardsNote from '~/notes/components/issue_note_awards_list.vue'; +import { issueDataMock, notesDataMock } from '../mock_data'; + describe('issue_note_awards_list component', () => { - it('should render awarded emojis', () => { + let vm; + let awardsMock; + + beforeEach(() => { + const Component = Vue.extend(awardsNote); + + store.dispatch('setIssueData', issueDataMock); + store.dispatch('setNotesData', notesDataMock); + awardsMock = [ + { + name: 'flag_tz', + user: { id: 1, name: 'Administrator', username: 'root' }, + }, + { + name: 'cartwheel_tone3', + user: { id: 12, name: 'Bobbie Stehr', username: 'erin' }, + }, + ]; + + vm = new Component({ + store, + propsData: { + awards: awardsMock, + noteAuthorId: 2, + noteId: 545, + toggleAwardPath: '/gitlab-org/gitlab-ce/notes/545/toggle_award_emoji', + }, + }).$mount(); + }); + afterEach(() => { + vm.$destroy(); + }); + + it('should render awarded emojis', () => { + expect(vm.$el.querySelectorAll('.js-awards-block button').length).toEqual(awardsMock.length); }); it('should be possible to remove awareded emoji', () => { + spyOn(vm, 'handleAward').and.callThrough(); + vm.$el.querySelector('.js-awards-block button').click(); + expect(vm.handleAward).toHaveBeenCalledWith('flag_tz'); }); it('should be possible to add new emoji', () => { - + expect(vm.$el.querySelector('.js-add-award')).toBeDefined(); }); }); diff --git a/spec/javascripts/notes/components/issue_note_body_spec.js b/spec/javascripts/notes/components/issue_note_body_spec.js index 5061b97e9a6a5795eac2ff548acefd2a978aa176..c0e06b0985b66a3b996cf25b190ba5d852e5ab5f 100644 --- a/spec/javascripts/notes/components/issue_note_body_spec.js +++ b/spec/javascripts/notes/components/issue_note_body_spec.js @@ -1,17 +1,45 @@ + +import Vue from 'vue'; +import store from '~/notes/stores'; +import noteBody from '~/notes/components/issue_note_body.vue'; +import { issueDataMock, notesDataMock, note } from '../mock_data'; + describe('issue_note_body component', () => { - it('should render the note', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(noteBody); + store.dispatch('setIssueData', issueDataMock); + store.dispatch('setNotesData', notesDataMock); + + vm = new Component({ + store, + propsData: { + note, + canEdit: true, + }, + }).$mount(); }); - it('should be render form if user is editing', () => { + afterEach(() => { + vm.$destroy(); + }); + it('should render the note', () => { + expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html); }); - it('should render information if note was edited', () => { + it('should be render form if user is editing', (done) => { + vm.isEditing = true; + Vue.nextTick(() => { + expect(vm.$el.querySelector('textarea.js-task-list-field')).toBeDefined(); + done(); + }); }); it('should render awards list', () => { - + expect(vm.$el.querySelectorAll('.js-awards-block button').length).toEqual(note.award_emoji.length); }); }); diff --git a/spec/javascripts/notes/components/issue_note_form_spec.js b/spec/javascripts/notes/components/issue_note_form_spec.js index 678374de60ad1b93c005a8701c5c1bffb29968e8..78f8ed87d50d0a90c950ac369d3de863222ed56b 100644 --- a/spec/javascripts/notes/components/issue_note_form_spec.js +++ b/spec/javascripts/notes/components/issue_note_form_spec.js @@ -1,7 +1,44 @@ -describe('issue_note_form component', () => { - describe('conflicts editing', () => { +import Vue from 'vue'; +import store from '~/notes/stores'; +import issueNote from '~/notes/components/issue_note.vue'; +import { issueDataMock, notesDataMock } from '../mock_data'; + +fdescribe('issue_note_form component', () => { + let vm; + let props; + + beforeEach(() => { + const Component = Vue.extend(issueNote); + + store.dispatch('setIssueData', issueDataMock); + store.dispatch('setNotesData', notesDataMock); + + props = { + isEditing: true, + noteBody: 'Magni suscipit eius consectetur enim et ex et commodi.', + noteId: 545, + saveButtonTitle: 'Save comment', + }; + + vm = new Component({ + store, + propsData: props, + }).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('conflicts editing', (done) => { it('should show conflict message if note changes outside the component', () => { + vm.noteBody = 'Foo'; + + Vue.nextTick(() => { + console.log('', vm.$el); + done(); + }); }); }); diff --git a/spec/javascripts/notes/components/issue_note_spec.js b/spec/javascripts/notes/components/issue_note_spec.js index 69846a8038bdd85caafa648b53aabb896ae682e7..7ef85d5b4f0d740d1c2a1e27e7760eef20f0c0e2 100644 --- a/spec/javascripts/notes/components/issue_note_spec.js +++ b/spec/javascripts/notes/components/issue_note_spec.js @@ -1,17 +1,44 @@ + +import Vue from 'vue'; +import store from '~/notes/stores'; +import issueNote from '~/notes/components/issue_note.vue'; +import { issueDataMock, notesDataMock, note } from '../mock_data'; + describe('issue_note', () => { - it('should render user information', () => { + let vm; + + beforeEach(() => { + const Component = Vue.extend(issueNote); + store.dispatch('setIssueData', issueDataMock); + store.dispatch('setNotesData', notesDataMock); + + vm = new Component({ + store, + propsData: { + note, + }, + }).$mount(); }); - it('should render note header content', () => { + afterEach(() => { + vm.$destroy(); + }); + it('should render user information', () => { + expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual(note.author.avatar_url); }); - it('should render note actions', () => { + it('should render note header content', () => { + expect(vm.$el.querySelector('.note-header .note-header-author-name').textContent.trim()).toEqual(note.author.name); + expect(vm.$el.querySelector('.note-header .note-headline-meta').textContent.trim()).toContain('commented'); + }); + it('should render note actions', () => { + expect(vm.$el.querySelector('.note-actions')).toBeDefined(); }); it('should render issue body', () => { - + expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html); }); }); diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js index 795d67a24a04367dd6c27459dc436b2d016d9659..968188c1cf5d90184cb6208c0e0c6ced8bc3cb03 100644 --- a/spec/javascripts/notes/mock_data.js +++ b/spec/javascripts/notes/mock_data.js @@ -70,7 +70,7 @@ export const individualNote = { name: 'Root', username: 'root', state: 'active', - avatar_url: null, + avatar_url: 'test', path: '/root', }, created_at: '2017-08-01T17: 09: 33.762Z', @@ -96,6 +96,56 @@ export const individualNote = { reply_id: '0fb4e0e3f9276e55ff32eb4195add694aece4edd', }; +export const note = { + "id": 546, + "attachment": { + "url": null, + "filename": null, + "image": false + }, + "author": { + "id": 1, + "name": "Administrator", + "username": "root", + "state": "active", + "avatar_url": "http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon", + "path": "/root" + }, + "created_at": "2017-08-10T15:24:03.087Z", + "updated_at": "2017-08-10T15:24:03.087Z", + "system": false, + "noteable_id": 67, + "noteable_type": "Issue", + "noteable_iid": 7, + "type": null, + "human_access": "Owner", + "note": "Vel id placeat reprehenderit sit numquam.", + "note_html": "<p dir=\"auto\">Vel id placeat reprehenderit sit numquam.</p>", + "current_user": { + "can_edit": true + }, + "discussion_id": "d3842a451b7f3d9a5dfce329515127b2d29a4cd0", + "emoji_awardable": true, + "award_emoji": [{ + "name": "baseball", + "user": { + "id": 1, + "name": "Administrator", + "username": "root" + } + }, { + "name": "bath_tone3", + "user": { + "id": 1, + "name": "Administrator", + "username": "root" + } + }], + "toggle_award_path": "/gitlab-org/gitlab-ce/notes/546/toggle_award_emoji", + "report_abuse_path": "/abuse_reports/new?ref_url=http%3A%2F%2Flocalhost%3A3000%2Fgitlab-org%2Fgitlab-ce%2Fissues%2F7%23note_546&user_id=1", + "path": "/gitlab-org/gitlab-ce/notes/546" + } + export const discussionMock = { id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1', reply_id: '9e3bd2f71a01de45fd166e6719eb380ad9f270b1',