From c005c97914f1bdff33b0ad77b2e2e855044ee39b Mon Sep 17 00:00:00 2001 From: Martin Hobert Date: Thu, 25 Apr 2019 14:21:38 +0000 Subject: test(Refactored notes tests from Karma to Jest): fix #58829 Added changelog entry Added merge request id --- .../refactor-58829-migrate-notes-spec-to-jest.yml | 5 ++ .../components/notes/placeholder_note_spec.js | 51 +++++++++++++++++++ .../notes/placeholder_system_note_spec.js | 27 ++++++++++ .../components/notes/system_note_spec.js | 59 ++++++++++++++++++++++ .../components/notes/placeholder_note_spec.js | 51 ------------------- .../notes/placeholder_system_note_spec.js | 27 ---------- .../components/notes/system_note_spec.js | 59 ---------------------- 7 files changed, 142 insertions(+), 137 deletions(-) create mode 100644 changelogs/unreleased/refactor-58829-migrate-notes-spec-to-jest.yml create mode 100644 spec/frontend/vue_shared/components/notes/placeholder_note_spec.js create mode 100644 spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js create mode 100644 spec/frontend/vue_shared/components/notes/system_note_spec.js delete mode 100644 spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js delete mode 100644 spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js delete mode 100644 spec/javascripts/vue_shared/components/notes/system_note_spec.js diff --git a/changelogs/unreleased/refactor-58829-migrate-notes-spec-to-jest.yml b/changelogs/unreleased/refactor-58829-migrate-notes-spec-to-jest.yml new file mode 100644 index 00000000000..9a1886797da --- /dev/null +++ b/changelogs/unreleased/refactor-58829-migrate-notes-spec-to-jest.yml @@ -0,0 +1,5 @@ +--- +title: 'Refactored notes tests from Karma to Jest' +merge_request: 27648 +author: Martin Hobert +type: other diff --git a/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js new file mode 100644 index 00000000000..eafff7f681e --- /dev/null +++ b/spec/frontend/vue_shared/components/notes/placeholder_note_spec.js @@ -0,0 +1,51 @@ +import Vue from 'vue'; +import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue'; +import createStore from '~/notes/stores'; +import { userDataMock } from '../../../../javascripts/notes/mock_data'; + +describe('issue placeholder system note component', () => { + let store; + let vm; + + beforeEach(() => { + const Component = Vue.extend(issuePlaceholderNote); + store = createStore(); + store.dispatch('setUserData', userDataMock); + vm = new Component({ + store, + propsData: { note: { body: 'Foo' } }, + }).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('user information', () => { + it('should render user avatar with link', () => { + expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual( + userDataMock.path, + ); + + expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual( + `${userDataMock.avatar_url}?width=40`, + ); + }); + }); + + describe('note content', () => { + it('should render note header information', () => { + expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual( + userDataMock.path, + ); + + expect( + vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(), + ).toEqual(`@${userDataMock.username}`); + }); + + it('should render note body', () => { + expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo'); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js new file mode 100644 index 00000000000..976e38c15ee --- /dev/null +++ b/spec/frontend/vue_shared/components/notes/placeholder_system_note_spec.js @@ -0,0 +1,27 @@ +import Vue from 'vue'; +import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; + +describe('placeholder system note component', () => { + let PlaceholderSystemNote; + let vm; + + beforeEach(() => { + PlaceholderSystemNote = Vue.extend(placeholderSystemNote); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render system note placeholder with plain text', () => { + vm = mountComponent(PlaceholderSystemNote, { + note: { body: 'This is a placeholder' }, + }); + + expect(vm.$el.tagName).toEqual('LI'); + expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual( + 'This is a placeholder', + ); + }); +}); diff --git a/spec/frontend/vue_shared/components/notes/system_note_spec.js b/spec/frontend/vue_shared/components/notes/system_note_spec.js new file mode 100644 index 00000000000..adcb1c858aa --- /dev/null +++ b/spec/frontend/vue_shared/components/notes/system_note_spec.js @@ -0,0 +1,59 @@ +import Vue from 'vue'; +import issueSystemNote from '~/vue_shared/components/notes/system_note.vue'; +import createStore from '~/notes/stores'; + +describe('system note component', () => { + let vm; + let props; + + beforeEach(() => { + props = { + note: { + id: '1424', + author: { + id: 1, + name: 'Root', + username: 'root', + state: 'active', + avatar_url: 'path', + path: '/root', + }, + note_html: '

closed

', + system_note_icon_name: 'status_closed', + created_at: '2017-08-02T10:51:58.559Z', + }, + }; + + const store = createStore(); + store.dispatch('setTargetNoteHash', `note_${props.note.id}`); + + const Component = Vue.extend(issueSystemNote); + vm = new Component({ + store, + propsData: props, + }).$mount(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('should render a list item with correct id', () => { + expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`); + }); + + it('should render target class is note is target note', () => { + expect(vm.$el.classList).toContain('target'); + }); + + it('should render svg icon', () => { + expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined(); + }); + + // Redcarpet Markdown renderer wraps text in `

