Merge branch 'winh-toggle-comment-draft' into 'master'

Display draft when toggling replies

Closes #48211 and #56364

See merge request gitlab-org/gitlab-ce!25563

3 files changed, 163 insertions, 9 deletions

diff --git a/spec/frontend/lib/utils/autosave_spec.js b/spec/frontend/lib/utils/autosave_spec.js
new file mode 100644
index 00000000000..12e97f6cdec
--- /dev/null
+++ b/spec/frontend/lib/utils/autosave_spec.js
@@ -0,0 +1,64 @@
+import { clearDraft, getDraft, updateDraft } from '~/lib/utils/autosave';
+
+describe('autosave utils', () => {
+  const autosaveKey = 'dummy-autosave-key';
+  const text = 'some dummy text';
+
+  describe('clearDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('removes the draft from localStorage', () => {
+      clearDraft(autosaveKey);
+
+      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(null);
+    });
+  });
+
+  describe('getDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('returns the draft from localStorage', () => {
+      const result = getDraft(autosaveKey);
+
+      expect(result).toBe(text);
+    });
+
+    it('returns null if no entry exists in localStorage', () => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+
+      const result = getDraft(autosaveKey);
+
+      expect(result).toBe(null);
+    });
+  });
+
+  describe('updateDraft', () => {
+    beforeEach(() => {
+      localStorage.setItem(`autosave/${autosaveKey}`, text);
+    });
+
+    afterEach(() => {
+      localStorage.removeItem(`autosave/${autosaveKey}`);
+    });
+
+    it('removes the draft from localStorage', () => {
+      const newText = 'new text';
+
+      updateDraft(autosaveKey, newText);
+
+      expect(localStorage.getItem(`autosave/${autosaveKey}`)).toBe(newText);
+    });
+  });
+});
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);
+    });
+  });
 });
diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js
index 2b93fb9fb45..3304c79cdb7 100644
--- a/spec/javascripts/notes/components/noteable_discussion_spec.js
+++ b/spec/javascripts/notes/components/noteable_discussion_spec.js
@@ -3,6 +3,7 @@ import createStore from '~/notes/stores';
 import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 import ResolveWithIssueButton from '~/notes/components/discussion_resolve_with_issue_button.vue';
+import NoteForm from '~/notes/components/note_form.vue';
 import '~/behaviors/markdown/render_gfm';
 import { noteableDataMock, discussionMock, notesDataMock } from '../mock_data';
 import mockDiffFile from '../../diffs/mock_data/diff_file';
@@ -72,7 +73,18 @@ describe('noteable_discussion component', () => {
         .then(() => wrapper.vm.$nextTick())
         .then(() => {
           expect(wrapper.vm.isReplying).toEqual(true);
-          expect(wrapper.vm.$refs.noteForm).not.toBeNull();
+
+          const noteForm = wrapper.find(NoteForm);
+
+          expect(noteForm.exists()).toBe(true);
+
+          const noteFormProps = noteForm.props();
+
+          expect(noteFormProps.discussion).toBe(discussionMock);
+          expect(noteFormProps.isEditing).toBe(false);
+          expect(noteFormProps.line).toBe(null);
+          expect(noteFormProps.saveButtonTitle).toBe('Comment');
+          expect(noteFormProps.autosaveKey).toBe(`Note/Issue/${discussionMock.id}/Reply`);
         })
         .then(done)
         .catch(done.fail);