Use autosave utilities in NoteForm component

2 files changed, 106 insertions, 9 deletions

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 92258a25438..57d6b181bd7 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -7,6 +7,7 @@ import markdownField from '../../vue_shared/components/markdown/field.vue';
 import issuableStateMixin from '../mixins/issuable_state';
 import resolvable from '../mixins/resolvable';
 import { __ } from '~/locale';
+import { getDraft, updateDraft } from '~/lib/utils/autosave';
 
 export default {
   name: 'NoteForm',
@@ -65,10 +66,21 @@ export default {
       required: false,
       default: '',
     },
+    autosaveKey: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
+    let updatedNoteBody = this.noteBody;
+
+    if (!updatedNoteBody && this.autosaveKey) {
+      updatedNoteBody = getDraft(this.autosaveKey) || '';
+    }
+
     return {
-      updatedNoteBody: this.noteBody,
+      updatedNoteBody,
       conflictWhileEditing: false,
       isSubmitting: false,
       isResolving: this.resolveDiscussion,
@@ -175,6 +187,12 @@ export default {
       // Sends information about confirm message and if the textarea has changed
       this.$emit('cancelForm', shouldConfirm, this.noteBody !== this.updatedNoteBody);
     },
+    onInput() {
+      if (this.autosaveKey) {
+        const { autosaveKey, updatedNoteBody: text } = this;
+        updateDraft(autosaveKey, text);
+      }
+    },
   },
 };
 </script>
@@ -218,6 +236,7 @@ export default {
           @keydown.ctrl.enter="handleKeySubmit()"
           @keydown.up="editMyLastNote()"
           @keydown.esc="cancelHandler(true)"
+          @input="onInput"
         ></textarea>
       </markdown-field>
       <div class="note-form-actions clearfix">
diff --git a/spec/javascripts/notes/components/note_form_spec.js b/spec/javascripts/notes/components/note_form_spec.js
index 7cc324cfe44..c48f8188105 100644
--- a/spec/javascripts/notes/components/note_form_spec.js
+++ b/spec/javascripts/notes/components/note_form_spec.js
@@ -5,11 +5,33 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { noteableDataMock, notesDataMock } from '../mock_data';
 
 describe('issue_note_form component', () => {
+  const dummyAutosaveKey = 'some-autosave-key';
+  const dummyDraft = 'dummy draft content';
+
   let store;
   let wrapper;
   let props;
 
+  const createComponentWrapper = () => {
+    const localVue = createLocalVue();
+    return shallowMount(NoteForm, {
+      store,
+      propsData: props,
+      // see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
+      localVue,
+      sync: false,
+    });
+  };
+
   beforeEach(() => {
+    spyOnDependency(NoteForm, 'getDraft').and.callFake(key => {
+      if (key === dummyAutosaveKey) {
+        return dummyDraft;
+      }
+
+      return null;
+    });
+
     store = createStore();
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
@@ -20,14 +42,7 @@ describe('issue_note_form component', () => {
       noteId: '545',
     };
 
-    const localVue = createLocalVue();
-    wrapper = shallowMount(NoteForm, {
-      store,
-      propsData: props,
-      // see https://gitlab.com/gitlab-org/gitlab-ce/issues/56317 for the following
-      localVue,
-      sync: false,
-    });
+    wrapper = createComponentWrapper();
   });
 
   afterEach(() => {
@@ -181,4 +196,67 @@ describe('issue_note_form component', () => {
       });
     });
   });
+
+  describe('with autosaveKey', () => {
+    beforeEach(() => {
+      wrapper.destroy();
+    });
+
+    describe('with draft', () => {
+      beforeEach(done => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: dummyAutosaveKey,
+        });
+        wrapper = createComponentWrapper();
+
+        wrapper.vm
+          .$nextTick()
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('displays the draft in textarea', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe(dummyDraft);
+      });
+    });
+
+    describe('without draft', () => {
+      beforeEach(done => {
+        Object.assign(props, {
+          noteBody: '',
+          autosaveKey: 'some key without draft',
+        });
+        wrapper = createComponentWrapper();
+
+        wrapper.vm
+          .$nextTick()
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('leaves the textarea empty', () => {
+        const textarea = wrapper.find('textarea');
+
+        expect(textarea.element.value).toBe('');
+      });
+    });
+
+    it('updates the draft if textarea content changes', () => {
+      const updateDraftSpy = spyOnDependency(NoteForm, 'updateDraft').and.stub();
+      Object.assign(props, {
+        noteBody: '',
+        autosaveKey: dummyAutosaveKey,
+      });
+      wrapper = createComponentWrapper();
+      const textarea = wrapper.find('textarea');
+      const dummyContent = 'some new content';
+
+      textarea.setValue(dummyContent);
+
+      expect(updateDraftSpy).toHaveBeenCalledWith(dummyAutosaveKey, dummyContent);
+    });
+  });
 });