1 files changed, 86 insertions, 8 deletions
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);
+    });
+  });
 });