` tags + // we need to strip them because they break layout of commit lists in system notes: + // https://gitlab.com/gitlab-org/gitlab-ce/uploads/b07a10670919254f0220d3ff5c1aa110/jqzI.png + it('removes wrapping paragraph from note HTML', () => { + expect(vm.$el.querySelector('.system-note-message').innerHTML).toEqual('closed'); + }); +}); diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js deleted file mode 100644 index 45f131194ca..00000000000 --- a/spec/javascripts/vue_shared/components/notes/placeholder_note_spec.js +++ /dev/null @@ -1,51 +0,0 @@ -import Vue from 'vue'; -import issuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue'; -import createStore from '~/notes/stores'; -import { userDataMock } from '../../../notes/mock_data'; - -describe('issue placeholder system note component', () => { - let store; - let vm; - - beforeEach(() => { - const Component = Vue.extend(issuePlaceholderNote); - store = createStore(); - store.dispatch('setUserData', userDataMock); - vm = new Component({ - store, - propsData: { note: { body: 'Foo' } }, - }).$mount(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('user information', () => { - it('should render user avatar with link', () => { - expect(vm.$el.querySelector('.user-avatar-link').getAttribute('href')).toEqual( - userDataMock.path, - ); - - expect(vm.$el.querySelector('.user-avatar-link img').getAttribute('src')).toEqual( - `${userDataMock.avatar_url}?width=40`, - ); - }); - }); - - describe('note content', () => { - it('should render note header information', () => { - expect(vm.$el.querySelector('.note-header-info a').getAttribute('href')).toEqual( - userDataMock.path, - ); - - expect( - vm.$el.querySelector('.note-header-info .note-headline-light').textContent.trim(), - ).toEqual(`@${userDataMock.username}`); - }); - - it('should render note body', () => { - expect(vm.$el.querySelector('.note-text p').textContent.trim()).toEqual('Foo'); - }); - }); -}); diff --git a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js b/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js deleted file mode 100644 index 6013e85811a..00000000000 --- a/spec/javascripts/vue_shared/components/notes/placeholder_system_note_spec.js +++ /dev/null @@ -1,27 +0,0 @@ -import Vue from 'vue'; -import placeholderSystemNote from '~/vue_shared/components/notes/placeholder_system_note.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -describe('placeholder system note component', () => { - let PlaceholderSystemNote; - let vm; - - beforeEach(() => { - PlaceholderSystemNote = Vue.extend(placeholderSystemNote); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render system note placeholder with plain text', () => { - vm = mountComponent(PlaceholderSystemNote, { - note: { body: 'This is a placeholder' }, - }); - - expect(vm.$el.tagName).toEqual('LI'); - expect(vm.$el.querySelector('.timeline-content em').textContent.trim()).toEqual( - 'This is a placeholder', - ); - }); -}); diff --git a/spec/javascripts/vue_shared/components/notes/system_note_spec.js b/spec/javascripts/vue_shared/components/notes/system_note_spec.js deleted file mode 100644 index adcb1c858aa..00000000000 --- a/spec/javascripts/vue_shared/components/notes/system_note_spec.js +++ /dev/null @@ -1,59 +0,0 @@ -import Vue from 'vue'; -import issueSystemNote from '~/vue_shared/components/notes/system_note.vue'; -import createStore from '~/notes/stores'; - -describe('system note component', () => { - let vm; - let props; - - beforeEach(() => { - props = { - note: { - id: '1424', - author: { - id: 1, - name: 'Root', - username: 'root', - state: 'active', - avatar_url: 'path', - path: '/root', - }, - note_html: '

closed

', - system_note_icon_name: 'status_closed', - created_at: '2017-08-02T10:51:58.559Z', - }, - }; - - const store = createStore(); - store.dispatch('setTargetNoteHash', `note_${props.note.id}`); - - const Component = Vue.extend(issueSystemNote); - vm = new Component({ - store, - propsData: props, - }).$mount(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('should render a list item with correct id', () => { - expect(vm.$el.getAttribute('id')).toEqual(`note_${props.note.id}`); - }); - - it('should render target class is note is target note', () => { - expect(vm.$el.classList).toContain('target'); - }); - - it('should render svg icon', () => { - expect(vm.$el.querySelector('.timeline-icon svg')).toBeDefined(); - }); - - // Redcarpet Markdown renderer wraps text in `

` tags - // we need to strip them because they break layout of commit lists in system notes: - // https://gitlab.com/gitlab-org/gitlab-ce/uploads/b07a10670919254f0220d3ff5c1aa110/jqzI.png - it('removes wrapping paragraph from note HTML', () => { - expect(vm.$el.querySelector('.system-note-message').innerHTML).toEqual('closed'); - }); -}); -- cgit v1.2.1