1 files changed, 64 insertions, 12 deletions

diff --git a/spec/frontend/issues/show/components/form_spec.js b/spec/frontend/issues/show/components/form_spec.js
index 5c0fe991b22..aedb974cbd0 100644
--- a/spec/frontend/issues/show/components/form_spec.js
+++ b/spec/frontend/issues/show/components/form_spec.js
@@ -1,14 +1,16 @@
 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import Autosave from '~/autosave';
+import { getDraft, updateDraft, clearDraft, getLockVersion } from '~/lib/utils/autosave';
 import DescriptionTemplate from '~/issues/show/components/fields/description_template.vue';
+import IssuableTitleField from '~/issues/show/components/fields/title.vue';
+import DescriptionField from '~/issues/show/components/fields/description.vue';
 import IssueTypeField from '~/issues/show/components/fields/type.vue';
 import formComponent from '~/issues/show/components/form.vue';
 import LockedWarning from '~/issues/show/components/locked_warning.vue';
 import eventHub from '~/issues/show/event_hub';
 
-jest.mock('~/autosave');
+jest.mock('~/lib/utils/autosave');
 
 describe('Inline edit form component', () => {
   let wrapper;
@@ -38,9 +40,14 @@ describe('Inline edit form component', () => {
         ...defaultProps,
         ...props,
       },
+      stubs: {
+        DescriptionField,
+      },
     });
   };
 
+  const findTitleField = () => wrapper.findComponent(IssuableTitleField);
+  const findDescriptionField = () => wrapper.findComponent(DescriptionField);
   const findDescriptionTemplate = () => wrapper.findComponent(DescriptionTemplate);
   const findIssuableTypeField = () => wrapper.findComponent(IssueTypeField);
   const findLockedWarning = () => wrapper.findComponent(LockedWarning);
@@ -108,16 +115,34 @@ describe('Inline edit form component', () => {
   });
 
   describe('autosave', () => {
-    let spy;
-
     beforeEach(() => {
-      spy = jest.spyOn(Autosave.prototype, 'reset');
+      getDraft.mockImplementation((autosaveKey) => {
+        return autosaveKey[autosaveKey.length - 1];
+      });
     });
 
-    it('initialized Autosave on mount', () => {
+    it('initializes title and description fields with saved drafts', () => {
       createComponent();
 
-      expect(Autosave).toHaveBeenCalledTimes(2);
+      expect(findTitleField().props().value).toBe('title');
+      expect(findDescriptionField().props().value).toBe('description');
+    });
+
+    it('updates local storage drafts when title and description change', () => {
+      const updatedTitle = 'updated title';
+      const updatedDescription = 'updated description';
+
+      createComponent();
+
+      findTitleField().vm.$emit('input', updatedTitle);
+      findDescriptionField().vm.$emit('input', updatedDescription);
+
+      expect(updateDraft).toHaveBeenCalledWith(expect.any(Array), updatedTitle);
+      expect(updateDraft).toHaveBeenCalledWith(
+        expect.any(Array),
+        updatedDescription,
+        defaultProps.formState.lock_version,
+      );
     });
 
     it('calls reset on autosave when eventHub emits appropriate events', () => {
@@ -125,33 +150,60 @@ describe('Inline edit form component', () => {
 
       eventHub.$emit('close.form');
 
-      expect(spy).toHaveBeenCalledTimes(2);
+      expect(clearDraft).toHaveBeenCalledTimes(2);
 
       eventHub.$emit('delete.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(4);
+      expect(clearDraft).toHaveBeenCalledTimes(4);
 
       eventHub.$emit('update.issuable');
 
-      expect(spy).toHaveBeenCalledTimes(6);
+      expect(clearDraft).toHaveBeenCalledTimes(6);
     });
 
     describe('outdated description', () => {
+      const clientSideMockVersion = 'lock version from local storage';
+      const serverSideMockVersion = 'lock version from server';
+
+      const mockGetLockVersion = () => getLockVersion.mockResolvedValue(clientSideMockVersion);
+
       it('does not show warning if lock version from server is the same as the local lock version', () => {
         createComponent();
         expect(findAlert().exists()).toBe(false);
       });
 
       it('shows warning if lock version from server differs than the local lock version', async () => {
-        Autosave.prototype.getSavedLockVersion.mockResolvedValue('lock version from local storage');
+        mockGetLockVersion();
 
         createComponent({
-          formState: { ...defaultProps.formState, lock_version: 'lock version from server' },
+          formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
         });
 
         await nextTick();
         expect(findAlert().exists()).toBe(true);
       });
+
+      describe('when saved draft is discarded', () => {
+        beforeEach(async () => {
+          mockGetLockVersion();
+
+          createComponent({
+            formState: { ...defaultProps.formState, lock_version: serverSideMockVersion },
+          });
+
+          await nextTick();
+
+          findAlert().vm.$emit('secondaryAction');
+        });
+
+        it('hides the warning alert', () => {
+          expect(findAlert().exists()).toBe(false);
+        });
+
+        it('clears the description draft', () => {
+          expect(clearDraft).toHaveBeenCalledWith(expect.any(Array));
+        });
+      });
     });
   });
 });