1 files changed, 59 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer_spec.js
new file mode 100644
index 00000000000..758068379de
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer_spec.js
@@ -0,0 +1,59 @@
+import hljs from 'highlight.js/lib/core';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import SourceViewer from '~/vue_shared/components/source_viewer.vue';
+import LineNumbers from '~/vue_shared/components/line_numbers.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('highlight.js/lib/core');
+
+describe('Source Viewer component', () => {
+  let wrapper;
+  const content = `// Some source code`;
+  const highlightedContent = `<span data-testid='test-highlighted'>${content}</span>`;
+  const language = 'javascript';
+
+  hljs.highlight.mockImplementation(() => ({ value: highlightedContent }));
+  hljs.highlightAuto.mockImplementation(() => ({ value: highlightedContent }));
+
+  const createComponent = async (props = {}) => {
+    wrapper = shallowMountExtended(SourceViewer, { propsData: { content, language, ...props } });
+    await waitForPromises();
+  };
+
+  const findLineNumbers = () => wrapper.findComponent(LineNumbers);
+  const findHighlightedContent = () => wrapper.findByTestId('test-highlighted');
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  describe('highlight.js', () => {
+    it('registers the language definition', async () => {
+      const languageDefinition = await import(`highlight.js/lib/languages/${language}`);
+
+      expect(hljs.registerLanguage).toHaveBeenCalledWith(language, languageDefinition.default);
+    });
+
+    it('highlights the content', () => {
+      expect(hljs.highlight).toHaveBeenCalledWith(content, { language });
+    });
+
+    describe('auto-detect enabled', () => {
+      beforeEach(() => createComponent({ autoDetect: true }));
+
+      it('highlights the content with auto-detection', () => {
+        expect(hljs.highlightAuto).toHaveBeenCalledWith(content);
+      });
+    });
+  });
+
+  describe('rendering', () => {
+    it('renders Line Numbers', () => {
+      expect(findLineNumbers().props('lines')).toBe(1);
+    });
+
+    it('renders the highlighted content', () => {
+      expect(findHighlightedContent().exists()).toBe(true);
+    });
+  });
+});