From f5461d7ba01b8fe2d28c9bf4197ef3a11b3b6d47 Mon Sep 17 00:00:00 2001 From: Winnie Hellmann Date: Wed, 3 Jul 2019 13:18:49 +0000 Subject: Migrate markdown header_spec.js to Jest --- .../unreleased/winh-jest-markdown-header.yml | 5 + .../vue_shared/components/markdown/header_spec.js | 107 ++++++++++++++++++++ .../vue_shared/components/markdown/header_spec.js | 111 --------------------- 3 files changed, 112 insertions(+), 111 deletions(-) create mode 100644 changelogs/unreleased/winh-jest-markdown-header.yml create mode 100644 spec/frontend/vue_shared/components/markdown/header_spec.js delete mode 100644 spec/javascripts/vue_shared/components/markdown/header_spec.js diff --git a/changelogs/unreleased/winh-jest-markdown-header.yml b/changelogs/unreleased/winh-jest-markdown-header.yml new file mode 100644 index 00000000000..6bf9d75cc93 --- /dev/null +++ b/changelogs/unreleased/winh-jest-markdown-header.yml @@ -0,0 +1,5 @@ +--- +title: Migrate markdown header_spec.js to Jest +merge_request: 30228 +author: Martin Hobert +type: other diff --git a/spec/frontend/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js new file mode 100644 index 00000000000..aa0b544f948 --- /dev/null +++ b/spec/frontend/vue_shared/components/markdown/header_spec.js @@ -0,0 +1,107 @@ +import Vue from 'vue'; +import $ from 'jquery'; +import headerComponent from '~/vue_shared/components/markdown/header.vue'; + +describe('Markdown field header component', () => { + let vm; + + beforeEach(done => { + const Component = Vue.extend(headerComponent); + + vm = new Component({ + propsData: { + previewMarkdown: false, + }, + }).$mount(); + + Vue.nextTick(done); + }); + + it('renders markdown header buttons', () => { + const buttons = [ + 'Add bold text', + 'Add italic text', + 'Insert a quote', + 'Insert suggestion', + 'Insert code', + 'Add a link', + 'Add a bullet list', + 'Add a numbered list', + 'Add a task list', + 'Add a table', + 'Go full screen', + ]; + const elements = vm.$el.querySelectorAll('.toolbar-btn'); + + elements.forEach((buttonEl, index) => { + expect(buttonEl.getAttribute('data-original-title')).toBe(buttons[index]); + }); + }); + + it('renders `write` link as active when previewMarkdown is false', () => { + expect(vm.$el.querySelector('li:nth-child(1)').classList.contains('active')).toBeTruthy(); + }); + + it('renders `preview` link as active when previewMarkdown is true', done => { + vm.previewMarkdown = true; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('li:nth-child(2)').classList.contains('active')).toBeTruthy(); + + done(); + }); + }); + + it('emits toggle markdown event when clicking preview', () => { + jest.spyOn(vm, '$emit').mockImplementation(); + + vm.$el.querySelector('.js-preview-link').click(); + + expect(vm.$emit).toHaveBeenCalledWith('preview-markdown'); + + vm.$el.querySelector('.js-write-link').click(); + + expect(vm.$emit).toHaveBeenCalledWith('write-markdown'); + }); + + it('does not emit toggle markdown event when triggered from another form', () => { + jest.spyOn(vm, '$emit').mockImplementation(); + + $(document).triggerHandler('markdown-preview:show', [ + $( + '
', + ), + ]); + + expect(vm.$emit).not.toHaveBeenCalled(); + }); + + it('blurs preview link after click', () => { + const link = vm.$el.querySelector('li:nth-child(2) button'); + jest.spyOn(HTMLElement.prototype, 'blur').mockImplementation(); + + link.click(); + + expect(link.blur).toHaveBeenCalled(); + }); + + it('renders markdown table template', () => { + expect(vm.mdTable).toEqual( + '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |', + ); + }); + + it('renders suggestion template', () => { + vm.lineContent = 'Some content'; + + expect(vm.mdSuggestion).toEqual('```suggestion:-0+0\n{text}\n```'); + }); + + it('does not render suggestion button if `canSuggest` is set to false', () => { + vm.canSuggest = false; + + Vue.nextTick(() => { + expect(vm.$el.querySelector('.qa-suggestion-btn')).toBe(null); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js deleted file mode 100644 index af92e5f5ae2..00000000000 --- a/spec/javascripts/vue_shared/components/markdown/header_spec.js +++ /dev/null @@ -1,111 +0,0 @@ -import Vue from 'vue'; -import $ from 'jquery'; -import headerComponent from '~/vue_shared/components/markdown/header.vue'; - -describe('Markdown field header component', () => { - let vm; - - beforeEach(done => { - const Component = Vue.extend(headerComponent); - - vm = new Component({ - propsData: { - previewMarkdown: false, - }, - }).$mount(); - - Vue.nextTick(done); - }); - - it('renders markdown header buttons', () => { - const buttons = [ - 'Add bold text', - 'Add italic text', - 'Insert a quote', - 'Insert suggestion', - 'Insert code', - 'Add a link', - 'Add a bullet list', - 'Add a numbered list', - 'Add a task list', - 'Add a table', - 'Go full screen', - ]; - const elements = vm.$el.querySelectorAll('.toolbar-btn'); - - elements.forEach((buttonEl, index) => { - expect(buttonEl.getAttribute('data-original-title')).toBe(buttons[index]); - }); - }); - - it('renders `write` link as active when previewMarkdown is false', () => { - expect(vm.$el.querySelector('li:nth-child(1)').classList.contains('active')).toBeTruthy(); - }); - - it('renders `preview` link as active when previewMarkdown is true', done => { - vm.previewMarkdown = true; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('li:nth-child(2)').classList.contains('active')).toBeTruthy(); - - done(); - }); - }); - - it('emits toggle markdown event when clicking preview', () => { - spyOn(vm, '$emit'); - - vm.$el.querySelector('.js-preview-link').click(); - - expect(vm.$emit).toHaveBeenCalledWith('preview-markdown'); - - vm.$el.querySelector('.js-write-link').click(); - - expect(vm.$emit).toHaveBeenCalledWith('write-markdown'); - }); - - it('does not emit toggle markdown event when triggered from another form', () => { - spyOn(vm, '$emit'); - - $(document).triggerHandler('markdown-preview:show', [ - $( - '
', - ), - ]); - - expect(vm.$emit).not.toHaveBeenCalled(); - }); - - it('blurs preview link after click', done => { - const link = vm.$el.querySelector('li:nth-child(2) button'); - spyOn(HTMLElement.prototype, 'blur'); - - link.click(); - - setTimeout(() => { - expect(link.blur).toHaveBeenCalled(); - - done(); - }); - }); - - it('renders markdown table template', () => { - expect(vm.mdTable).toEqual( - '| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |', - ); - }); - - it('renders suggestion template', () => { - vm.lineContent = 'Some content'; - - expect(vm.mdSuggestion).toEqual('```suggestion:-0+0\n{text}\n```'); - }); - - it('does not render suggestion button if `canSuggest` is set to false', () => { - vm.canSuggest = false; - - Vue.nextTick(() => { - expect(vm.$el.querySelector('.qa-suggestion-btn')).toBe(null); - }); - }); -}); -- cgit v1.2.1