diff options
author | Martin Hobert <info@dosh.dk> | 2019-04-25 17:21:38 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-04-25 17:21:38 +0300 |
commit | c005c97914f1bdff33b0ad77b2e2e855044ee39b (patch) | |
tree | 0c4697a7e3d24ed9146240672d3fb6248c97511d /spec/frontend/vue_shared/components/notes | |
parent | 69f0ae40b2cf40b56b0c3c6127fecbc9ddc541b9 (diff) |
test(Refactored notes tests from Karma to Jest):
fix #58829
Added changelog entry
Added merge request id
Diffstat (limited to 'spec/frontend/vue_shared/components/notes')
3 files changed, 137 insertions, 0 deletions
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: '<p dir="auto">closed</p>', + 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 `<p>` 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('<span>closed</span>'); + }); +}); |