1 files changed, 60 insertions, 20 deletions

diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index da465552db3..2d7841771a1 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -45,6 +45,16 @@ describe('GfmAutoComplete', () => {
   let sorterValue;
   let filterValue;
 
+  const triggerDropdown = ($textarea, text) => {
+    $textarea
+      .trigger('focus')
+      .val($textarea.val() + text)
+      .caret('pos', -1);
+    $textarea.trigger('keyup');
+
+    jest.runOnlyPendingTimers();
+  };
+
   describe('DefaultOptions.filter', () => {
     let items;
 
@@ -537,7 +547,7 @@ describe('GfmAutoComplete', () => {
       expect(membersBeforeSave([{ ...mockGroup, avatar_url: null }])).toEqual([
         {
           username: 'my-group',
-          avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>',
+          avatarTag: '<div class="avatar rect-avatar avatar-inline s24 gl-mr-2">M</div>',
           title: 'My Group (2)',
           search: 'MyGroup my-group',
           icon: '',
@@ -550,7 +560,7 @@ describe('GfmAutoComplete', () => {
         {
           username: 'my-group',
           avatarTag:
-            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
+            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline s24 gl-mr-2"/>',
           title: 'My Group (2)',
           search: 'MyGroup my-group',
           icon: '',
@@ -563,7 +573,7 @@ describe('GfmAutoComplete', () => {
         {
           username: 'my-group',
           avatarTag:
-            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
+            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline s24 gl-mr-2"/>',
           title: 'My Group',
           search: 'MyGroup my-group',
           icon:
@@ -581,7 +591,7 @@ describe('GfmAutoComplete', () => {
         {
           username: 'my-user',
           avatarTag:
-            '<img src="./users.jpg" alt="my-user" class="avatar  avatar-inline center s26"/>',
+            '<img src="./users.jpg" alt="my-user" class="avatar  avatar-inline s24 gl-mr-2"/>',
           title: 'My User',
           search: 'MyUser my-user',
           icon: '',
@@ -786,13 +796,6 @@ describe('GfmAutoComplete', () => {
       resetHTMLFixture();
     });
 
-    const triggerDropdown = (text) => {
-      $textarea.trigger('focus').val(text).caret('pos', -1);
-      $textarea.trigger('keyup');
-
-      jest.runOnlyPendingTimers();
-    };
-
     const getDropdownItems = () => {
       const dropdown = document.getElementById('at-view-labels');
       const items = dropdown.getElementsByTagName('li');
@@ -800,7 +803,7 @@ describe('GfmAutoComplete', () => {
     };
 
     const expectLabels = ({ input, output }) => {
-      triggerDropdown(input);
+      triggerDropdown($textarea, input);
 
       expect(getDropdownItems()).toEqual(output.map((label) => label.title));
     };
@@ -860,6 +863,50 @@ describe('GfmAutoComplete', () => {
     });
   });
 
+  describe('submit_review', () => {
+    let autocomplete;
+    let $textarea;
+
+    const getDropdownItems = () => {
+      const dropdown = document.getElementById('at-view-submit_review');
+
+      return dropdown.getElementsByTagName('li');
+    };
+
+    beforeEach(() => {
+      jest
+        .spyOn(AjaxCache, 'retrieve')
+        .mockReturnValue(Promise.resolve([{ name: 'submit_review' }]));
+
+      window.gon = { features: { mrRequestChanges: true } };
+
+      setHTMLFixture('<textarea data-supports-quick-actions="true"></textarea>');
+      autocomplete = new GfmAutoComplete({
+        commands: `${TEST_HOST}/autocomplete_sources/commands`,
+      });
+      $textarea = $('textarea');
+      autocomplete.setup($textarea, {});
+    });
+
+    afterEach(() => {
+      autocomplete.destroy();
+      resetHTMLFixture();
+    });
+
+    it('renders submit review options', async () => {
+      triggerDropdown($textarea, '/');
+
+      await waitForPromises();
+
+      triggerDropdown($textarea, 'submit_review ');
+
+      expect(getDropdownItems()).toHaveLength(3);
+      expect(getDropdownItems()[0].textContent).toContain('Comment');
+      expect(getDropdownItems()[1].textContent).toContain('Approve');
+      expect(getDropdownItems()[2].textContent).toContain('Request changes');
+    });
+  });
+
   describe('emoji', () => {
     const mockItem = {
       'atwho-at': ':',
@@ -951,13 +998,6 @@ describe('GfmAutoComplete', () => {
       resetHTMLFixture();
     });
 
-    const triggerDropdown = (text) => {
-      $textarea.trigger('focus').val(text).caret('pos', -1);
-      $textarea.trigger('keyup');
-
-      jest.runOnlyPendingTimers();
-    };
-
     const getDropdownItems = () => {
       const dropdown = document.getElementById('at-view-contacts');
       const items = dropdown.getElementsByTagName('li');
@@ -965,7 +1005,7 @@ describe('GfmAutoComplete', () => {
     };
 
     const expectContacts = ({ input, output }) => {
-      triggerDropdown(input);
+      triggerDropdown($textarea, input);
 
       expect(getDropdownItems()).toEqual(
         output.map((contact) => `${contact.first_name} ${contact.last_name} ${contact.email}`),