From 7efa4ab6491a796bd9ffa00af9afe2ab64575741 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 15 Dec 2022 17:22:09 +0400
Subject: [PATCH 1/3] Remove jQuery from Autosave class

---
 app/assets/javascripts/autosave.js            | 41 +++++++------------
 .../components/submit_dropdown.vue            |  3 +-
 app/assets/javascripts/deprecated_notes.js    |  2 +-
 .../design_notes/design_reply_form.vue        |  3 +-
 .../javascripts/issuable/issuable_form.js     | 21 +++++-----
 .../notes/components/comment_form.vue         |  2 +-
 .../javascripts/notes/mixins/autosave.js      |  3 +-
 .../show/components/issuable_edit_form.vue    |  5 +--
 .../javascripts/epic/components/epic_form.vue |  9 +---
 .../epic/components/epic_form_spec.js         | 11 +++--
 spec/frontend/autosave_spec.js                | 38 ++++-------------
 .../design_notes/design_reply_form_spec.js    | 14 +++----
 .../components/diff_line_note_form_spec.js    |  3 +-
 spec/frontend/issuable/issuable_form_spec.js  | 10 +++--
 14 files changed, 63 insertions(+), 102 deletions(-)

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 5ab66acaf8079f..e6d72f9a16d57d 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,56 +1,44 @@
-/* eslint-disable no-param-reassign, consistent-return */
-
 import AccessorUtilities from './lib/utils/accessor';
 
 export default class Autosave {
   constructor(field, key, fallbackKey, lockVersion) {
     this.field = field;
-    this.type = this.field.prop('type');
+    this.type = this.field.getAttribute('type');
     this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
-    if (key.join != null) {
-      key = key.join('/');
-    }
-    this.key = `autosave/${key}`;
+    this.key = Array.isArray(key) ? `autosave/${key.join('/')}` : `autosave/${key}`;
     this.fallbackKey = fallbackKey;
     this.lockVersionKey = `${this.key}/lockVersion`;
     this.lockVersion = lockVersion;
-    this.field.data('autosave', this);
     this.restore();
-    this.field.on('input', () => this.save());
+    this.field.addEventListener('input', this.save);
   }
 
   restore() {
     if (!this.isLocalStorageAvailable) return;
-    if (!this.field.length) return;
     const text = window.localStorage.getItem(this.key);
     const fallbackText = window.localStorage.getItem(this.fallbackKey);
 
     if (this.type === 'checkbox') {
-      this.field.prop('checked', text || fallbackText);
+      this.field.checked = text || fallbackText;
     } else if (text) {
-      this.field.val(text);
+      this.field.value = text;
     } else if (fallbackText) {
-      this.field.val(fallbackText);
+      this.field.value = fallbackText;
     }
 
-    this.field.trigger('input');
-    // v-model does not update with jQuery trigger
-    // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137
-    const event = new Event('change', { bubbles: true, cancelable: false });
-    const field = this.field.get(0);
-    if (field) {
-      field.dispatchEvent(event);
-    }
+    const inputEvent = new Event('input', { bubbles: true, cancelable: false });
+    const changeEvent = new Event('change', { bubbles: true, cancelable: false });
+    this.field.dispatchEvent(inputEvent);
+    this.field.dispatchEvent(changeEvent);
   }
 
   getSavedLockVersion() {
-    if (!this.isLocalStorageAvailable) return;
+    if (!this.isLocalStorageAvailable) return undefined;
     return window.localStorage.getItem(this.lockVersionKey);
   }
 
   save() {
-    if (!this.field.length) return;
-    const value = this.type === 'checkbox' ? this.field.is(':checked') : this.field.val();
+    const value = this.type === 'checkbox' ? this.field.checked : this.field.value;
 
     if (this.isLocalStorageAvailable && value) {
       if (this.fallbackKey) {
@@ -66,7 +54,7 @@ export default class Autosave {
   }
 
   reset() {
-    if (!this.isLocalStorageAvailable) return;
+    if (!this.isLocalStorageAvailable) return undefined;
 
     window.localStorage.removeItem(this.lockVersionKey);
     window.localStorage.removeItem(this.fallbackKey);
@@ -74,7 +62,6 @@ export default class Autosave {
   }
 
   dispose() {
-    // eslint-disable-next-line @gitlab/no-global-event-off
-    this.field.off('input');
+    this.field.removeEventListener('input', this.save);
   }
 }
diff --git a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
index acc3cbe10a0f6a..ed0481e7a48d2a 100644
--- a/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/submit_dropdown.vue
@@ -1,5 +1,4 @@
 <script>
-import $ from 'jquery';
 import {
   GlDropdown,
   GlButton,
@@ -52,7 +51,7 @@ export default {
   },
   mounted() {
     this.autosave = new Autosave(
-      $(this.$refs.textarea),
+      this.$refs.textarea,
       `submit_review_dropdown/${this.getNoteableData.id}`,
     );
     this.noteData.noteable_type = this.noteableType;
diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
index 5c6874593a483e..05801d7f598e42 100644
--- a/app/assets/javascripts/deprecated_notes.js
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -642,7 +642,7 @@ export default class Notes {
       // DiffNote
       form.find('#note_position').val(),
     ];
-    return new Autosave(textarea, key);
+    return new Autosave(textarea.get(0), key);
   }
 
   /**
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
index 5a6b220e53241b..830f16b50eedd6 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlButton } from '@gitlab/ui';
-import $ from 'jquery';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import Autosave from '~/autosave';
@@ -118,7 +117,7 @@ export default {
     },
     initAutosaveComment() {
       if (this.isLoggedIn) {
-        this.autosaveDiscussion = new Autosave($(this.$refs.textarea), [
+        this.autosaveDiscussion = new Autosave(this.$refs.textarea, [
           s__('DesignManagement|Discussion'),
           getIdFromGraphQLId(this.noteableId),
           this.shortDiscussionId,
diff --git a/app/assets/javascripts/issuable/issuable_form.js b/app/assets/javascripts/issuable/issuable_form.js
index e8ba99e0e9eb87..99a3f76ca764d5 100644
--- a/app/assets/javascripts/issuable/issuable_form.js
+++ b/app/assets/javascripts/issuable/issuable_form.js
@@ -47,13 +47,12 @@ function getFallbackKey() {
 }
 
 export default class IssuableForm {
-  static addAutosave(map, id, $input, searchTerm, fallbackKey) {
-    if ($input.length) {
-      map.set(
-        id,
-        new Autosave($input, [document.location.pathname, searchTerm, id], `${fallbackKey}=${id}`),
-      );
-    }
+  static addAutosave(map, id, element, searchTerm, fallbackKey) {
+    if (!element) return;
+    map.set(
+      id,
+      new Autosave(element, [document.location.pathname, searchTerm, id], `${fallbackKey}=${id}`),
+    );
   }
 
   constructor(form) {
@@ -122,28 +121,28 @@ export default class IssuableForm {
     IssuableForm.addAutosave(
       autosaveMap,
       'title',
-      this.form.find('input[name*="[title]"]'),
+      this.form.find('input[name*="[title]"]').get(0),
       this.searchTerm,
       this.fallbackKey,
     );
     IssuableForm.addAutosave(
       autosaveMap,
       'description',
-      this.form.find('textarea[name*="[description]"]'),
+      this.form.find('textarea[name*="[description]"]').get(0),
       this.searchTerm,
       this.fallbackKey,
     );
     IssuableForm.addAutosave(
       autosaveMap,
       'confidential',
-      this.form.find('input:checkbox[name*="[confidential]"]'),
+      this.form.find('input:checkbox[name*="[confidential]"]').get(0),
       this.searchTerm,
       this.fallbackKey,
     );
     IssuableForm.addAutosave(
       autosaveMap,
       'due_date',
-      this.form.find('input[name*="[due_date]"]'),
+      this.form.find('input[name*="[due_date]"]').get(0),
       this.searchTerm,
       this.fallbackKey,
     );
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 2ccb9a0b5140ba..c6e7117cf2ed26 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -312,7 +312,7 @@ export default {
       if (this.isLoggedIn) {
         const noteableType = capitalizeFirstCharacter(convertToCamelCase(this.noteableType));
 
-        this.autosave = new Autosave($(this.$refs.textarea), [
+        this.autosave = new Autosave(this.$refs.textarea, [
           this.$options.i18n.note,
           noteableType,
           this.getNoteableData.id,
diff --git a/app/assets/javascripts/notes/mixins/autosave.js b/app/assets/javascripts/notes/mixins/autosave.js
index 61cb4ab2a1011b..17272d5abef2d1 100644
--- a/app/assets/javascripts/notes/mixins/autosave.js
+++ b/app/assets/javascripts/notes/mixins/autosave.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { s__ } from '~/locale';
 import Autosave from '~/autosave';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
@@ -16,7 +15,7 @@ export default {
         keys = keys.concat(extraKeys);
       }
 
-      this.autosave = new Autosave($(this.$refs.noteForm.$refs.textarea), keys);
+      this.autosave = new Autosave(this.$refs.noteForm.$refs.textarea, keys);
     },
     resetAutoSave() {
       this.autosave.reset();
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
index 2fc1f935501dac..4247c3992504ad 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlForm, GlFormGroup, GlFormInput } from '@gitlab/ui';
-import $ from 'jquery';
 
 import Autosave from '~/autosave';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -81,13 +80,13 @@ export default {
 
       if (!titleInput || !descriptionInput) return;
 
-      this.autosaveTitle = new Autosave($(titleInput.$el), [
+      this.autosaveTitle = new Autosave(titleInput.$el, [
         document.location.pathname,
         document.location.search,
         'title',
       ]);
 
-      this.autosaveDescription = new Autosave($(descriptionInput.$el), [
+      this.autosaveDescription = new Autosave(descriptionInput.$el, [
         document.location.pathname,
         document.location.search,
         'description',
diff --git a/ee/app/assets/javascripts/epic/components/epic_form.vue b/ee/app/assets/javascripts/epic/components/epic_form.vue
index ff03bef5a16beb..fe9234b01ce152 100644
--- a/ee/app/assets/javascripts/epic/components/epic_form.vue
+++ b/ee/app/assets/javascripts/epic/components/epic_form.vue
@@ -7,7 +7,6 @@ import {
   GlFormGroup,
   GlFormInput,
 } from '@gitlab/ui';
-import $ from 'jquery';
 import { createAlert } from '~/flash';
 import Autosave from '~/autosave';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
@@ -81,12 +80,8 @@ export default {
        * We'd need to update Autosave to work with plain HTML elements instead of
        * jQuery instance, but until then, we'd have to rely on jQuery.
        */
-      this.autosaveTitle = new Autosave($(titleInput.$el), [pathname, search, 'title']);
-      this.autosaveDescription = new Autosave($(descriptionInput), [
-        pathname,
-        search,
-        'description',
-      ]);
+      this.autosaveTitle = new Autosave(titleInput.$el, [pathname, search, 'title']);
+      this.autosaveDescription = new Autosave(descriptionInput, [pathname, search, 'description']);
     },
     resetAutosave() {
       this.autosaveTitle.reset();
diff --git a/ee/spec/frontend/epic/components/epic_form_spec.js b/ee/spec/frontend/epic/components/epic_form_spec.js
index e254a5b17ea5dd..1cdcef6ffced65 100644
--- a/ee/spec/frontend/epic/components/epic_form_spec.js
+++ b/ee/spec/frontend/epic/components/epic_form_spec.js
@@ -12,6 +12,7 @@ import ColorSelectDropdown from '~/vue_shared/components/color_select_dropdown/c
 jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
 }));
+jest.mock('~/autosave');
 
 const TEST_GROUP_PATH = 'gitlab-org';
 const TEST_NEW_EPIC = { data: { createEpic: { epic: { webUrl: TEST_HOST } } } };
@@ -72,12 +73,10 @@ describe('ee/epic/components/epic_form.vue', () => {
     });
 
     it('initializes autosave support on title and description fields', () => {
-      // We discourage testing `wrapper.vm` properties but
-      // since `autosave` library instantiates on component
-      // there's no other way to test whether instantiation
-      // happened correctly or not.
-      expect(wrapper.vm.autosaveTitle).toBeInstanceOf(Autosave);
-      expect(wrapper.vm.autosaveDescription).toBeInstanceOf(Autosave);
+      expect(Autosave.mock.calls).toEqual([
+        [expect.any(Element), ['/', '', 'title']],
+        [expect.any(Element), ['/', '', 'description']],
+      ]);
     });
 
     it('can be canceled', () => {
diff --git a/spec/frontend/autosave_spec.js b/spec/frontend/autosave_spec.js
index 7a9262cd004be8..5f14c90ff05076 100644
--- a/spec/frontend/autosave_spec.js
+++ b/spec/frontend/autosave_spec.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import Autosave from '~/autosave';
 import AccessorUtilities from '~/lib/utils/accessor';
@@ -7,8 +6,9 @@ describe('Autosave', () => {
   useLocalStorageSpy();
 
   let autosave;
-  const field = $('<textarea></textarea>');
-  const checkbox = $('<input type="checkbox">');
+  const field = document.createElement('textarea');
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
   const key = 'key';
   const fallbackKey = 'fallbackKey';
   const lockVersionKey = 'lockVersionKey';
@@ -73,16 +73,8 @@ describe('Autosave', () => {
         expect(window.localStorage.getItem).toHaveBeenCalledWith(key);
       });
 
-      it('triggers jquery event', () => {
-        jest.spyOn(autosave.field, 'trigger').mockImplementation(() => {});
-
-        Autosave.prototype.restore.call(autosave);
-
-        expect(field.trigger).toHaveBeenCalled();
-      });
-
       it('triggers native event', () => {
-        const fieldElement = autosave.field.get(0);
+        const fieldElement = autosave.field;
         const eventHandler = jest.fn();
         fieldElement.addEventListener('change', eventHandler);
 
@@ -104,24 +96,12 @@ describe('Autosave', () => {
 
         it('should restore', () => {
           window.localStorage.setItem(key, true);
-          expect(checkbox.is(':checked')).toBe(false);
+          expect(checkbox.checked).toBe(false);
           Autosave.prototype.restore.call(autosave);
-          expect(checkbox.is(':checked')).toBe(true);
+          expect(checkbox.checked).toBe(true);
         });
       });
     });
-
-    describe('if field gets deleted from DOM', () => {
-      beforeEach(() => {
-        autosave.field = $('.not-a-real-element');
-      });
-
-      it('does not trigger event', () => {
-        jest.spyOn(field, 'trigger');
-
-        expect(field.trigger).not.toHaveBeenCalled();
-      });
-    });
   });
 
   describe('getSavedLockVersion', () => {
@@ -162,7 +142,7 @@ describe('Autosave', () => {
     beforeEach(() => {
       autosave = { reset: jest.fn() };
       autosave.field = field;
-      field.val('value');
+      field.value = 'value';
     });
 
     describe('if .isLocalStorageAvailable is `false`', () => {
@@ -200,14 +180,14 @@ describe('Autosave', () => {
       });
 
       it('should save true when checkbox on', () => {
-        checkbox.prop('checked', true);
+        checkbox.checked = true;
         Autosave.prototype.save.call(autosave);
         expect(window.localStorage.setItem).toHaveBeenCalledWith(key, true);
       });
 
       it('should call reset when checkbox off', () => {
         autosave.reset = jest.fn();
-        checkbox.prop('checked', false);
+        checkbox.checked = false;
         Autosave.prototype.save.call(autosave);
         expect(autosave.reset).toHaveBeenCalled();
         expect(window.localStorage.setItem).not.toHaveBeenCalled();
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index 5fd61b25edc3f2..866f0844346e7f 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -5,6 +5,7 @@ import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_m
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
+jest.mock('~/autosave');
 
 describe('Design reply form component', () => {
   let wrapper;
@@ -78,12 +79,11 @@ describe('Design reply form component', () => {
       createComponent({ discussionId });
       await nextTick();
 
-      // We discourage testing `wrapper.vm` properties but
-      // since `autosave` library instantiates on component
-      // there's no other way to test whether instantiation
-      // happened correctly or not.
-      expect(wrapper.vm.autosaveDiscussion).toBeInstanceOf(Autosave);
-      expect(wrapper.vm.autosaveDiscussion.key).toBe(`autosave/Discussion/6/${shortDiscussionId}`);
+      expect(Autosave).toHaveBeenCalledWith(expect.any(Element), [
+        'Discussion',
+        6,
+        shortDiscussionId,
+      ]);
     },
   );
 
@@ -178,7 +178,7 @@ describe('Design reply form component', () => {
       findTextarea().setValue('test2');
 
       await nextTick();
-      expect(wrapper.emitted('input')).toEqual([['test'], ['test2']]);
+      expect(wrapper.emitted('input')).toEqual([['test2']]);
     });
 
     it('emits cancelForm event on Escape key if text was not changed', () => {
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index 9493dc8855e7f8..bd0e3455872322 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -101,7 +101,8 @@ describe('DiffLineNoteForm', () => {
   });
 
   it('should init autosave', () => {
-    expect(Autosave).toHaveBeenCalledWith({}, [
+    // we're using shallow mount here so there's no element to pass to Autosave
+    expect(Autosave).toHaveBeenCalledWith(undefined, [
       'Note',
       'Issue',
       98,
diff --git a/spec/frontend/issuable/issuable_form_spec.js b/spec/frontend/issuable/issuable_form_spec.js
index 5e67ea42b87557..28ec0e22d8bfcf 100644
--- a/spec/frontend/issuable/issuable_form_spec.js
+++ b/spec/frontend/issuable/issuable_form_spec.js
@@ -35,8 +35,8 @@ describe('IssuableForm', () => {
     let $description;
 
     beforeEach(() => {
-      $title = $form.find('input[name*="[title]"]');
-      $description = $form.find('textarea[name*="[description]"]');
+      $title = $form.find('input[name*="[title]"]').get(0);
+      $description = $form.find('textarea[name*="[description]"]').get(0);
     });
 
     afterEach(() => {
@@ -103,7 +103,11 @@ describe('IssuableForm', () => {
         createIssuable($form);
 
         expect(Autosave).toHaveBeenCalledTimes(totalAutosaveFormFields);
-        expect(Autosave).toHaveBeenLastCalledWith($input, ['/', '', id], `autosave///=${id}`);
+        expect(Autosave).toHaveBeenLastCalledWith(
+          $input.get(0),
+          ['/', '', id],
+          `autosave///=${id}`,
+        );
       });
     });
 
-- 
GitLab


From 504024a2dd6873c2cfc62f0635a2850fef42f88b Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Thu, 15 Dec 2022 21:55:19 +0400
Subject: [PATCH 2/3] Fix tests

---
 app/assets/javascripts/autosave.js            |  26 +++--
 app/assets/javascripts/deprecated_notes.js    |  12 ++-
 .../show/components/issuable_edit_form.vue    |   2 +-
 .../javascripts/issuable/issuable_form.js     |   2 +-
 .../epic/components/epic_form_spec.js         |  10 +-
 .../frontend/issuable/issuable_form_spec.js   |   6 +-
 spec/frontend/autosave_spec.js                | 100 ++++++++----------
 .../components/submit_dropdown_spec.js        |   2 +
 .../design_notes/design_reply_form_spec.js    |  10 +-
 .../notes/components/comment_form_spec.js     |   9 +-
 .../notes/components/note_body_spec.js        |  12 +--
 .../components/issuable_edit_form_spec.js     |  24 +++--
 12 files changed, 116 insertions(+), 99 deletions(-)

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index e6d72f9a16d57d..4b4d643d6efb96 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,3 +1,4 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
 import AccessorUtilities from './lib/utils/accessor';
 
 export default class Autosave {
@@ -10,22 +11,32 @@ export default class Autosave {
     this.lockVersionKey = `${this.key}/lockVersion`;
     this.lockVersion = lockVersion;
     this.restore();
-    this.field.addEventListener('input', this.save);
+    this.saveAction = this.save.bind(this);
+    this.field.$autosave = this;
+    this.field.addEventListener('input', this.saveAction);
   }
 
   restore() {
     if (!this.isLocalStorageAvailable) return;
     const text = window.localStorage.getItem(this.key);
     const fallbackText = window.localStorage.getItem(this.fallbackKey);
+    const newValue = text || fallbackText;
 
+    if (newValue == null) return;
+
+    let originalValue = this.field.value;
     if (this.type === 'checkbox') {
-      this.field.checked = text || fallbackText;
-    } else if (text) {
-      this.field.value = text;
-    } else if (fallbackText) {
-      this.field.value = fallbackText;
+      originalValue = this.field.checked;
+      this.field.checked = parseBoolean(newValue);
+    } else {
+      this.field.value = newValue;
     }
 
+    if (originalValue === newValue) return;
+    this.triggerInputEvents();
+  }
+
+  triggerInputEvents() {
     const inputEvent = new Event('input', { bubbles: true, cancelable: false });
     const changeEvent = new Event('change', { bubbles: true, cancelable: false });
     this.field.dispatchEvent(inputEvent);
@@ -62,6 +73,7 @@ export default class Autosave {
   }
 
   dispose() {
-    this.field.removeEventListener('input', this.save);
+    delete this.field.$autosave;
+    this.field.removeEventListener('input', this.saveAction);
   }
 }
diff --git a/app/assets/javascripts/deprecated_notes.js b/app/assets/javascripts/deprecated_notes.js
index 05801d7f598e42..8019a10a042ac7 100644
--- a/app/assets/javascripts/deprecated_notes.js
+++ b/app/assets/javascripts/deprecated_notes.js
@@ -575,7 +575,9 @@ export default class Notes {
     // reset text and preview
     form.find('.js-md-write-button').click();
     form.find('.js-note-text').val('').trigger('input');
-    form.find('.js-note-text').data('autosave').reset();
+    form.find('.js-note-text').each(function reset() {
+      this.$autosave.reset();
+    });
 
     const event = document.createEvent('Event');
     event.initEvent('autosize:update', true, false);
@@ -642,7 +644,9 @@ export default class Notes {
       // DiffNote
       form.find('#note_position').val(),
     ];
-    return new Autosave(textarea.get(0), key);
+    const textareaEl = textarea.get(0);
+    // eslint-disable-next-line no-new
+    if (textareaEl) new Autosave(textareaEl, key);
   }
 
   /**
@@ -1086,7 +1090,9 @@ export default class Notes {
     const row = form.closest('tr');
     const glForm = form.data('glForm');
     glForm.destroy();
-    form.find('.js-note-text').data('autosave').reset();
+    form.find('.js-note-text').each(function reset() {
+      this.$autosave.reset();
+    });
     // show the reply button (will only work for replies)
     form.prev('.discussion-reply-holder').show();
     if (row.is('.js-temp-notes-holder')) {
diff --git a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
index 4247c3992504ad..387fc5e0d1c118 100644
--- a/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
+++ b/app/assets/javascripts/vue_shared/issuable/show/components/issuable_edit_form.vue
@@ -86,7 +86,7 @@ export default {
         'title',
       ]);
 
-      this.autosaveDescription = new Autosave(descriptionInput.$el, [
+      this.autosaveDescription = new Autosave(descriptionInput, [
         document.location.pathname,
         document.location.search,
         'description',
diff --git a/ee/app/assets/javascripts/issuable/issuable_form.js b/ee/app/assets/javascripts/issuable/issuable_form.js
index 99916d09b8da98..3409f6a585df58 100644
--- a/ee/app/assets/javascripts/issuable/issuable_form.js
+++ b/ee/app/assets/javascripts/issuable/issuable_form.js
@@ -14,7 +14,7 @@ export default class IssuableFormEE extends IssuableForm {
     IssuableForm.addAutosave(
       autoSaveMap,
       'weight',
-      this.form.find('input[name*="[weight]"]'),
+      this.form.find('input[name*="[weight]"]').get(0),
       this.searchTerm,
       this.fallbackKey,
     );
diff --git a/ee/spec/frontend/epic/components/epic_form_spec.js b/ee/spec/frontend/epic/components/epic_form_spec.js
index 1cdcef6ffced65..2b1d622dd7bbc1 100644
--- a/ee/spec/frontend/epic/components/epic_form_spec.js
+++ b/ee/spec/frontend/epic/components/epic_form_spec.js
@@ -183,13 +183,8 @@ describe('ee/epic/components/epic_form.vue', () => {
 
     it('resets automatically saved title and description when request succeeds', async () => {
       createWrapper();
+      jest.spyOn(Autosave.prototype, 'reset');
 
-      // We discourage testing/spying on `wrapper.vm` properties but
-      // since `autosave` library instantiates on component there's no
-      // other way to test whether autosave class method was called
-      // correctly or not.
-      const autosaveTitleResetSpy = jest.spyOn(wrapper.vm.autosaveTitle, 'reset');
-      const autosaveDescriptionResetSpy = jest.spyOn(wrapper.vm.autosaveDescription, 'reset');
       findTitle().vm.$emit('input', title);
       findDescription().setValue(description);
 
@@ -197,8 +192,7 @@ describe('ee/epic/components/epic_form.vue', () => {
 
       await nextTick();
 
-      expect(autosaveTitleResetSpy).toHaveBeenCalled();
-      expect(autosaveDescriptionResetSpy).toHaveBeenCalled();
+      expect(Autosave.prototype.reset).toHaveBeenCalledTimes(2);
     });
   });
 });
diff --git a/ee/spec/frontend/issuable/issuable_form_spec.js b/ee/spec/frontend/issuable/issuable_form_spec.js
index 1949609bb305b9..63e3f1f46cbcbe 100644
--- a/ee/spec/frontend/issuable/issuable_form_spec.js
+++ b/ee/spec/frontend/issuable/issuable_form_spec.js
@@ -42,7 +42,11 @@ describe('IssuableForm', () => {
       createIssuable($form);
 
       expect(Autosave).toHaveBeenCalledTimes(totalAutosaveFormFields);
-      expect(Autosave).toHaveBeenLastCalledWith($weight, ['/', '', 'weight'], 'autosave///=weight');
+      expect(Autosave).toHaveBeenLastCalledWith(
+        $weight.get(0),
+        ['/', '', 'weight'],
+        'autosave///=weight',
+      );
     });
   });
 
diff --git a/spec/frontend/autosave_spec.js b/spec/frontend/autosave_spec.js
index 5f14c90ff05076..8846022116824a 100644
--- a/spec/frontend/autosave_spec.js
+++ b/spec/frontend/autosave_spec.js
@@ -13,6 +13,12 @@ describe('Autosave', () => {
   const fallbackKey = 'fallbackKey';
   const lockVersionKey = 'lockVersionKey';
   const lockVersion = 1;
+  const getAutosaveKey = () => `autosave/${key}`;
+  const getAutosaveLockKey = () => `autosave/${key}/lockVersion`;
+
+  afterEach(() => {
+    autosave?.dispose?.();
+  });
 
   describe('class constructor', () => {
     beforeEach(() => {
@@ -43,18 +49,10 @@ describe('Autosave', () => {
   });
 
   describe('restore', () => {
-    beforeEach(() => {
-      autosave = {
-        field,
-        key,
-      };
-    });
-
     describe('if .isLocalStorageAvailable is `false`', () => {
       beforeEach(() => {
-        autosave.isLocalStorageAvailable = false;
-
-        Autosave.prototype.restore.call(autosave);
+        jest.spyOn(AccessorUtilities, 'canUseLocalStorage').mockReturnValue(false);
+        autosave = new Autosave(field, key);
       });
 
       it('should not call .getItem', () => {
@@ -63,77 +61,73 @@ describe('Autosave', () => {
     });
 
     describe('if .isLocalStorageAvailable is `true`', () => {
-      beforeEach(() => {
-        autosave.isLocalStorageAvailable = true;
-      });
-
       it('should call .getItem', () => {
-        Autosave.prototype.restore.call(autosave);
-
-        expect(window.localStorage.getItem).toHaveBeenCalledWith(key);
+        autosave = new Autosave(field, key);
+        expect(window.localStorage.getItem.mock.calls).toEqual([[getAutosaveKey()], []]);
       });
 
-      it('triggers native event', () => {
-        const fieldElement = autosave.field;
-        const eventHandler = jest.fn();
-        fieldElement.addEventListener('change', eventHandler);
+      describe('if saved value is present', () => {
+        const storedValue = 'bar';
 
-        Autosave.prototype.restore.call(autosave);
+        beforeEach(() => {
+          field.value = 'foo';
+          window.localStorage.setItem(getAutosaveKey(), storedValue);
+        });
 
-        expect(eventHandler).toHaveBeenCalledTimes(1);
-        fieldElement.removeEventListener('change', eventHandler);
-      });
+        it('restores the value', () => {
+          autosave = new Autosave(field, key);
+          expect(field.value).toEqual(storedValue);
+        });
 
-      describe('if field type is checkbox', () => {
-        beforeEach(() => {
-          autosave = {
-            field: checkbox,
-            key,
-            isLocalStorageAvailable: true,
-            type: 'checkbox',
-          };
+        it('triggers native event', () => {
+          const eventHandler = jest.fn();
+          field.addEventListener('change', eventHandler);
+          autosave = new Autosave(field, key);
+
+          expect(eventHandler).toHaveBeenCalledTimes(1);
+          field.removeEventListener('change', eventHandler);
         });
 
-        it('should restore', () => {
-          window.localStorage.setItem(key, true);
-          expect(checkbox.checked).toBe(false);
-          Autosave.prototype.restore.call(autosave);
-          expect(checkbox.checked).toBe(true);
+        describe('if field type is checkbox', () => {
+          beforeEach(() => {
+            checkbox.checked = false;
+            window.localStorage.setItem(getAutosaveKey(), true);
+            autosave = new Autosave(checkbox, key);
+          });
+
+          it('should restore', () => {
+            expect(checkbox.checked).toBe(true);
+          });
         });
       });
     });
   });
 
   describe('getSavedLockVersion', () => {
-    beforeEach(() => {
-      autosave = {
-        field,
-        key,
-        lockVersionKey,
-      };
-    });
-
     describe('if .isLocalStorageAvailable is `false`', () => {
       beforeEach(() => {
-        autosave.isLocalStorageAvailable = false;
-
-        Autosave.prototype.getSavedLockVersion.call(autosave);
+        jest.spyOn(AccessorUtilities, 'canUseLocalStorage').mockReturnValue(false);
+        autosave = new Autosave(field, key);
       });
 
       it('should not call .getItem', () => {
+        autosave.getSavedLockVersion();
         expect(window.localStorage.getItem).not.toHaveBeenCalled();
       });
     });
 
     describe('if .isLocalStorageAvailable is `true`', () => {
       beforeEach(() => {
-        autosave.isLocalStorageAvailable = true;
+        autosave = new Autosave(field, key);
       });
 
       it('should call .getItem', () => {
-        Autosave.prototype.getSavedLockVersion.call(autosave);
-
-        expect(window.localStorage.getItem).toHaveBeenCalledWith(lockVersionKey);
+        autosave.getSavedLockVersion();
+        expect(window.localStorage.getItem.mock.calls).toEqual([
+          [getAutosaveKey()],
+          [],
+          [getAutosaveLockKey()],
+        ]);
       });
     });
   });
diff --git a/spec/frontend/batch_comments/components/submit_dropdown_spec.js b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
index 462ef7e72804ea..003a6d86371b5c 100644
--- a/spec/frontend/batch_comments/components/submit_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/submit_dropdown_spec.js
@@ -3,6 +3,8 @@ import Vuex from 'vuex';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import SubmitDropdown from '~/batch_comments/components/submit_dropdown.vue';
 
+jest.mock('~/autosave');
+
 Vue.use(Vuex);
 
 let wrapper;
diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index 866f0844346e7f..f4d4f9cf8962a0 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -141,7 +141,7 @@ describe('Design reply form component', () => {
     });
 
     it('emits submitForm event on Comment button click', async () => {
-      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
       findSubmitButton().vm.$emit('click');
 
@@ -151,7 +151,7 @@ describe('Design reply form component', () => {
     });
 
     it('emits submitForm event on textarea ctrl+enter keydown', async () => {
-      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
       findTextarea().trigger('keydown.enter', {
         ctrlKey: true,
@@ -163,7 +163,7 @@ describe('Design reply form component', () => {
     });
 
     it('emits submitForm event on textarea meta+enter keydown', async () => {
-      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
       findTextarea().trigger('keydown.enter', {
         metaKey: true,
@@ -211,7 +211,7 @@ describe('Design reply form component', () => {
 
     it('emits cancelForm event when confirmed', async () => {
       confirmAction.mockResolvedValueOnce(true);
-      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
       wrapper.setProps({ value: 'test3' });
       await nextTick();
@@ -228,7 +228,7 @@ describe('Design reply form component', () => {
 
     it("doesn't emit cancelForm event when not confirmed", async () => {
       confirmAction.mockResolvedValueOnce(false);
-      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+      const autosaveResetSpy = jest.spyOn(Autosave.prototype, 'reset');
 
       wrapper.setProps({ value: 'test3' });
       await nextTick();
diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 701ff492702da6..e13985ef4691f3 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -5,6 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import Autosave from '~/autosave';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { createAlert } from '~/flash';
@@ -20,6 +21,7 @@ import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock }
 jest.mock('autosize');
 jest.mock('~/commons/nav/user_merge_requests');
 jest.mock('~/flash');
+jest.mock('~/autosave');
 
 Vue.use(Vuex);
 
@@ -336,8 +338,11 @@ describe('issue_comment_form component', () => {
         });
 
         it('inits autosave', () => {
-          expect(wrapper.vm.autosave).toBeDefined();
-          expect(wrapper.vm.autosave.key).toBe(`autosave/Note/Issue/${noteableDataMock.id}`);
+          expect(Autosave).toHaveBeenCalledWith(expect.any(Element), [
+            'Note',
+            'Issue',
+            noteableDataMock.id,
+          ]);
         });
       });
 
diff --git a/spec/frontend/notes/components/note_body_spec.js b/spec/frontend/notes/components/note_body_spec.js
index 3b5313744ffcd6..c71cf7666ab2c3 100644
--- a/spec/frontend/notes/components/note_body_spec.js
+++ b/spec/frontend/notes/components/note_body_spec.js
@@ -7,11 +7,14 @@ import NoteAwardsList from '~/notes/components/note_awards_list.vue';
 import NoteForm from '~/notes/components/note_form.vue';
 import createStore from '~/notes/stores';
 import notes from '~/notes/stores/modules/index';
+import Autosave from '~/autosave';
 
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
+jest.mock('~/autosave');
+
 const createComponent = ({
   props = {},
   noteableData = noteableDataMock,
@@ -84,13 +87,8 @@ describe('issue_note_body component', () => {
     });
 
     it('adds autosave', () => {
-      const autosaveKey = `autosave/Note/${note.noteable_type}/${note.id}`;
-
-      // While we discourage testing wrapper props
-      // here we aren't testing a component prop
-      // but instead an instance object property
-      // which is defined in `app/assets/javascripts/notes/mixins/autosave.js`
-      expect(wrapper.vm.autosave.key).toEqual(autosaveKey);
+      // passing undefined instead of an element because of shallowMount
+      expect(Autosave).toHaveBeenCalledWith(undefined, ['Note', note.noteable_type, note.id]);
     });
 
     describe('isInternalNote', () => {
diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
index e5594b6d37efb1..159be4cd1efe12 100644
--- a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
+++ b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js
@@ -5,9 +5,12 @@ import { nextTick } from 'vue';
 import IssuableEditForm from '~/vue_shared/issuable/show/components/issuable_edit_form.vue';
 import IssuableEventHub from '~/vue_shared/issuable/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
+import Autosave from '~/autosave';
 
 import { mockIssuableShowProps, mockIssuable } from '../mock_data';
 
+jest.mock('~/autosave');
+
 const issuableEditFormProps = {
   issuable: mockIssuable,
   ...mockIssuableShowProps,
@@ -36,10 +39,12 @@ describe('IssuableEditForm', () => {
 
   beforeEach(() => {
     wrapper = createComponent();
+    jest.spyOn(Autosave.prototype, 'reset');
   });
 
   afterEach(() => {
     wrapper.destroy();
+    jest.resetAllMocks();
   });
 
   describe('watch', () => {
@@ -100,21 +105,18 @@ describe('IssuableEditForm', () => {
 
   describe('methods', () => {
     describe('initAutosave', () => {
-      it('initializes `autosaveTitle` and `autosaveDescription` props', () => {
-        expect(wrapper.vm.autosaveTitle).toBeDefined();
-        expect(wrapper.vm.autosaveDescription).toBeDefined();
+      it('initializes autosave', () => {
+        expect(Autosave.mock.calls).toEqual([
+          [expect.any(Element), ['/', '', 'title']],
+          [expect.any(Element), ['/', '', 'description']],
+        ]);
       });
     });
 
     describe('resetAutosave', () => {
-      it('calls `reset` on `autosaveTitle` and `autosaveDescription` props', () => {
-        jest.spyOn(wrapper.vm.autosaveTitle, 'reset').mockImplementation(jest.fn);
-        jest.spyOn(wrapper.vm.autosaveDescription, 'reset').mockImplementation(jest.fn);
-
-        wrapper.vm.resetAutosave();
-
-        expect(wrapper.vm.autosaveTitle.reset).toHaveBeenCalled();
-        expect(wrapper.vm.autosaveDescription.reset).toHaveBeenCalled();
+      it('resets title and description on "update.issuable event"', () => {
+        IssuableEventHub.$emit('update.issuable');
+        expect(Autosave.prototype.reset.mock.calls).toEqual([[], []]);
       });
     });
   });
-- 
GitLab


From 9878db74c9312907a92b0a5707314b192b0f16c8 Mon Sep 17 00:00:00 2001
From: Stanislav Lashmanov <slashmanov@gitlab.com>
Date: Wed, 21 Dec 2022 14:13:49 +0400
Subject: [PATCH 3/3] Add explanation notes to Autosave

---
 app/assets/javascripts/autosave.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index 4b4d643d6efb96..2e187eae17c04d 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -12,6 +12,7 @@ export default class Autosave {
     this.lockVersion = lockVersion;
     this.restore();
     this.saveAction = this.save.bind(this);
+    // used by app/assets/javascripts/deprecated_notes.js
     this.field.$autosave = this;
     this.field.addEventListener('input', this.saveAction);
   }
@@ -37,6 +38,7 @@ export default class Autosave {
   }
 
   triggerInputEvents() {
+    // trigger events so @input, @change and v-model trigger in Vue components
     const inputEvent = new Event('input', { bubbles: true, cancelable: false });
     const changeEvent = new Event('change', { bubbles: true, cancelable: false });
     this.field.dispatchEvent(inputEvent);
-- 
GitLab