Add latest changes from gitlab-org/gitlab@master

1 files changed, 151 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/source_editor_spec.js b/spec/frontend/vue_shared/components/source_editor_spec.js
new file mode 100644
index 00000000000..dca4d60e23c
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_editor_spec.js
@@ -0,0 +1,151 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { EDITOR_READY_EVENT } from '~/editor/constants';
+import Editor from '~/editor/source_editor';
+import SourceEditor from '~/vue_shared/components/source_editor.vue';
+
+jest.mock('~/editor/source_editor');
+
+describe('Source Editor component', () => {
+  let wrapper;
+  let mockInstance;
+
+  const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+  const fileName = 'lorem.txt';
+  const fileGlobalId = 'snippet_777';
+  const createInstanceMock = jest.fn().mockImplementation(() => {
+    mockInstance = {
+      onDidChangeModelContent: jest.fn(),
+      updateModelLanguage: jest.fn(),
+      getValue: jest.fn(),
+      setValue: jest.fn(),
+      dispose: jest.fn(),
+    };
+    return mockInstance;
+  });
+
+  Editor.mockImplementation(() => {
+    return {
+      createInstance: createInstanceMock,
+    };
+  });
+  function createComponent(props = {}) {
+    wrapper = shallowMount(SourceEditor, {
+      propsData: {
+        value,
+        fileName,
+        fileGlobalId,
+        ...props,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const triggerChangeContent = (val) => {
+    mockInstance.getValue.mockReturnValue(val);
+    const [cb] = mockInstance.onDidChangeModelContent.mock.calls[0];
+
+    cb();
+
+    jest.runOnlyPendingTimers();
+  };
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('renders content', () => {
+      expect(wrapper.text()).toContain(value);
+    });
+  });
+
+  describe('functionality', () => {
+    it('does not fail without content', () => {
+      const spy = jest.spyOn(global.console, 'error');
+      createComponent({ value: undefined });
+
+      expect(spy).not.toHaveBeenCalled();
+      expect(wrapper.find('[id^="source-editor-"]').exists()).toBe(true);
+    });
+
+    it('initialises Source Editor instance', () => {
+      const el = wrapper.find({ ref: 'editor' }).element;
+      expect(createInstanceMock).toHaveBeenCalledWith({
+        el,
+        blobPath: fileName,
+        blobGlobalId: fileGlobalId,
+        blobContent: value,
+        extensions: null,
+      });
+    });
+
+    it('reacts to the changes in fileName', () => {
+      const newFileName = 'ipsum.txt';
+
+      wrapper.setProps({
+        fileName: newFileName,
+      });
+
+      return nextTick().then(() => {
+        expect(mockInstance.updateModelLanguage).toHaveBeenCalledWith(newFileName);
+      });
+    });
+
+    it('registers callback with editor onChangeContent', () => {
+      expect(mockInstance.onDidChangeModelContent).toHaveBeenCalledWith(expect.any(Function));
+    });
+
+    it('emits input event when the blob content is changed', () => {
+      expect(wrapper.emitted().input).toBeUndefined();
+
+      triggerChangeContent(value);
+
+      expect(wrapper.emitted().input).toEqual([[value]]);
+    });
+
+    it('emits EDITOR_READY_EVENT event when the Source Editor is ready', async () => {
+      const el = wrapper.find({ ref: 'editor' }).element;
+      expect(wrapper.emitted()[EDITOR_READY_EVENT]).toBeUndefined();
+
+      await el.dispatchEvent(new Event(EDITOR_READY_EVENT));
+
+      expect(wrapper.emitted()[EDITOR_READY_EVENT]).toBeDefined();
+    });
+
+    it('component API `getEditor()` returns the editor instance', () => {
+      expect(wrapper.vm.getEditor()).toBe(mockInstance);
+    });
+
+    describe('reaction to the value update', () => {
+      it('reacts to the changes in the passed value', async () => {
+        const newValue = 'New Value';
+
+        wrapper.setProps({
+          value: newValue,
+        });
+
+        await nextTick();
+        expect(mockInstance.setValue).toHaveBeenCalledWith(newValue);
+      });
+
+      it("does not update value if the passed one is exactly the same as the editor's content", async () => {
+        const newValue = `${value}`; // to make sure we're creating a new String with the same content and not just a reference
+
+        wrapper.setProps({
+          value: newValue,
+        });
+
+        await nextTick();
+        expect(mockInstance.setValue).not.toHaveBeenCalled();
+      });
+    });
+  });
+});