Fix broken spec for issuable shortcuts and notes

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

@@ -11,6 +11,7 @@
   import '../../autosave';
 
   export default {
+    name: 'issueCommentForm',
     data() {
       return {
         note: '',
@@ -187,6 +188,13 @@
       initAutoSave() {
         this.autosave = new Autosave($(this.$refs.textarea), ['Note', 'Issue', this.getIssueData.id]);
       },
+      initTaskList() {
+        return new TaskList({
+          dataType: 'note',
+          fieldName: 'note',
+          selector: '.notes',
+        });
+      }
     },
     mounted() {
       // jQuery is needed here because it is a custom event being dispatched with jQuery.
@@ -195,6 +203,7 @@
       });
 
       this.initAutoSave();
+      this.initTaskList();
     },
   };
 </script>
@@ -227,6 +236,7 @@
                 :quick-actions-docs="quickActionsDocsUrl"
                 :add-spacing-classes="false">
                 <textarea
+                  id="note-body"
                   name="note[note]"
                   class="note-textarea js-vue-comment-form js-gfm-input js-autosize markdown-area"
                   data-supports-quick-actions="true"

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

 <script>
   /* global Flash */
-
   import { mapGetters, mapActions } from 'vuex';
   import store from '../stores/';
   import * as constants from '../constants';
@@ -13,7 +12,7 @@
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 
   export default {
-    name: 'IssueNotes',
+    name: 'issueNotesApp',
     props: {
       issueData: {
         type: Object,
@@ -114,6 +113,7 @@
     },
     mounted() {
       this.fetchNotes();
+
       const parentElement = this.$el.parentElement;
 
       if (parentElement &&

app/assets/javascripts/shortcuts_issuable.js

@@ -63,6 +63,7 @@ import './shortcuts_navigation';
       quote = _.map(selected.split("\n"), function(val) {
         return ("> " + val).trim() + "\n";
       });
+
       // If replyField already has some content, add a newline before our quote
       separator = replyField.val().trim() !== "" && "\n\n" || '';
       replyField.val(function(a, current) {

spec/javascripts/notes/components/issue_note_app_spec.js

@@ -261,4 +261,8 @@ describe('issue_note_app', () => {
     it('should show flash error message when new comment failed to be posted', () => {});
     it('should show flash error message when comment failed to be updated', () => {});
   });
+
+  describe('shortcuts issuable spec', () => {
+
+  });
 });

spec/javascripts/notes_spec.js

@@ -53,17 +53,18 @@ import '~/notes';
       it('modifies the Markdown field', function() {
         const changeEvent = document.createEvent('HTMLEvents');
         changeEvent.initEvent('change', true, true);
-        $('input[type=checkbox]').attr('checked', true)[0].dispatchEvent(changeEvent);
-        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        $('input[type=checkbox]').attr('checked', true)[1].dispatchEvent(changeEvent);
+
+        expect($('.js-task-list-field.original-task-list').val()).toBe('- [x] Task List Item');
       });
 
       it('submits an ajax request on tasklist:changed', function() {
         spyOn(jQuery, 'ajax').and.callFake(function(req) {
           expect(req.type).toBe('PATCH');
-          expect(req.url).toBe('http://test.host/frontend-fixtures/merge-requests-project/notes/3');
+          expect(req.url).toBe('http://test.host/frontend-fixtures/merge-requests-project/merge_requests/1.json');
           return expect(req.data.note).not.toBe(null);
         });
-        $('.js-task-list-field').trigger('tasklist:changed');
+        $('.js-task-list-field.original-task-list').trigger('tasklist:changed');
       });
     });
 

spec/javascripts/shortcuts_issuable_spec.js

@@ -9,7 +9,7 @@ describe('ShortcutsIssuable', () => {
   beforeEach(() => {
     loadFixtures(fixtureName);
     document.querySelector('.js-new-note-form').classList.add('js-main-target-form');
-    this.shortcut = new ShortcutsIssuable();
+    this.shortcut = new ShortcutsIssuable(true);
   });
   describe('replyWithSelectedText', () => {
     // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
@@ -21,15 +21,15 @@ describe('ShortcutsIssuable', () => {
       };
     };
     beforeEach(() => {
-      this.selector = 'form.js-main-target-form textarea#note-body';
+      this.selector = '.js-main-target-form #note_note';
     });
     describe('with empty selection', () => {
       it('does not return an error', () => {
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect($(this.selector).val()).toBe('');
       });
       it('triggers `focus`', () => {
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect(document.activeElement).toBe(document.querySelector(this.selector));
       });
     });
@@ -40,7 +40,7 @@ describe('ShortcutsIssuable', () => {
       it('leaves existing input intact', () => {
         $(this.selector).val('This text was already here.');
         expect($(this.selector).val()).toBe('This text was already here.');
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect($(this.selector).val()).toBe('This text was already here.\n\n> Selected text.\n\n');
       });
       it('triggers `input`', () => {
@@ -48,25 +48,25 @@ describe('ShortcutsIssuable', () => {
         $(this.selector).on('input', () => {
           triggered = true;
         });
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect(triggered).toBe(true);
       });
       it('triggers `focus`', () => {
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect(document.activeElement).toBe(document.querySelector(this.selector));
       });
     });
     describe('with a one-line selection', () => {
       it('quotes the selection', () => {
         stubSelection('<p>This text has been selected.</p>');
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect($(this.selector).val()).toBe('> This text has been selected.\n\n');
       });
     });
     describe('with a multi-line selection', () => {
       it('quotes the selected lines as a group', () => {
         stubSelection('<p>Selected line one.</p>\n\n<p>Selected line two.</p>\n\n<p>Selected line three.</p>');
-        this.shortcut.replyWithSelectedText();
+        this.shortcut.replyWithSelectedText(true);
         expect($(this.selector).val()).toBe('> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n');
       });
     });