From 7d17e029d08c592c107aedc7ee57699d2117ddf4 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 1 Mar 2021 21:44:49 -0700
Subject: [PATCH 1/9] Render errors from the API as GlAlert components

---
 .../notes/components/comment_form.vue         | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index b865826051eb0c..614e98d4d2038a 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -1,5 +1,6 @@
 <script>
 import {
+  GlAlert,
   GlButton,
   GlIcon,
   GlFormCheckbox,
@@ -43,6 +44,7 @@ export default {
     noteSignedOutWidget,
     discussionLockedWidget,
     markdownField,
+    GlAlert,
     GlButton,
     TimelineEntryItem,
     GlIcon,
@@ -66,6 +68,7 @@ export default {
     return {
       note: '',
       noteType: constants.COMMENT,
+      errors: [],
       noteIsConfidential: false,
       isSubmitting: false,
     };
@@ -205,10 +208,11 @@ export default {
       'toggleIssueLocalState',
     ]),
     handleSave(withIssueAction) {
+      this.errors = [];
+
       if (this.note.length) {
         const noteData = {
           endpoint: this.endpoint,
-          flashContainer: this.$el,
           data: {
             note: {
               noteable_type: this.noteableType,
@@ -239,10 +243,22 @@ export default {
               this.toggleIssueState();
             }
           })
-          .catch(() => {
+          .catch(({ response }) => {
+            const errorHandlers = {
+              422: (data) => {
+                if (data.errors?.commands_only?.length) {
+                  this.errors = data.errors.commands_only;
+                }
+              },
+              '*': () => {
+                this.errors = [this.$options.i18n.GENERIC_UNSUBMITTABLE_NETWORK];
+              },
+            };
+            const handler = errorHandlers[response.status] || errorHandlers['*'];
+
+            handler(response.data);
+
             this.discard(false);
-            const msg = this.$options.i18n.GENERIC_UNSUBMITTABLE_NETWORK;
-            Flash(msg, 'alert', this.$el);
             this.note = noteData.data.note.note; // Restore textarea content.
             this.removePlaceholderNotes();
           })
@@ -321,6 +337,9 @@ export default {
     hasEmailParticipants() {
       return this.getNoteableData.issue_email_participants?.length;
     },
+    dismissError(index) {
+      this.errors.splice(index, 1);
+    },
   },
 };
 </script>
@@ -331,7 +350,15 @@ export default {
     <discussion-locked-widget v-else-if="!canCreateNote" :issuable-type="issuableTypeTitle" />
     <ul v-else-if="canCreateNote" class="notes notes-form timeline">
       <timeline-entry-item class="note-form">
-        <div class="flash-container error-alert timeline-content"></div>
+        <gl-alert
+          v-for="(error, index) in errors"
+          :key="index"
+          variant="danger"
+          class="gl-mb-2"
+          @dismiss="() => dismissError(index)"
+        >
+          {{ error }}
+        </gl-alert>
         <div class="timeline-content timeline-content-form">
           <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
             <comment-field-layout
-- 
GitLab


From ab15f643d0be0e292346a7594f48a037d9875ced Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 2 Mar 2021 22:25:43 -0700
Subject: [PATCH 2/9] Switch to if-block in a function for the error handler

---
 .../notes/components/comment_form.vue         | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 614e98d4d2038a..eda5e691a41c98 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -15,6 +15,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import Autosave from '~/autosave';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { deprecatedCreateFlash as Flash } from '~/flash';
+import httpStatusCodes from '~/lib/utils/http_status';
 import {
   capitalizeFirstCharacter,
   convertToCamelCase,
@@ -35,6 +36,8 @@ import CommentFieldLayout from './comment_field_layout.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 
+const { UNPROCESSABLE_ENTITY } = httpStatusCodes;
+
 export default {
   name: 'CommentForm',
   i18n: COMMENT_FORM,
@@ -207,6 +210,13 @@ export default {
       'reopenIssuable',
       'toggleIssueLocalState',
     ]),
+    handleSaveError({ data, status }) {
+      if (status === UNPROCESSABLE_ENTITY && data.errors?.commands_only?.length) {
+        this.errors = data.errors.commands_only;
+      } else {
+        this.errors = [this.$options.i18n.GENERIC_UNSUBMITTABLE_NETWORK];
+      }
+    },
     handleSave(withIssueAction) {
       this.errors = [];
 
@@ -244,19 +254,7 @@ export default {
             }
           })
           .catch(({ response }) => {
-            const errorHandlers = {
-              422: (data) => {
-                if (data.errors?.commands_only?.length) {
-                  this.errors = data.errors.commands_only;
-                }
-              },
-              '*': () => {
-                this.errors = [this.$options.i18n.GENERIC_UNSUBMITTABLE_NETWORK];
-              },
-            };
-            const handler = errorHandlers[response.status] || errorHandlers['*'];
-
-            handler(response.data);
+            this.handleSaveError(response);
 
             this.discard(false);
             this.note = noteData.data.note.note; // Restore textarea content.
-- 
GitLab


From 796c4257c6d6ced2ccc54b51d7013185abb2fcfd Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 3 Mar 2021 00:46:06 -0700
Subject: [PATCH 3/9] Test the failure handler for invalid commands

---
 .../notes/components/comment_form_spec.js     | 84 +++++++++++++++++--
 1 file changed, 77 insertions(+), 7 deletions(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 672eccb026b8ae..1ac9a9efcdec59 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -10,6 +10,7 @@ import axios from '~/lib/utils/axios_utils';
 import CommentForm from '~/notes/components/comment_form.vue';
 import * as constants from '~/notes/constants';
 import eventHub from '~/notes/event_hub';
+import { COMMENT_FORM } from '~/notes/i18n';
 import createStore from '~/notes/stores';
 import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data';
 
@@ -44,6 +45,18 @@ describe('issue_comment_form component', () => {
     current_user: { can_update: false, can_create_note: true },
   });
 
+  const commandOnlyError = 'command only error';
+  const mockCommandsOnlyFailure = {
+    response: {
+      status: null,
+      data: {
+        errors: {
+          commands_only: [commandOnlyError],
+        },
+      },
+    },
+  };
+
   const mountComponent = ({
     initialData = {},
     noteableType = 'Issue',
@@ -86,23 +99,80 @@ describe('issue_comment_form component', () => {
   });
 
   describe('user is logged in', () => {
+    const expectSaveBasics = () => {
+      expect(wrapper.vm.isSubmitting).toBe(true);
+      expect(wrapper.vm.note).toBe('');
+      expect(wrapper.vm.saveNote).toHaveBeenCalled();
+      expect(wrapper.vm.stopPolling).toHaveBeenCalled();
+      expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
+    };
+
+    const spyOnMethods = (...methods) => {
+      methods.forEach((method) => {
+        jest.spyOn(wrapper.vm, method);
+      });
+    };
+
     describe('handleSave', () => {
       it('should request to save note when note is entered', () => {
         mountComponent({ mountFunction: mount, initialData: { note: 'hello world' } });
 
         jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
-        jest.spyOn(wrapper.vm, 'resizeTextarea');
-        jest.spyOn(wrapper.vm, 'stopPolling');
+        spyOnMethods('resizeTextarea', 'stopPolling');
 
         findCloseReopenButton().trigger('click');
 
-        expect(wrapper.vm.isSubmitting).toBe(true);
-        expect(wrapper.vm.note).toBe('');
-        expect(wrapper.vm.saveNote).toHaveBeenCalled();
-        expect(wrapper.vm.stopPolling).toHaveBeenCalled();
-        expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
+        expectSaveBasics();
       });
 
+      it.each`
+        httpStatus | errors
+        ${400}     | ${[COMMENT_FORM.GENERIC_UNSUBMITTABLE_NETWORK]}
+        ${401}     | ${[COMMENT_FORM.GENERIC_UNSUBMITTABLE_NETWORK]}
+        ${422}     | ${[commandOnlyError]}
+      `(
+        'should properly report $errors when a save request fails with status $httpStatus',
+        async ({ httpStatus, errors }) => {
+          mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
+
+          const caseRejection = {
+            ...mockCommandsOnlyFailure,
+            response: {
+              ...mockCommandsOnlyFailure.response,
+              status: httpStatus,
+            },
+          };
+
+          jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue(caseRejection);
+          spyOnMethods(
+            'resizeTextarea',
+            'stopPolling',
+            'handleSaveError',
+            'discard',
+            'removePlaceholderNotes',
+          );
+
+          findCommentButton().trigger('click');
+          // Wait for the click to bubble out and trigger the handler
+          await wrapper.vm.$nextTick();
+
+          expect(wrapper.vm.errors).toStrictEqual([]);
+
+          expectSaveBasics();
+
+          // Wait for the promise to resolve
+          await wrapper.vm.$nextTick();
+
+          // When the request fails
+          expect(wrapper.vm.handleSaveError).toHaveBeenCalled();
+          expect(wrapper.vm.discard).toHaveBeenCalled();
+          expect(wrapper.vm.removePlaceholderNotes).toHaveBeenCalled();
+
+          // Request failure side effects
+          expect(wrapper.vm.errors).toStrictEqual(errors);
+        },
+      );
+
       it('should toggle issue state when no note', () => {
         mountComponent({ mountFunction: mount });
 
-- 
GitLab


From cca6e94b9923365261cf0494d5e0ae035bf84c62 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 2 Mar 2021 12:12:57 -0700
Subject: [PATCH 4/9] Add changelog for updated UI that shows API errors
 directly

---
 .../tor-defect-network-error-message-show-api-errors.yml     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/tor-defect-network-error-message-show-api-errors.yml

diff --git a/changelogs/unreleased/tor-defect-network-error-message-show-api-errors.yml b/changelogs/unreleased/tor-defect-network-error-message-show-api-errors.yml
new file mode 100644
index 00000000000000..627dc8bf7414a4
--- /dev/null
+++ b/changelogs/unreleased/tor-defect-network-error-message-show-api-errors.yml
@@ -0,0 +1,5 @@
+---
+title: Show API errors when a command-only comment fails
+merge_request: 55457
+author:
+type: other
-- 
GitLab


From 18dac0b1bfe2079ade5d419ffe47c0e02f7dcf69 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 3 Mar 2021 16:39:38 -0700
Subject: [PATCH 5/9] Switch from testing the component guts to testing the
 component output

---
 .../notes/components/comment_form_spec.js     | 138 ++++++++++--------
 1 file changed, 77 insertions(+), 61 deletions(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 1ac9a9efcdec59..3db2f52ef9be79 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown } from '@gitlab/ui';
+import { GlDropdown, GlAlert } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Autosize from 'autosize';
 import MockAdapter from 'axios-mock-adapter';
@@ -29,6 +29,7 @@ describe('issue_comment_form component', () => {
   const findConfidentialNoteCheckbox = () => wrapper.findByTestId('confidential-note-checkbox');
   const findCommentGlDropdown = () => wrapper.find(GlDropdown);
   const findCommentButton = () => findCommentGlDropdown().find('button');
+  const findErrorAlerts = () => wrapper.findAllComponents(GlAlert);
 
   const createNotableDataMock = (data = {}) => {
     return {
@@ -45,18 +46,6 @@ describe('issue_comment_form component', () => {
     current_user: { can_update: false, can_create_note: true },
   });
 
-  const commandOnlyError = 'command only error';
-  const mockCommandsOnlyFailure = {
-    response: {
-      status: null,
-      data: {
-        errors: {
-          commands_only: [commandOnlyError],
-        },
-      },
-    },
-  };
-
   const mountComponent = ({
     initialData = {},
     noteableType = 'Issue',
@@ -99,80 +88,107 @@ describe('issue_comment_form component', () => {
   });
 
   describe('user is logged in', () => {
-    const expectSaveBasics = () => {
-      expect(wrapper.vm.isSubmitting).toBe(true);
-      expect(wrapper.vm.note).toBe('');
-      expect(wrapper.vm.saveNote).toHaveBeenCalled();
-      expect(wrapper.vm.stopPolling).toHaveBeenCalled();
-      expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
-    };
-
-    const spyOnMethods = (...methods) => {
-      methods.forEach((method) => {
-        jest.spyOn(wrapper.vm, method);
-      });
-    };
-
     describe('handleSave', () => {
       it('should request to save note when note is entered', () => {
         mountComponent({ mountFunction: mount, initialData: { note: 'hello world' } });
 
         jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
-        spyOnMethods('resizeTextarea', 'stopPolling');
+        jest.spyOn(wrapper.vm, 'resizeTextarea');
+        jest.spyOn(wrapper.vm, 'stopPolling');
 
         findCloseReopenButton().trigger('click');
 
-        expectSaveBasics();
+        expect(wrapper.vm.isSubmitting).toBe(true);
+        expect(wrapper.vm.note).toBe('');
+        expect(wrapper.vm.saveNote).toHaveBeenCalled();
+        expect(wrapper.vm.stopPolling).toHaveBeenCalled();
+        expect(wrapper.vm.resizeTextarea).toHaveBeenCalled();
+      });
+
+      it('does not report errors in the UI when the save succeeds', async () => {
+        mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
+
+        jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
+
+        findCommentButton().trigger('click');
+        // Wait for the click to bubble out and trigger the handler
+        await wrapper.vm.$nextTick();
+        // Wait for the network request promise to resolve
+        await wrapper.vm.$nextTick();
+
+        // findErrorAlerts().exists returns false if *any* wrapper is empty,
+        //   not necessarily that there aren't any at all.
+        // We want to check here that there are none found, so we use the
+        //   raw wrapper array length instead.
+        expect(findErrorAlerts().wrappers.length).toBe(0);
       });
 
       it.each`
         httpStatus | errors
         ${400}     | ${[COMMENT_FORM.GENERIC_UNSUBMITTABLE_NETWORK]}
-        ${401}     | ${[COMMENT_FORM.GENERIC_UNSUBMITTABLE_NETWORK]}
-        ${422}     | ${[commandOnlyError]}
+        ${422}     | ${['error 1']}
+        ${422}     | ${['error 1', 'error 2']}
+        ${422}     | ${['error 1', 'error 2', 'error 3']}
       `(
-        'should properly report $errors when a save request fails with status $httpStatus',
-        async ({ httpStatus, errors }) => {
+        'displays the correct errors ($errors) for a $httpStatus network response',
+        async ({ errors, httpStatus }) => {
           mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
 
-          const caseRejection = {
-            ...mockCommandsOnlyFailure,
-            response: {
-              ...mockCommandsOnlyFailure.response,
-              status: httpStatus,
-            },
-          };
-
-          jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue(caseRejection);
-          spyOnMethods(
-            'resizeTextarea',
-            'stopPolling',
-            'handleSaveError',
-            'discard',
-            'removePlaceholderNotes',
-          );
+          jest
+            .spyOn(wrapper.vm, 'saveNote')
+            .mockRejectedValue({
+              response: { status: httpStatus, data: { errors: { commands_only: errors } } },
+            });
 
           findCommentButton().trigger('click');
           // Wait for the click to bubble out and trigger the handler
           await wrapper.vm.$nextTick();
-
-          expect(wrapper.vm.errors).toStrictEqual([]);
-
-          expectSaveBasics();
-
-          // Wait for the promise to resolve
+          // Wait for the network request promise to resolve
           await wrapper.vm.$nextTick();
 
-          // When the request fails
-          expect(wrapper.vm.handleSaveError).toHaveBeenCalled();
-          expect(wrapper.vm.discard).toHaveBeenCalled();
-          expect(wrapper.vm.removePlaceholderNotes).toHaveBeenCalled();
+          const errorAlerts = findErrorAlerts();
+
+          expect(errorAlerts.wrappers.length).toBe(errors.length);
+          errors.forEach((msg, index) => {
+            const alert = errorAlerts.wrappers[index];
 
-          // Request failure side effects
-          expect(wrapper.vm.errors).toStrictEqual(errors);
+            expect(alert.text()).toBe(msg);
+          });
         },
       );
 
+      it('should remove the correct error from the list when it is dismissed', async () => {
+        mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
+
+        jest
+          .spyOn(wrapper.vm, 'saveNote')
+          .mockRejectedValue({
+            response: { status: 422, data: { errors: { commands_only: ['1', '2', '3'] } } },
+          });
+
+        findCommentButton().trigger('click');
+        // Wait for the click to bubble out and trigger the handler
+        await wrapper.vm.$nextTick();
+        // Wait for the network request promise to resolve
+        await wrapper.vm.$nextTick();
+
+        let errorAlerts = findErrorAlerts();
+
+        expect(errorAlerts.wrappers.length).toBe(3);
+
+        // dismiss the middle error
+        extendedWrapper(errorAlerts.wrappers[1]).findByTestId('close-icon').trigger('click');
+        // Wait for the dismissal to bubble out of the Alert component and be handled in this component
+        await wrapper.vm.$nextTick();
+        // Refresh the list of alerts
+        errorAlerts = findErrorAlerts();
+
+        expect(errorAlerts.wrappers.length).toBe(2);
+        // We want to know that the *correct* error was dismissed, not just that any one is gone
+        expect(errorAlerts.wrappers[0].text()).toBe('1');
+        expect(errorAlerts.wrappers[1].text()).toBe('3');
+      });
+
       it('should toggle issue state when no note', () => {
         mountComponent({ mountFunction: mount });
 
-- 
GitLab


From 3493d29c108959dde84e5061697bd3fdf873b5e0 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 4 Mar 2021 09:28:11 -0700
Subject: [PATCH 6/9] Add utility to trigger a click and optionally wait for
 followup Promises

---
 .../notes/components/comment_form_spec.js     | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 3db2f52ef9be79..a8c3a213564208 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -31,6 +31,20 @@ describe('issue_comment_form component', () => {
   const findCommentButton = () => findCommentGlDropdown().find('button');
   const findErrorAlerts = () => wrapper.findAllComponents(GlAlert);
 
+  async function clickCommentButton({ waitForComponent = true, waitForNetwork = true } = {}) {
+    findCommentButton().trigger('click');
+
+    if (waitForComponent || waitForNetwork) {
+      // Wait for the click to bubble out and trigger the handler
+      await wrapper.vm.$nextTick();
+
+      if (waitForNetwork) {
+        // Wait for the network request promise to resolve
+        await wrapper.vm.$nextTick();
+      }
+    }
+  }
+
   const createNotableDataMock = (data = {}) => {
     return {
       ...noteableDataMock,
@@ -110,11 +124,7 @@ describe('issue_comment_form component', () => {
 
         jest.spyOn(wrapper.vm, 'saveNote').mockResolvedValue();
 
-        findCommentButton().trigger('click');
-        // Wait for the click to bubble out and trigger the handler
-        await wrapper.vm.$nextTick();
-        // Wait for the network request promise to resolve
-        await wrapper.vm.$nextTick();
+        await clickCommentButton();
 
         // findErrorAlerts().exists returns false if *any* wrapper is empty,
         //   not necessarily that there aren't any at all.
@@ -134,17 +144,11 @@ describe('issue_comment_form component', () => {
         async ({ errors, httpStatus }) => {
           mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
 
-          jest
-            .spyOn(wrapper.vm, 'saveNote')
-            .mockRejectedValue({
-              response: { status: httpStatus, data: { errors: { commands_only: errors } } },
-            });
+          jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue({
+            response: { status: httpStatus, data: { errors: { commands_only: errors } } },
+          });
 
-          findCommentButton().trigger('click');
-          // Wait for the click to bubble out and trigger the handler
-          await wrapper.vm.$nextTick();
-          // Wait for the network request promise to resolve
-          await wrapper.vm.$nextTick();
+          await clickCommentButton();
 
           const errorAlerts = findErrorAlerts();
 
@@ -166,17 +170,13 @@ describe('issue_comment_form component', () => {
             response: { status: 422, data: { errors: { commands_only: ['1', '2', '3'] } } },
           });
 
-        findCommentButton().trigger('click');
-        // Wait for the click to bubble out and trigger the handler
-        await wrapper.vm.$nextTick();
-        // Wait for the network request promise to resolve
-        await wrapper.vm.$nextTick();
+        await clickCommentButton();
 
         let errorAlerts = findErrorAlerts();
 
         expect(errorAlerts.wrappers.length).toBe(3);
 
-        // dismiss the middle error
+        // dismiss the second error
         extendedWrapper(errorAlerts.wrappers[1]).findByTestId('close-icon').trigger('click');
         // Wait for the dismissal to bubble out of the Alert component and be handled in this component
         await wrapper.vm.$nextTick();
-- 
GitLab


From f46a7b988be4d3a47e903f315ff245db8196b541 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Thu, 4 Mar 2021 09:30:43 -0700
Subject: [PATCH 7/9] Set error list as a variable instead of inline

---
 .../notes/components/comment_form_spec.js      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index a8c3a213564208..d66927da296c93 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -162,19 +162,19 @@ describe('issue_comment_form component', () => {
       );
 
       it('should remove the correct error from the list when it is dismissed', async () => {
+        const commandErrors = ['1', '2', '3'];
+
         mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
 
-        jest
-          .spyOn(wrapper.vm, 'saveNote')
-          .mockRejectedValue({
-            response: { status: 422, data: { errors: { commands_only: ['1', '2', '3'] } } },
-          });
+        jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue({
+          response: { status: 422, data: { errors: { commands_only: [...commandErrors] } } },
+        });
 
         await clickCommentButton();
 
         let errorAlerts = findErrorAlerts();
 
-        expect(errorAlerts.wrappers.length).toBe(3);
+        expect(errorAlerts.wrappers.length).toBe(commandErrors.length);
 
         // dismiss the second error
         extendedWrapper(errorAlerts.wrappers[1]).findByTestId('close-icon').trigger('click');
@@ -183,10 +183,10 @@ describe('issue_comment_form component', () => {
         // Refresh the list of alerts
         errorAlerts = findErrorAlerts();
 
-        expect(errorAlerts.wrappers.length).toBe(2);
+        expect(errorAlerts.wrappers.length).toBe(commandErrors.length - 1);
         // We want to know that the *correct* error was dismissed, not just that any one is gone
-        expect(errorAlerts.wrappers[0].text()).toBe('1');
-        expect(errorAlerts.wrappers[1].text()).toBe('3');
+        expect(errorAlerts.wrappers[0].text()).toBe(commandErrors[0]);
+        expect(errorAlerts.wrappers[1].text()).toBe(commandErrors[2]);
       });
 
       it('should toggle issue state when no note', () => {
-- 
GitLab


From 80fed45e6710327cd731cc5627d24460b7df22b4 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Fri, 5 Mar 2021 16:02:12 -0700
Subject: [PATCH 8/9] Unwrap WrapperArray `.wrappers` and mock the Notes store
 at its source

---
 .../notes/components/comment_form_spec.js     | 64 +++++++++++++------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index d66927da296c93..029dd78808aa71 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -2,7 +2,8 @@ import { GlDropdown, GlAlert } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Autosize from 'autosize';
 import MockAdapter from 'axios-mock-adapter';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import { deprecatedCreateFlash as flash } from '~/flash';
@@ -11,7 +12,7 @@ import CommentForm from '~/notes/components/comment_form.vue';
 import * as constants from '~/notes/constants';
 import eventHub from '~/notes/event_hub';
 import { COMMENT_FORM } from '~/notes/i18n';
-import createStore from '~/notes/stores';
+import notesModule from '~/notes/stores/modules';
 import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data';
 
 jest.mock('autosize');
@@ -19,6 +20,8 @@ jest.mock('~/commons/nav/user_merge_requests');
 jest.mock('~/flash');
 jest.mock('~/gl_form');
 
+Vue.use(Vuex);
+
 describe('issue_comment_form component', () => {
   let store;
   let wrapper;
@@ -29,22 +32,34 @@ describe('issue_comment_form component', () => {
   const findConfidentialNoteCheckbox = () => wrapper.findByTestId('confidential-note-checkbox');
   const findCommentGlDropdown = () => wrapper.find(GlDropdown);
   const findCommentButton = () => findCommentGlDropdown().find('button');
-  const findErrorAlerts = () => wrapper.findAllComponents(GlAlert);
+  const findErrorAlerts = () => wrapper.findAllComponents(GlAlert).wrappers;
 
   async function clickCommentButton({ waitForComponent = true, waitForNetwork = true } = {}) {
     findCommentButton().trigger('click');
 
     if (waitForComponent || waitForNetwork) {
       // Wait for the click to bubble out and trigger the handler
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       if (waitForNetwork) {
         // Wait for the network request promise to resolve
-        await wrapper.vm.$nextTick();
+        await nextTick();
       }
     }
   }
 
+  function createStore({ actions = {} } = {}) {
+    const baseModule = notesModule();
+
+    return new Vuex.Store({
+      ...baseModule,
+      actions: {
+        ...baseModule.actions,
+        ...actions,
+      },
+    });
+  }
+
   const createNotableDataMock = (data = {}) => {
     return {
       ...noteableDataMock,
@@ -130,7 +145,7 @@ describe('issue_comment_form component', () => {
         //   not necessarily that there aren't any at all.
         // We want to check here that there are none found, so we use the
         //   raw wrapper array length instead.
-        expect(findErrorAlerts().wrappers.length).toBe(0);
+        expect(findErrorAlerts().length).toBe(0);
       });
 
       it.each`
@@ -142,19 +157,23 @@ describe('issue_comment_form component', () => {
       `(
         'displays the correct errors ($errors) for a $httpStatus network response',
         async ({ errors, httpStatus }) => {
-          mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
-
-          jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue({
-            response: { status: httpStatus, data: { errors: { commands_only: errors } } },
+          store = createStore({
+            actions: {
+              saveNote: jest.fn().mockRejectedValue({
+                response: { status: httpStatus, data: { errors: { commands_only: errors } } },
+              }),
+            },
           });
 
+          mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
+
           await clickCommentButton();
 
           const errorAlerts = findErrorAlerts();
 
-          expect(errorAlerts.wrappers.length).toBe(errors.length);
+          expect(errorAlerts.length).toBe(errors.length);
           errors.forEach((msg, index) => {
-            const alert = errorAlerts.wrappers[index];
+            const alert = errorAlerts[index];
 
             expect(alert.text()).toBe(msg);
           });
@@ -163,30 +182,33 @@ describe('issue_comment_form component', () => {
 
       it('should remove the correct error from the list when it is dismissed', async () => {
         const commandErrors = ['1', '2', '3'];
+        store = createStore({
+          actions: {
+            saveNote: jest.fn().mockRejectedValue({
+              response: { status: 422, data: { errors: { commands_only: [...commandErrors] } } },
+            }),
+          },
+        });
 
         mountComponent({ mountFunction: mount, initialData: { note: '/label ~sdfghj' } });
 
-        jest.spyOn(wrapper.vm, 'saveNote').mockRejectedValue({
-          response: { status: 422, data: { errors: { commands_only: [...commandErrors] } } },
-        });
-
         await clickCommentButton();
 
         let errorAlerts = findErrorAlerts();
 
-        expect(errorAlerts.wrappers.length).toBe(commandErrors.length);
+        expect(errorAlerts.length).toBe(commandErrors.length);
 
         // dismiss the second error
-        extendedWrapper(errorAlerts.wrappers[1]).findByTestId('close-icon').trigger('click');
+        extendedWrapper(errorAlerts[1]).findByTestId('close-icon').trigger('click');
         // Wait for the dismissal to bubble out of the Alert component and be handled in this component
         await wrapper.vm.$nextTick();
         // Refresh the list of alerts
         errorAlerts = findErrorAlerts();
 
-        expect(errorAlerts.wrappers.length).toBe(commandErrors.length - 1);
+        expect(errorAlerts.length).toBe(commandErrors.length - 1);
         // We want to know that the *correct* error was dismissed, not just that any one is gone
-        expect(errorAlerts.wrappers[0].text()).toBe(commandErrors[0]);
-        expect(errorAlerts.wrappers[1].text()).toBe(commandErrors[2]);
+        expect(errorAlerts[0].text()).toBe(commandErrors[0]);
+        expect(errorAlerts[1].text()).toBe(commandErrors[2]);
       });
 
       it('should toggle issue state when no note', () => {
-- 
GitLab


From cbc81038da05431644050338d0b1a3ac9e48f71d Mon Sep 17 00:00:00 2001
From: Simon Knox <simon@gitlab.com>
Date: Mon, 8 Mar 2021 05:33:30 +0000
Subject: [PATCH 9/9] Use nextTick instead of wrapper.vm one

---
 spec/frontend/notes/components/comment_form_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/frontend/notes/components/comment_form_spec.js b/spec/frontend/notes/components/comment_form_spec.js
index 029dd78808aa71..519675af02cb21 100644
--- a/spec/frontend/notes/components/comment_form_spec.js
+++ b/spec/frontend/notes/components/comment_form_spec.js
@@ -201,7 +201,7 @@ describe('issue_comment_form component', () => {
         // dismiss the second error
         extendedWrapper(errorAlerts[1]).findByTestId('close-icon').trigger('click');
         // Wait for the dismissal to bubble out of the Alert component and be handled in this component
-        await wrapper.vm.$nextTick();
+        await nextTick();
         // Refresh the list of alerts
         errorAlerts = findErrorAlerts();
 
-- 
GitLab