Escape special characters in GFM auto complete highlighting

Fixes #60552

1 files changed, 32 insertions, 0 deletions

diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index fba7c41df94..3886853f3c1 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -209,6 +209,38 @@ describe('GfmAutoComplete', () => {
     });
   });
 
+  describe('DefaultOptions.highlighter', () => {
+    beforeEach(() => {
+      atwhoInstance = { setting: {} };
+    });
+
+    it('should return li if no query is given', () => {
+      const liTag = '<li></li>';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag);
+
+      expect(highlightedTag).toEqual(liTag);
+    });
+
+    it('should highlight search query in li element', () => {
+      const liTag = '<li><img src="" />string</li>';
+      const query = 's';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
+
+      expect(highlightedTag).toEqual('<li><img src="" /> <strong>s</strong>tring </li>');
+    });
+
+    it('should highlight search query with special char in li element', () => {
+      const liTag = '<li><img src="" />te.st</li>';
+      const query = '.';
+
+      const highlightedTag = gfmAutoCompleteCallbacks.highlighter.call(atwhoInstance, liTag, query);
+
+      expect(highlightedTag).toEqual('<li><img src="" /> te<strong>.</strong>st </li>');
+    });
+  });
+
   describe('isLoading', () => {
     it('should be true with loading data object item', () => {
       expect(GfmAutoComplete.isLoading({ name: 'loading' })).toBe(true);