From f4186a753b86625a83e8499af14b5badd63a2ac2 Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Mon, 9 Mar 2020 09:07:45 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../__snapshots__/blob_edit_content_spec.js.snap | 14 ++++ .../blob/components/blob_edit_content_spec.js | 81 ++++++++++++++++++ spec/frontend/blob/utils_spec.js | 95 ++++++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap create mode 100644 spec/frontend/blob/components/blob_edit_content_spec.js create mode 100644 spec/frontend/blob/utils_spec.js (limited to 'spec/frontend/blob') diff --git a/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap new file mode 100644 index 00000000000..0409b118222 --- /dev/null +++ b/spec/frontend/blob/components/__snapshots__/blob_edit_content_spec.js.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Blob Header Editing rendering matches the snapshot 1`] = ` +
+
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  
+
+`; diff --git a/spec/frontend/blob/components/blob_edit_content_spec.js b/spec/frontend/blob/components/blob_edit_content_spec.js new file mode 100644 index 00000000000..eff53fe7ce9 --- /dev/null +++ b/spec/frontend/blob/components/blob_edit_content_spec.js @@ -0,0 +1,81 @@ +import { shallowMount } from '@vue/test-utils'; +import BlobEditContent from '~/blob/components/blob_edit_content.vue'; +import { initEditorLite } from '~/blob/utils'; +import { nextTick } from 'vue'; + +jest.mock('~/blob/utils', () => ({ + initEditorLite: jest.fn(), +})); + +describe('Blob Header Editing', () => { + let wrapper; + const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; + const fileName = 'lorem.txt'; + + function createComponent() { + wrapper = shallowMount(BlobEditContent, { + propsData: { + value, + fileName, + }, + }); + } + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('rendering', () => { + it('matches the snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('renders content', () => { + expect(wrapper.text()).toContain(value); + }); + }); + + describe('functionality', () => { + it('initialises Editor Lite', () => { + const el = wrapper.find({ ref: 'editor' }).element; + expect(initEditorLite).toHaveBeenCalledWith({ + el, + blobPath: fileName, + blobContent: value, + }); + }); + + it('reacts to the changes in fileName', () => { + wrapper.vm.editor = { + updateModelLanguage: jest.fn(), + }; + + const newFileName = 'ipsum.txt'; + + wrapper.setProps({ + fileName: newFileName, + }); + + return nextTick().then(() => { + expect(wrapper.vm.editor.updateModelLanguage).toHaveBeenCalledWith(newFileName); + }); + }); + + it('emits input event when the blob content is changed', () => { + const editorEl = wrapper.find({ ref: 'editor' }); + wrapper.vm.editor = { + getValue: jest.fn().mockReturnValue(value), + }; + + editorEl.trigger('focusout'); + + return nextTick().then(() => { + expect(wrapper.emitted().input[0]).toEqual([value]); + }); + }); + }); +}); diff --git a/spec/frontend/blob/utils_spec.js b/spec/frontend/blob/utils_spec.js new file mode 100644 index 00000000000..39a73aae444 --- /dev/null +++ b/spec/frontend/blob/utils_spec.js @@ -0,0 +1,95 @@ +import Editor from '~/editor/editor_lite'; +import * as utils from '~/blob/utils'; + +const mockCreateMonacoInstance = jest.fn(); +jest.mock('~/editor/editor_lite', () => { + return jest.fn().mockImplementation(() => { + return { createInstance: mockCreateMonacoInstance }; + }); +}); + +const mockCreateAceInstance = jest.fn(); +global.ace = { + edit: mockCreateAceInstance, +}; + +describe('Blob utilities', () => { + beforeEach(() => { + Editor.mockClear(); + }); + + describe('initEditorLite', () => { + let editorEl; + const blobPath = 'foo.txt'; + const blobContent = 'Foo bar'; + + beforeEach(() => { + setFixtures('
'); + editorEl = document.getElementById('editor'); + }); + + describe('Monaco editor', () => { + let origProp; + + beforeEach(() => { + origProp = window.gon; + window.gon = { + features: { + monacoSnippets: true, + }, + }; + }); + + afterEach(() => { + window.gon = origProp; + }); + + it('initializes the Editor Lite', () => { + utils.initEditorLite({ el: editorEl }); + expect(Editor).toHaveBeenCalled(); + }); + + it('creates the instance with the passed parameters', () => { + utils.initEditorLite({ el: editorEl }); + expect(mockCreateMonacoInstance.mock.calls[0]).toEqual([ + { + el: editorEl, + blobPath: undefined, + blobContent: undefined, + }, + ]); + + utils.initEditorLite({ el: editorEl, blobPath, blobContent }); + expect(mockCreateMonacoInstance.mock.calls[1]).toEqual([ + { + el: editorEl, + blobPath, + blobContent, + }, + ]); + }); + }); + describe('ACE editor', () => { + let origProp; + + beforeEach(() => { + origProp = window.gon; + window.gon = { + features: { + monacoSnippets: false, + }, + }; + }); + + afterEach(() => { + window.gon = origProp; + }); + + it('does not initialize the Editor Lite', () => { + utils.initEditorLite({ el: editorEl }); + expect(Editor).not.toHaveBeenCalled(); + expect(mockCreateAceInstance).toHaveBeenCalledWith(editorEl); + }); + }); + }); +}); -- cgit v1.2.1