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

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -204,7 +204,7 @@
   <div>
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
     <ul
-      v-if="isLoggedIn"
+      v-else
       class="notes notes-form timeline new-note">
       <li class="timeline-entry" ref="commentForm">
         <div class="timeline-entry-inner">

app/assets/javascripts/notes/components/issue_note_actions.vue

@@ -74,8 +74,8 @@
       },
       onDelete() {
         this.$emit('deleteHandler');
-      }
-    }
+      },
+    },
   };
 </script>
 

spec/javascripts/notes/components/issue_comment_form_spec.js

+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', () => {
+  let vm;
+  const Component = Vue.extend(issueCommentForm);
+  let mountComponent;
+
+  beforeEach(() => {
+    mountComponent = () => new Component({
+      store,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
 
   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', () => {
       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', () => {
-
+        expect(
+          vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'),
+        ).toEqual('true');
       });
 
       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', () => {
-
+        const { quickActionsDocs } = notesDataMock;
+        expect(vm.$el.querySelector(`a[href="${quickActionsDocs}"]`).textContent.trim()).toEqual('quick actions');
       });
 
       describe('edit mode', () => {
         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));
 
-        });
-      });
-
-      describe('preview mode', () => {
-        it('should be possible to preview the note', () => {
-
+          expect(vm.editCurrentUserLastNote).toHaveBeenCalled();
         });
       });
 
       describe('event enter', () => {
         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('with empty note', () => {
-        it('should render dropdown as disabled', () => {
-
-        });
+      it('should be possible to close the issue', () => {
+        expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue');
       });
 
-      describe('with note', () => {
-        it('should render enabled dropdown with 2 actions', () => {
-
+      it('should render comment button as disabled', () => {
+        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 be possible to close the issue', () => {
-
+      it('should update buttons texts when it has note', (done) => {
+        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', () => {
-
+      expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply');
     });
 
     it('should not render submission form', () => {
-
+      expect(vm.$el.querySelector('textarea')).toEqual(null);
     });
   });
 });

spec/javascripts/notes/components/issue_discussion_spec.js

 describe('issue_discussion component', () => {
-
   it('should render user avatar', () => {
 
   });

spec/javascripts/notes/components/issue_note_form_spec.js

 describe('issue_note_form component', () => {
-
   describe('conflicts editing', () => {
     it('should show conflict message if note changes outside the component', () => {
 

spec/javascripts/notes/mock_data.js

@@ -221,6 +221,47 @@ export const discussionMock = {
   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 = [{
   "id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",
   "reply_id": "0fb4e0e3f9276e55ff32eb4195add694aece4edd",