diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 961b3f3c890eac120ea99b7eeaa67b87508ed48a..acb15a7c601dbcdbe06dc66e8a994715aff5a8d6 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/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">
diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
index 638362f4588d47728ec540baebe1ec4d3cd52fc7..892787df45a0e26177a92853f7f6c0370285b950 100644
--- a/app/assets/javascripts/notes/components/issue_note_actions.vue
+++ b/app/assets/javascripts/notes/components/issue_note_actions.vue
@@ -74,8 +74,8 @@
       },
       onDelete() {
         this.$emit('deleteHandler');
-      }
-    }
+      },
+    },
   };
 </script>
 
diff --git a/spec/javascripts/notes/components/issue_comment_form_spec.js b/spec/javascripts/notes/components/issue_comment_form_spec.js
index 389ccd6e886365eb2779a45d8298e57de03f2f6b..deaafb5e8a9e6a4c1de0d5d7046bced67c5f3ef1 100644
--- a/spec/javascripts/notes/components/issue_comment_form_spec.js
+++ b/spec/javascripts/notes/components/issue_comment_form_spec.js
@@ -1,86 +1,124 @@
+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 be possible to discard draft', () => {
-
-        });
+      it('should render comment button as disabled', () => {
+        expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled');
       });
 
-      describe('with open issue', () => {
-        it('should be possible to close the issue', () => {
-
+      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 closed issue', () => {
-        it('should be possible to reopen 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('user is not logged in', () => {
-    it('should render signed out widget', () => {
+    beforeEach(() => {
+      store.dispatch('setUserData', null);
+      store.dispatch('setIssueData', loggedOutIssueData);
+      store.dispatch('setNotesData', notesDataMock);
 
+      vm = mountComponent();
     });
 
-    it('should not render submission form', () => {
+    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);
     });
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/components/issue_discussion_spec.js b/spec/javascripts/notes/components/issue_discussion_spec.js
index 3d6b45d2dadeb65a8cbae2a00827e668aed2789b..9bc1ec3725063667d7b31871461e8291b5c6be53 100644
--- a/spec/javascripts/notes/components/issue_discussion_spec.js
+++ b/spec/javascripts/notes/components/issue_discussion_spec.js
@@ -1,5 +1,4 @@
 describe('issue_discussion component', () => {
-
   it('should render user avatar', () => {
 
   });
@@ -41,4 +40,4 @@ describe('issue_discussion component', () => {
       });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/components/issue_note_actions_spec.js b/spec/javascripts/notes/components/issue_note_actions_spec.js
index f23c73dd73fc4f32b9abfdbaf5b05749c3478c43..eb3dc691f18ecb4bba6a9f32fdaaf6c4d5330672 100644
--- a/spec/javascripts/notes/components/issue_note_actions_spec.js
+++ b/spec/javascripts/notes/components/issue_note_actions_spec.js
@@ -32,4 +32,4 @@ describe('issse_note_actions component', () => {
 
     });
   });
-});
\ No newline at end of file
+});
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 8620932004deb568ec8771ce62900c5fb64ce0c7..82d6f677feaa4364b7cdb396473a7fb2feff20df 100644
--- a/spec/javascripts/notes/components/issue_note_awards_list_spec.js
+++ b/spec/javascripts/notes/components/issue_note_awards_list_spec.js
@@ -10,4 +10,4 @@ describe('issue_note_awards_list component', () => {
   it('should be possible to add new emoji', () => {
 
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/components/issue_note_body_spec.js b/spec/javascripts/notes/components/issue_note_body_spec.js
index 1c0d07af644f39e8f87eb800dffbce9bbb5c1f66..5061b97e9a6a5795eac2ff548acefd2a978aa176 100644
--- a/spec/javascripts/notes/components/issue_note_body_spec.js
+++ b/spec/javascripts/notes/components/issue_note_body_spec.js
@@ -14,4 +14,4 @@ describe('issue_note_body component', () => {
   it('should render awards list', () => {
 
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/components/issue_note_form_spec.js b/spec/javascripts/notes/components/issue_note_form_spec.js
index f41146463f539d19c01a442883dbfebab36ece77..678374de60ad1b93c005a8701c5c1bffb29968e8 100644
--- a/spec/javascripts/notes/components/issue_note_form_spec.js
+++ b/spec/javascripts/notes/components/issue_note_form_spec.js
@@ -1,5 +1,4 @@
 describe('issue_note_form component', () => {
-
   describe('conflicts editing', () => {
     it('should show conflict message if note changes outside the component', () => {
 
@@ -61,4 +60,4 @@ describe('issue_note_form component', () => {
       });
     });
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/components/issue_note_spec.js b/spec/javascripts/notes/components/issue_note_spec.js
index 6ec81a5f5922bdacdcf2bcea8b0b9c99d740f8d1..69846a8038bdd85caafa648b53aabb896ae682e7 100644
--- a/spec/javascripts/notes/components/issue_note_spec.js
+++ b/spec/javascripts/notes/components/issue_note_spec.js
@@ -14,4 +14,4 @@ describe('issue_note', () => {
   it('should render issue body', () => {
 
   });
-});
\ No newline at end of file
+});
diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js
index 0777d377ac938369be18163dc8f8fe9b915c06f4..795d67a24a04367dd6c27459dc436b2d016d9659 100644
--- a/spec/javascripts/notes/mock_data.js
+++ b/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",