[ci skip] Init testing vue app for issue notes

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

@@ -175,6 +175,7 @@
         this.noteType = type;
       },
       editCurrentUserLastNote() {
+        console.log('editCurrentUserLastNote')
         if (this.note === '') {
           const lastNote = this.getCurrentUserLastNote(window.gon.current_user_id);
 
@@ -228,9 +229,8 @@
                 :quick-actions-docs="quickActionsDocsUrl"
                 :add-spacing-classes="false">
                 <textarea
-                  id="note-body"
                   name="note[note]"
-                  class="note-textarea js-gfm-input js-autosize markdown-area"
+                  class="note-textarea js-vue-comment-form js-gfm-input js-autosize markdown-area"
                   data-supports-quick-actions="true"
                   aria-label="Description"
                   v-model="note"

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

@@ -60,10 +60,9 @@
       },
       deleteHandler() {
         // eslint-disable-next-line no-alert
-        const isConfirmed = confirm('Are you sure you want to delete this list?');
-
-        if (isConfirmed) {
+        if (confirm('Are you sure you want to delete this list?')) {
           this.isDeleting = true;
+
           this.deleteNote(this.note)
             .then(() => {
               this.isDeleting = false;
@@ -149,8 +148,8 @@
             :can-delete="note.current_user.can_edit"
             :can-report-as-abuse="canReportAsAbuse"
             :report-abuse-path="note.report_abuse_path"
-            :edit-handler="editHandler"
-            :delete-handler="deleteHandler"
+            @editHandler="editHandler"
+            @deleteHandler="deleteHandler"
             />
         </div>
         <issue-note-body

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

@@ -37,14 +37,6 @@
         type: Boolean,
         required: true,
       },
-      editHandler: {
-        type: Function,
-        required: true,
-      },
-      deleteHandler: {
-        type: Function,
-        required: true,
-      },
     },
     directives: {
       tooltip,
@@ -76,6 +68,14 @@
         return this.getUserDataByProp('id');
       },
     },
+    methods: {
+      onEdit() {
+        this.$emit('editHandler');
+      },
+      onDelete() {
+        this.$emit('deleteHandler');
+      }
+    }
   };
 </script>
 
@@ -125,7 +125,7 @@
         <template v-if="canEdit">
           <li>
             <button
-              @click="editHandler"
+              @click="onEdit"
               type="button"
               class="btn btn-transparent js-note-edit">
               Edit comment
@@ -140,7 +140,7 @@
         </li>
         <li v-if="canEdit">
           <button
-            @click.prevent="deleteHandler"
+            @click.prevent="onDelete"
             class="btn btn-transparent js-note-delete js-note-delete"
             type="button">
             <span class="text-danger">

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

@@ -118,8 +118,7 @@
     </div>
     <div class="flash-container timeline-content"></div>
     <form
-      class="edit-note common-note-form"
-      @submit="handleUpdate">
+      class="edit-note common-note-form">
       <markdown-field
         :markdown-preview-url="markdownPreviewUrl"
         :markdown-docs="markdownDocsUrl"
@@ -128,7 +127,7 @@
         <textarea
           id="note-body"
           name="note[note]"
-          class="note-textarea js-gfm-input js-autosize markdown-area"
+          class="note-textarea js-gfm-input js-autosize markdown-area js-vue-issue-note-form"
           :data-supports-quick-actions="!isEditing"
           aria-label="Description"
           v-model="note"
@@ -143,8 +142,9 @@
       <div class="note-form-actions clearfix">
         <button
           type="submit"
+          @click="handleUpdate"
           :disabled="isDisabled"
-          class="btn btn-nr btn-save">
+          class="js-vue-issue-save btn btn-save">
           {{saveButtonTitle}}
         </button>
         <button

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

@@ -113,9 +113,11 @@
     mounted() {
       this.fetchNotes();
       this.initPolling();
+      const parentElement = this.$el.parentElement;
 
-      if (this.$el.parentElement) {
-        this.$el.parentElement.addEventListener('toggleAward', (event) => {
+      if (parentElement &&
+        parentElement.classList.contains('js-vue-notes-event')) {
+        parentElement.addEventListener('toggleAward', (event) => {
           const { awardName, noteId } = event.detail;
           this.actionToggleAward({ awardName, noteId });
         });

app/assets/javascripts/notes/stores/actions.js

@@ -87,7 +87,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
       const commandsChanges = res.commands_changes;
 
       if (hasQuickActions && Object.keys(errors).length) {
-        dispatch('poll');
+        dispatch('fetchData');
 
         $('.js-gfm-input').trigger('clear-commands-cache.atwho');
         Flash('Commands applied', 'notice', $(noteData.flashContainer));
@@ -186,6 +186,15 @@ export const poll = ({ commit, state, getters }) => {
   });
 };
 
+export const fetchData = ({ commit, state, getters }) => {
+  const requestData = { endpoint: state.notesData.notesPath, lastFetchedAt: state.lastFetchedAt };
+
+  service.poll(requestData)
+    .then(resp => resp.json)
+    .then(data => pollSuccessCallBack(data, commit, state, getters))
+    .catch(() => Flash('Something went wrong while fetching latest comments.'));
+};
+
 export const toggleAward = ({ commit, state, getters, dispatch }, { awardName, noteId }) => {
   commit(types.TOGGLE_AWARD, { awardName, note: getters.notesById[noteId] });
 };

spec/javascripts/notes/components/issue_note_app_spec.js

 import Vue from 'vue';
 import issueNotesApp from '~/notes/components/issue_notes_app.vue';
+import service from '~/notes/services/issue_notes_service';
+import { keyboardDownEvent } from '../../issue_show/helpers';
 import * as mockData from '../mock_data';
 
-fdescribe('issue_note_app', () => {
+describe('issue_note_app', () => {
   let mountComponent;
 
   beforeEach(() => {
@@ -52,7 +54,7 @@ fdescribe('issue_note_app', () => {
     });
   });
 
-  fdescribe('render', () => {
+  describe('render', () => {
     let vm;
 
     const responseInterceptor = (request, next) => {
@@ -73,8 +75,18 @@ fdescribe('issue_note_app', () => {
     afterEach(() => {
       Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor);
     });
-    it('should render list of notes', () => {
-      console.log(vm);
+
+    it('should render list of notes', (done) => {
+      const note = mockData.discussionResponse[0].notes[0];
+
+      setTimeout(() => {
+        expect(
+          vm.$el.querySelector('.main-notes-list .note-header-author-name').textContent.trim(),
+        ).toEqual(note.author.name);
+
+        expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(note.note_html);
+        done();
+      }, 0);
     });
 
     it('should render form', () => {
@@ -109,29 +121,44 @@ fdescribe('issue_note_app', () => {
 
   describe('update note', () => {
     describe('individual note', () => {
-      describe('shortup up key', () => {
-        it('shows correct editing form when user clicks up', () => {
+      let vm;
+
+      const responseInterceptor = (request, next) => {
+        next(request.respondWith(JSON.stringify(mockData.discussionResponse), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(responseInterceptor);
+
+        vm = mountComponent({
+          issueData: mockData.issueDataMock,
+          notesData: mockData.notesDataMock,
+          userData: mockData.userDataMock,
+        });
+
       });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor);
       });
 
-      describe('dropdown', () => {
       it('renders edit form', () => {
+        setTimeout(() => {
+          vm.$el.querySelector('.js-note-edit').click();
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined();
           });
+        }, 0);
       });
 
       it('updates the note and resets the edit form', () => {});
     });
 
     describe('dicussion note note', () => {
-      describe('shortup up key', () => {
-        it('shows correct editing form when user clicks up', () => {
-        });
-      });
-
-      describe('dropdown', () => {
       it('renders edit form', () => {
       });
-      });
 
       it('updates the note and resets the edit form', () => {});
     });