test(gfm-auto): add test coverage for membersBeforeSave function

app/assets/javascripts/gfm_auto_complete.js

@@ -3,11 +3,44 @@ import 'at.js';
 import _ from 'underscore';
 import glRegexp from './lib/utils/regexp';
 import AjaxCache from './lib/utils/ajax_cache';
+import { spriteIcon } from './lib/utils/common_utils';
 
 function sanitize(str) {
   return str.replace(/<(?:.|\n)*?>/gm, '');
 }
 
+export function membersBeforeSave(members) {
+  return _.map(members, member => {
+    const GROUP_TYPE = 'Group';
+
+    let title = '';
+    if (member.username == null) {
+      return member;
+    }
+    title = member.name;
+    if (member.count && !member.mentionsDisabled) {
+      title += ` (${member.count})`;
+    }
+
+    const autoCompleteAvatar = member.avatar_url || member.username.charAt(0).toUpperCase();
+
+    const rectAvatarClass = member.type === GROUP_TYPE ? 'rect-avatar' : '';
+    const imgAvatar = `<img src="${member.avatar_url}" alt="${member.username}" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
+    const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
+    const avatarIcon = member.mentionsDisabled
+      ? spriteIcon('notifications-off', 's16 vertical-align-middle prepend-left-5')
+      : '';
+
+    return {
+      username: member.username,
+      avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
+      title: sanitize(title),
+      search: sanitize(`${member.username} ${member.name}`),
+      icon: avatarIcon,
+    };
+  });
+}
+
 export const defaultAutocompleteConfig = {
   emojis: true,
   members: true,
@@ -186,35 +219,7 @@ class GfmAutoComplete {
       data: GfmAutoComplete.defaultLoadingData,
       callbacks: {
         ...this.getDefaultCallbacks(),
-        beforeSave(members) {
-          return $.map(members, m => {
-            let title = '';
-            if (m.username == null) {
-              return m;
-            }
-            title = m.name;
-            if (m.count && !m.mentionsDisabled) {
-              title += ` (${m.count})`;
-            }
-
-            const GROUP_TYPE = 'Group';
-
-            const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
-
-            const rectAvatarClass = m.type === GROUP_TYPE ? 'rect-avatar' : '';
-            const imgAvatar = `<img src="${m.avatar_url}" alt="${m.username}" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
-            const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
-            const avatarIcon = m.mentionsDisabled ? '<i class="fa fa-bell-slash"></i>' : '';
-
-            return {
-              username: m.username,
-              avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
-              title: sanitize(title),
-              search: sanitize(`${m.username} ${m.name}`),
-              icon: avatarIcon,
-            };
-          });
-        },
+        beforeSave: membersBeforeSave,
       },
     });
   }

db/schema.rb

@@ -349,6 +349,7 @@ ActiveRecord::Schema.define(version: 2019_11_25_140458) do
     t.boolean "sourcegraph_enabled", default: false, null: false
     t.string "sourcegraph_url", limit: 255
     t.boolean "sourcegraph_public_only", default: true, null: false
+    t.bigint "snippet_size_limit", default: 52428800, null: false
     t.text "encrypted_akismet_api_key"
     t.string "encrypted_akismet_api_key_iv", limit: 255
     t.text "encrypted_elasticsearch_aws_secret_access_key"
@@ -361,7 +362,6 @@ ActiveRecord::Schema.define(version: 2019_11_25_140458) do
     t.string "encrypted_slack_app_secret_iv", limit: 255
     t.text "encrypted_slack_app_verification_token"
     t.string "encrypted_slack_app_verification_token_iv", limit: 255
-    t.bigint "snippet_size_limit", default: 52428800, null: false
     t.index ["custom_project_templates_group_id"], name: "index_application_settings_on_custom_project_templates_group_id"
     t.index ["file_template_project_id"], name: "index_application_settings_on_file_template_project_id"
     t.index ["instance_administration_project_id"], name: "index_applicationsettings_on_instance_administration_project_id"

spec/frontend/gfm_auto_complete_spec.js

 /* eslint no-param-reassign: "off" */
 
 import $ from 'jquery';
+import { membersBeforeSave } from '~/gfm_auto_complete';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 
 import 'jquery.caret';
@@ -262,6 +263,79 @@ describe('GfmAutoComplete', () => {
     });
   });
 
+  describe('membersBeforeSave', () => {
+    const mockGroup = {
+      username: 'my-group',
+      name: 'My Group',
+      count: 2,
+      avatar_url: './group.jpg',
+      type: 'Group',
+      mentionsDisabled: false,
+    };
+
+    it('should return the original object when username is null', () => {
+      expect(membersBeforeSave([{ ...mockGroup, username: null }])).toEqual([
+        { ...mockGroup, username: null },
+      ]);
+    });
+
+    it('should set the text avatar if avatar_url is null', () => {
+      expect(membersBeforeSave([{ ...mockGroup, avatar_url: null }])).toEqual([
+        {
+          username: 'my-group',
+          avatarTag: '<div class="avatar rect-avatar center avatar-inline s26">M</div>',
+          title: 'My Group (2)',
+          search: 'my-group My Group',
+          icon: '',
+        },
+      ]);
+    });
+
+    it('should set the image avatar if avatar_url is given', () => {
+      expect(membersBeforeSave([mockGroup])).toEqual([
+        {
+          username: 'my-group',
+          avatarTag:
+            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
+          title: 'My Group (2)',
+          search: 'my-group My Group',
+          icon: '',
+        },
+      ]);
+    });
+
+    it('should set mentions disabled icon if mentionsDisabled is set', () => {
+      expect(membersBeforeSave([{ ...mockGroup, mentionsDisabled: true }])).toEqual([
+        {
+          username: 'my-group',
+          avatarTag:
+            '<img src="./group.jpg" alt="my-group" class="avatar rect-avatar avatar-inline center s26"/>',
+          title: 'My Group',
+          search: 'my-group My Group',
+          icon:
+            '<svg class="s16 vertical-align-middle prepend-left-5"><use xlink:href="undefined#notifications-off" /></svg>',
+        },
+      ]);
+    });
+
+    it('should set the right image classes for User type members', () => {
+      expect(
+        membersBeforeSave([
+          { username: 'my-user', name: 'My User', avatar_url: './users.jpg', type: 'User' },
+        ]),
+      ).toEqual([
+        {
+          username: 'my-user',
+          avatarTag:
+            '<img src="./users.jpg" alt="my-user" class="avatar  avatar-inline center s26"/>',
+          title: 'My User',
+          search: 'my-user My User',
+          icon: '',
+        },
+      ]);
+    });
+  });
+
   describe('Issues.insertTemplateFunction', () => {
     it('should return default template', () => {
       expect(GfmAutoComplete.Issues.insertTemplateFunction({ id: 5, title: 'Some Issue' })).toBe(