1 files changed, 85 insertions, 0 deletions
diff --git a/spec/frontend/editor/utils_spec.js b/spec/frontend/editor/utils_spec.js
new file mode 100644
index 00000000000..97d3e9e081d
--- /dev/null
+++ b/spec/frontend/editor/utils_spec.js
@@ -0,0 +1,85 @@
+import { editor as monacoEditor } from 'monaco-editor';
+import * as utils from '~/editor/utils';
+import { DEFAULT_THEME } from '~/ide/lib/themes';
+
+describe('Source Editor utils', () => {
+  let el;
+
+  const stubUserColorScheme = (value) => {
+    if (window.gon == null) {
+      window.gon = {};
+    }
+    window.gon.user_color_scheme = value;
+  };
+
+  describe('clearDomElement', () => {
+    beforeEach(() => {
+      setFixtures('<div id="foo"><div id="bar">Foo</div></div>');
+      el = document.getElementById('foo');
+    });
+
+    it('removes all child nodes from an element', () => {
+      expect(el.children.length).toBe(1);
+      utils.clearDomElement(el);
+      expect(el.children.length).toBe(0);
+    });
+  });
+
+  describe('setupEditorTheme', () => {
+    beforeEach(() => {
+      jest.spyOn(monacoEditor, 'defineTheme').mockImplementation();
+      jest.spyOn(monacoEditor, 'setTheme').mockImplementation();
+    });
+
+    it.each`
+      themeName            | expectedThemeName
+      ${'solarized-light'} | ${'solarized-light'}
+      ${DEFAULT_THEME}     | ${DEFAULT_THEME}
+      ${'non-existent'}    | ${DEFAULT_THEME}
+    `(
+      'sets the $expectedThemeName theme when $themeName is set in the user preference',
+      ({ themeName, expectedThemeName }) => {
+        stubUserColorScheme(themeName);
+        utils.setupEditorTheme();
+
+        expect(monacoEditor.setTheme).toHaveBeenCalledWith(expectedThemeName);
+      },
+    );
+  });
+
+  describe('getBlobLanguage', () => {
+    it.each`
+      path           | expectedLanguage
+      ${'foo.js'}    | ${'javascript'}
+      ${'foo.js.rb'} | ${'ruby'}
+      ${'foo.bar'}   | ${'plaintext'}
+      ${undefined}   | ${'plaintext'}
+    `(
+      'sets the $expectedThemeName theme when $themeName is set in the user preference',
+      ({ path, expectedLanguage }) => {
+        const language = utils.getBlobLanguage(path);
+
+        expect(language).toEqual(expectedLanguage);
+      },
+    );
+  });
+
+  describe('setupCodeSnipet', () => {
+    beforeEach(() => {
+      jest.spyOn(monacoEditor, 'colorizeElement').mockImplementation();
+      jest.spyOn(monacoEditor, 'setTheme').mockImplementation();
+      setFixtures('<pre id="foo"></pre>');
+      el = document.getElementById('foo');
+    });
+
+    it('colorizes the element and applies the preference theme', () => {
+      expect(monacoEditor.colorizeElement).not.toHaveBeenCalled();
+      expect(monacoEditor.setTheme).not.toHaveBeenCalled();
+
+      utils.setupCodeSnippet(el);
+
+      expect(monacoEditor.colorizeElement).toHaveBeenCalledWith(el);
+      expect(monacoEditor.setTheme).toHaveBeenCalled();
+    });
+  });
+});