1 files changed, 80 insertions, 0 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 6b1d65c5a6a..a486d13a856 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
@@ -1,6 +1,8 @@
 import hljs from 'highlight.js/lib/core';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 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';
@@ -14,7 +16,9 @@ import {
   LEGACY_FALLBACKS,
   CODEOWNERS_FILE_NAME,
   CODEOWNERS_LANGUAGE,
+  SVELTE_LANGUAGE,
 } from '~/vue_shared/components/source_viewer/constants';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import waitForPromises from 'helpers/wait_for_promises';
 import LineHighlighter from '~/blob/line_highlighter';
 import eventHub from '~/notes/event_hub';
@@ -25,6 +29,7 @@ jest.mock('highlight.js/lib/core');
 jest.mock('~/vue_shared/components/source_viewer/plugins/index');
 Vue.use(VueRouter);
 const router = new VueRouter();
+const mockAxios = new MockAdapter(axios);
 
 const generateContent = (content, totalLines = 1, delimiter = '\n') => {
   let generatedContent = '';
@@ -71,6 +76,42 @@ describe('Source Viewer component', () => {
     return createComponent();
   });
 
+  describe('Displaying LFS blob', () => {
+    const rawPath = '/org/project/-/raw/file.xml';
+    const externalStorageUrl = 'http://127.0.0.1:9000/lfs-objects/91/12/1341234';
+    const rawTextBlob = 'This is the external content';
+    const blob = {
+      storedExternally: true,
+      externalStorage: 'lfs',
+      simpleViewer: { fileType: 'text' },
+      rawPath,
+    };
+
+    afterEach(() => {
+      mockAxios.reset();
+    });
+
+    it('Uses externalStorageUrl to fetch content if present', async () => {
+      mockAxios.onGet(externalStorageUrl).replyOnce(HTTP_STATUS_OK, rawTextBlob);
+
+      await createComponent({ ...blob, externalStorageUrl });
+
+      expect(mockAxios.history.get).toHaveLength(1);
+      expect(mockAxios.history.get[0].url).toBe(externalStorageUrl);
+      expect(wrapper.vm.$data.content).toBe(rawTextBlob);
+    });
+
+    it('Falls back to rawPath to fetch content', async () => {
+      mockAxios.onGet(rawPath).replyOnce(HTTP_STATUS_OK, rawTextBlob);
+
+      await createComponent(blob);
+
+      expect(mockAxios.history.get).toHaveLength(1);
+      expect(mockAxios.history.get[0].url).toBe(rawPath);
+      expect(wrapper.vm.$data.content).toBe(rawTextBlob);
+    });
+  });
+
   describe('event tracking', () => {
     it('fires a tracking event when the component is created', () => {
       const eventData = { label: EVENT_LABEL_VIEWER, property: language };
@@ -120,6 +161,33 @@ describe('Source Viewer component', () => {
       );
     });
 
+    describe('sub-languages', () => {
+      const languageDefinition = {
+        subLanguage: 'xml',
+        contains: [{ subLanguage: 'javascript' }, { subLanguage: 'typescript' }],
+      };
+
+      beforeEach(async () => {
+        jest.spyOn(hljs, 'getLanguage').mockReturnValue(languageDefinition);
+        createComponent();
+        await waitForPromises();
+      });
+
+      it('registers the primary sub-language', () => {
+        expect(hljs.registerLanguage).toHaveBeenCalledWith(
+          languageDefinition.subLanguage,
+          expect.any(Function),
+        );
+      });
+
+      it.each(languageDefinition.contains)(
+        'registers the rest of the sub-languages',
+        ({ subLanguage }) => {
+          expect(hljs.registerLanguage).toHaveBeenCalledWith(subLanguage, expect.any(Function));
+        },
+      );
+    });
+
     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`);
@@ -146,6 +214,18 @@ describe('Source Viewer component', () => {
       );
     });
 
+    it('registers svelte language definition if file name ends with .svelte', async () => {
+      await createComponent({ name: `component.${SVELTE_LANGUAGE}` });
+      const languageDefinition = await import(
+        '~/vue_shared/components/source_viewer/languages/svelte'
+      );
+
+      expect(hljs.registerLanguage).toHaveBeenCalledWith(
+        SVELTE_LANGUAGE,
+        languageDefinition.default,
+      );
+    });
+
     it('highlights the first chunk', () => {
       expect(hljs.highlight).toHaveBeenCalledWith(chunk1.trim(), { language: mappedLanguage });
       expect(findChunks().at(0).props('isFirstChunk')).toBe(true);