1 files changed, 37 insertions, 26 deletions
diff --git a/spec/frontend/syntax_highlight_spec.js b/spec/frontend/syntax_highlight_spec.js
index 418679e7d18..8ad4f8d5c70 100644
--- a/spec/frontend/syntax_highlight_spec.js
+++ b/spec/frontend/syntax_highlight_spec.js
@@ -10,39 +10,50 @@ describe('Syntax Highlighter', () => {
     }
     return (window.gon.user_color_scheme = value);
   };
-  describe('on a js-syntax-highlight element', () => {
-    beforeEach(() => {
-      setFixtures('<div class="js-syntax-highlight"></div>');
-    });
-
-    it('applies syntax highlighting', () => {
-      stubUserColorScheme('monokai');
-      syntaxHighlight($('.js-syntax-highlight'));
 
-      expect($('.js-syntax-highlight')).toHaveClass('monokai');
+  // We have to bind `document.querySelectorAll` to `document` to not mess up the fn's context
+  describe.each`
+    desc                | fn
+    ${'jquery'}         | ${$}
+    ${'vanilla all'}    | ${document.querySelectorAll.bind(document)}
+    ${'vanilla single'} | ${document.querySelector.bind(document)}
+  `('highlight using $desc syntax', ({ fn }) => {
+    describe('on a js-syntax-highlight element', () => {
+      beforeEach(() => {
+        setFixtures('<div class="js-syntax-highlight"></div>');
+      });
+
+      it('applies syntax highlighting', () => {
+        stubUserColorScheme('monokai');
+        syntaxHighlight(fn('.js-syntax-highlight'));
+
+        expect(fn('.js-syntax-highlight')).toHaveClass('monokai');
+      });
     });
-  });
 
-  describe('on a parent element', () => {
-    beforeEach(() => {
-      setFixtures(
-        '<div class="parent">\n  <div class="js-syntax-highlight"></div>\n  <div class="foo"></div>\n  <div class="js-syntax-highlight"></div>\n</div>',
-      );
-    });
+    describe('on a parent element', () => {
+      beforeEach(() => {
+        setFixtures(
+          '<div class="parent">\n  <div class="js-syntax-highlight"></div>\n  <div class="foo"></div>\n  <div class="js-syntax-highlight"></div>\n</div>',
+        );
+      });
 
-    it('applies highlighting to all applicable children', () => {
-      stubUserColorScheme('monokai');
-      syntaxHighlight($('.parent'));
+      it('applies highlighting to all applicable children', () => {
+        stubUserColorScheme('monokai');
+        syntaxHighlight(fn('.parent'));
 
-      expect($('.parent, .foo')).not.toHaveClass('monokai');
-      expect($('.monokai').length).toBe(2);
-    });
+        expect(fn('.parent')).not.toHaveClass('monokai');
+        expect(fn('.foo')).not.toHaveClass('monokai');
+
+        expect(document.querySelectorAll('.monokai').length).toBe(2);
+      });
 
-    it('prevents an infinite loop when no matches exist', () => {
-      setFixtures('<div></div>');
-      const highlight = () => syntaxHighlight($('div'));
+      it('prevents an infinite loop when no matches exist', () => {
+        setFixtures('<div></div>');
+        const highlight = () => syntaxHighlight(fn('div'));
 
-      expect(highlight).not.toThrow();
+        expect(highlight).not.toThrow();
+      });
     });
   });
 });