diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/editor_lite_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/editor_lite_spec.js | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/editor_lite_spec.js b/spec/frontend/vue_shared/components/editor_lite_spec.js new file mode 100644 index 00000000000..52502fcf64f --- /dev/null +++ b/spec/frontend/vue_shared/components/editor_lite_spec.js @@ -0,0 +1,144 @@ +import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import EditorLite from '~/vue_shared/components/editor_lite.vue'; +import Editor from '~/editor/editor_lite'; + +jest.mock('~/editor/editor_lite'); + +describe('Editor Lite component', () => { + let wrapper; + const onDidChangeModelContent = jest.fn(); + const updateModelLanguage = jest.fn(); + const getValue = jest.fn(); + const setValue = jest.fn(); + const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; + const fileName = 'lorem.txt'; + const fileGlobalId = 'snippet_777'; + const createInstanceMock = jest.fn().mockImplementation(() => ({ + onDidChangeModelContent, + updateModelLanguage, + getValue, + setValue, + dispose: jest.fn(), + })); + Editor.mockImplementation(() => { + return { + createInstance: createInstanceMock, + }; + }); + function createComponent(props = {}) { + wrapper = shallowMount(EditorLite, { + propsData: { + value, + fileName, + fileGlobalId, + ...props, + }, + }); + } + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + const triggerChangeContent = val => { + getValue.mockReturnValue(val); + const [cb] = 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^="editor-lite-"]').exists()).toBe(true); + }); + + it('initialises Editor Lite 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(updateModelLanguage).toHaveBeenCalledWith(newFileName); + }); + }); + + it('registers callback with editor onChangeContent', () => { + expect(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 when the Editor Lite is ready', async () => { + const el = wrapper.find({ ref: 'editor' }).element; + expect(wrapper.emitted()['editor-ready']).toBeUndefined(); + + await el.dispatchEvent(new Event('editor-ready')); + + expect(wrapper.emitted()['editor-ready']).toBeDefined(); + }); + + 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(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(setValue).not.toHaveBeenCalled(); + }); + }); + }); +}); |