Adds missing unit tests for vue components: issue_note_awards_list; issue_note_body; issue_note_form;issue_note_spec

spec/javascripts/notes/components/issue_note_awards_list_spec.js

@@ -1,13 +1,55 @@
-describe('issue_note_awards_list component', () => {
-  it('should render awarded emojis', () => {
+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', () => {
+  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();
   });
 });

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', () => {
+  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();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
   it('should render the note', () => {
-
+    expect(vm.$el.querySelector('.note-text').innerHTML).toEqual(note.note_html);
   });
 
-  it('should be render form if user is editing', () => {
-
-  });
-
-  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);
   });
 });

spec/javascripts/notes/components/issue_note_form_spec.js

@@ -1,7 +1,44 @@
-describe('issue_note_form component', () => {
-  describe('conflicts editing', () => {
-    it('should show conflict message if note changes outside the component', () => {
+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();
+      });
     });
   });
 

spec/javascripts/notes/components/issue_note_spec.js

@@ -1,17 +1,44 @@
-describe('issue_note', () => {
-  it('should render user information', () => {
 
+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', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(issueNote);
+
+    store.dispatch('setIssueData', issueDataMock);
+    store.dispatch('setNotesData', notesDataMock);
+
+    vm = new Component({
+      store,
+      propsData: {
+        note,
+      },
+    }).$mount();
+  });
+
+  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 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);
   });
 });

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',