1 files changed, 38 insertions, 3 deletions
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
index bb0945a1f3e..2c03b7aa7d3 100644
--- a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
@@ -5,10 +5,16 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SourceViewer from '~/vue_shared/components/source_viewer/source_viewer.vue';
 import { registerPlugins } from '~/vue_shared/components/source_viewer/plugins/index';
 import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
-import { ROUGE_TO_HLJS_LANGUAGE_MAP } from '~/vue_shared/components/source_viewer/constants';
+import {
+  EVENT_ACTION,
+  EVENT_LABEL_VIEWER,
+  EVENT_LABEL_FALLBACK,
+  ROUGE_TO_HLJS_LANGUAGE_MAP,
+} from '~/vue_shared/components/source_viewer/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import LineHighlighter from '~/blob/line_highlighter';
 import eventHub from '~/notes/event_hub';
+import Tracking from '~/tracking';
 
 jest.mock('~/blob/line_highlighter');
 jest.mock('highlight.js/lib/core');
@@ -34,7 +40,8 @@ describe('Source Viewer component', () => {
   const chunk2 = generateContent('// Some source code 2', 70);
   const content = chunk1 + chunk2;
   const path = 'some/path.js';
-  const DEFAULT_BLOB_DATA = { language, rawTextBlob: content, path };
+  const fileType = 'javascript';
+  const DEFAULT_BLOB_DATA = { language, rawTextBlob: content, path, fileType };
   const highlightedContent = `<span data-testid='test-highlighted' id='LC1'>${content}</span><span id='LC2'></span>`;
 
   const createComponent = async (blob = {}) => {
@@ -52,17 +59,38 @@ describe('Source Viewer component', () => {
     hljs.highlightAuto.mockImplementation(() => ({ value: highlightedContent }));
     jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
     jest.spyOn(eventHub, '$emit');
+    jest.spyOn(Tracking, 'event');
 
     return createComponent();
   });
 
   afterEach(() => wrapper.destroy());
 
+  describe('event tracking', () => {
+    it('fires a tracking event when the component is created', () => {
+      const eventData = { label: EVENT_LABEL_VIEWER, property: language };
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+    });
+
+    it('does not emit an error event when the language is supported', () => {
+      expect(wrapper.emitted('error')).toBeUndefined();
+    });
+
+    it('fires a tracking event and emits an error when the language is not supported', () => {
+      const unsupportedLanguage = 'apex';
+      const eventData = { label: EVENT_LABEL_FALLBACK, property: unsupportedLanguage };
+      createComponent({ language: unsupportedLanguage });
+
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+      expect(wrapper.emitted('error')).toHaveLength(1);
+    });
+  });
+
   describe('highlight.js', () => {
     beforeEach(() => createComponent({ language: mappedLanguage }));
 
     it('registers our plugins for Highlight.js', () => {
-      expect(registerPlugins).toHaveBeenCalledWith(hljs);
+      expect(registerPlugins).toHaveBeenCalledWith(hljs, fileType, content);
     });
 
     it('registers the language definition', async () => {
@@ -74,6 +102,13 @@ describe('Source Viewer component', () => {
       );
     });
 
+    it('registers json language definition if fileType is package_json', async () => {
+      await createComponent({ language: 'json', fileType: 'package_json' });
+      const languageDefinition = await import(`highlight.js/lib/languages/json`);
+
+      expect(hljs.registerLanguage).toHaveBeenCalledWith('json', languageDefinition.default);
+    });
+
     it('highlights the first chunk', () => {
       expect(hljs.highlight).toHaveBeenCalledWith(chunk1.trim(), { language: mappedLanguage });
     });