Merge branch 'fix-gl-emoji-undefined-value' into 'master'

Add guard for undefined value in getEmoji

See merge request gitlab-org/gitlab!45261

app/assets/javascripts/emoji/index.js

@@ -82,6 +82,12 @@ export function getAllEmoji() {
  * @returns {Object} The matching emoji.
  */
 export function getEmoji(query, fallback = false) {
+  // TODO https://gitlab.com/gitlab-org/gitlab/-/issues/268208
+  const fallbackEmoji = emojiMap.grey_question;
+  if (!query) {
+    return fallback ? fallbackEmoji : null;
+  }
+
   if (!emojiMap) {
     // eslint-disable-next-line @gitlab/require-i18n-strings
     throw new Error('The emoji map is uninitialized or initialization has not completed');
@@ -94,11 +100,7 @@ export function getEmoji(query, fallback = false) {
     return emojiMap[name];
   }
 
-  if (fallback) {
-    return emojiMap.grey_question;
-  }
-
-  return null;
+  return fallback ? fallbackEmoji : null;
 }
 
 const searchMatchers = {
@@ -178,6 +180,15 @@ export function searchEmoji(query, opts) {
     raw = false,
   } = opts || {};
 
+  const fallbackEmoji = emojiMap.grey_question;
+  if (!query) {
+    if (fallback) {
+      return raw ? [{ emoji: fallbackEmoji }] : [fallbackEmoji];
+    }
+
+    return [];
+  }
+
   // optimization for an exact match in name and alias
   if (match === 'exact' && new Set([...fields, 'name', 'alias']).size === 2) {
     const emoji = getEmoji(query, fallback);
@@ -193,16 +204,10 @@ export function searchEmoji(query, opts) {
 
   // Fallback to question mark for unknown emojis
   if (fallback && results.length === 0) {
-    if (raw) {
-      return [{ emoji: emojiMap.grey_question }];
-    }
-    return [emojiMap.grey_question];
+    return raw ? [{ emoji: fallbackEmoji }] : [fallbackEmoji];
   }
 
-  if (raw) {
-    return results;
-  }
-  return results.map(r => r.emoji);
+  return raw ? results : results.map(r => r.emoji);
 }
 
 let emojiCategoryMap;

spec/frontend/emoji/emoji_spec.js

 import { trimText } from 'helpers/text_helper';
 import { emojiFixtureMap, initEmojiMock, describeEmojiFields } from 'helpers/emoji';
-import { glEmojiTag, searchEmoji } from '~/emoji';
+import { glEmojiTag, searchEmoji, getEmoji } from '~/emoji';
 import isEmojiUnicodeSupported, {
   isFlagEmoji,
   isRainbowFlagEmoji,
@@ -352,6 +352,20 @@ describe('gl_emoji', () => {
     });
   });
 
+  describe('getEmoji', () => {
+    const { grey_question } = emojiFixtureMap;
+
+    describe('when query is undefined', () => {
+      it('should return null by default', () => {
+        expect(getEmoji()).toBe(null);
+      });
+
+      it('should return fallback emoji when fallback is true', () => {
+        expect(getEmoji(undefined, true).name).toEqual(grey_question.name);
+      });
+    });
+  });
+
   describe('searchEmoji', () => {
     const { atom, grey_question } = emojiFixtureMap;
     const search = (query, opts) => searchEmoji(query, opts).map(({ name }) => name);
@@ -382,6 +396,10 @@ describe('gl_emoji', () => {
       it('should not return a fallback value', () => {
         expect(subject('foo bar baz')).toHaveLength(0);
       });
+
+      it('should not return a fallback value when query is falsey', () => {
+        expect(subject()).toHaveLength(0);
+      });
     });
 
     describe('with fuzzy match', () => {
@@ -427,8 +445,12 @@ describe('gl_emoji', () => {
     describe('with fallback', () => {
       const subject = query => search(query, { fallback: true });
 
-      it('should return a fallback value', () =>
-        expect(subject('foo bar baz')).toContain(grey_question.name));
+      it.each`
+        query
+        ${'foo bar baz'} | ${undefined}
+      `('should return a fallback value when given $query', ({ query }) => {
+        expect(subject(query)).toContain(grey_question.name);
+      });
     });
 
     describe('with name and alias fields', () => {