Add latest changes from gitlab-org/gitlab@master

1 files changed, 94 insertions, 0 deletions

diff --git a/spec/frontend/snippet/snippet_bundle_spec.js b/spec/frontend/snippet/snippet_bundle_spec.js
new file mode 100644
index 00000000000..af98e8d665d
--- /dev/null
+++ b/spec/frontend/snippet/snippet_bundle_spec.js
@@ -0,0 +1,94 @@
+import Editor from '~/editor/editor_lite';
+import { initEditor } from '~/snippet/snippet_bundle';
+import { setHTMLFixture } from 'helpers/fixtures';
+
+jest.mock('~/editor/editor_lite', () => jest.fn());
+
+describe('Snippet editor', () => {
+  describe('Monaco editor for Snippets', () => {
+    let oldGon;
+    let editorEl;
+    let contentEl;
+    let fileNameEl;
+    let form;
+
+    const mockName = 'foo.bar';
+    const mockContent = 'Foo Bar';
+    const updatedMockContent = 'New Foo Bar';
+
+    const mockEditor = {
+      createInstance: jest.fn(),
+      updateModelLanguage: jest.fn(),
+      getValue: jest.fn().mockReturnValueOnce(updatedMockContent),
+    };
+    Editor.mockImplementation(() => mockEditor);
+
+    function setUpFixture(name, content) {
+      setHTMLFixture(`
+        <div class="snippet-form-holder">
+          <form>
+            <input class="snippet-file-name" type="text" value="${name}">
+            <input class="snippet-file-content" type="hidden" value="${content}">
+            <pre id="editor"></pre>
+          </form>
+        </div>
+      `);
+    }
+
+    function bootstrap(name = '', content = '') {
+      setUpFixture(name, content);
+      editorEl = document.getElementById('editor');
+      contentEl = document.querySelector('.snippet-file-content');
+      fileNameEl = document.querySelector('.snippet-file-name');
+      form = document.querySelector('.snippet-form-holder form');
+
+      initEditor();
+    }
+
+    function createEvent(name) {
+      return new Event(name, {
+        view: window,
+        bubbles: true,
+        cancelable: true,
+      });
+    }
+
+    beforeEach(() => {
+      oldGon = window.gon;
+      window.gon = { features: { monacoSnippets: true } };
+      bootstrap(mockName, mockContent);
+    });
+
+    afterEach(() => {
+      window.gon = oldGon;
+    });
+
+    it('correctly initializes Editor', () => {
+      expect(mockEditor.createInstance).toHaveBeenCalledWith({
+        el: editorEl,
+        blobPath: mockName,
+        blobContent: mockContent,
+      });
+    });
+
+    it('listens to file name changes and updates syntax highlighting of code', () => {
+      expect(mockEditor.updateModelLanguage).not.toHaveBeenCalled();
+
+      const event = createEvent('change');
+
+      fileNameEl.value = updatedMockContent;
+      fileNameEl.dispatchEvent(event);
+
+      expect(mockEditor.updateModelLanguage).toHaveBeenCalledWith(updatedMockContent);
+    });
+
+    it('listens to form submit event and populates the hidden field with most recent version of the content', () => {
+      expect(contentEl.value).toBe(mockContent);
+
+      const event = createEvent('submit');
+
+      form.dispatchEvent(event);
+      expect(contentEl.value).toBe(updatedMockContent);
+    });
+  });
+});