diff options
Diffstat (limited to 'spec/javascripts/notes/components/comment_form_spec.js')
| -rw-r--r-- | spec/javascripts/notes/components/comment_form_spec.js | 96 |
1 files changed, 64 insertions, 32 deletions
diff --git a/spec/javascripts/notes/components/comment_form_spec.js b/spec/javascripts/notes/components/comment_form_spec.js index 224debbeff6..155c91dcc46 100644 --- a/spec/javascripts/notes/components/comment_form_spec.js +++ b/spec/javascripts/notes/components/comment_form_spec.js @@ -1,23 +1,27 @@ import $ from 'jquery'; import Vue from 'vue'; import Autosize from 'autosize'; -import store from '~/notes/stores'; +import createStore from '~/notes/stores'; import CommentForm from '~/notes/components/comment_form.vue'; +import * as constants from '~/notes/constants'; import { loggedOutnoteableData, notesDataMock, userDataMock, noteableDataMock } from '../mock_data'; import { keyboardDownEvent } from '../../issue_show/helpers'; describe('issue_comment_form component', () => { + let store; let vm; const Component = Vue.extend(CommentForm); let mountComponent; beforeEach(() => { - mountComponent = (noteableType = 'issue') => new Component({ - propsData: { - noteableType, - }, - store, - }).$mount(); + store = createStore(); + mountComponent = (noteableType = 'issue') => + new Component({ + propsData: { + noteableType, + }, + store, + }).$mount(); }); afterEach(() => { @@ -34,7 +38,9 @@ describe('issue_comment_form component', () => { }); it('should render user avatar with link', () => { - expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual(userDataMock.path); + expect(vm.$el.querySelector('.timeline-icon .user-avatar-link').getAttribute('href')).toEqual( + userDataMock.path, + ); }); describe('handleSave', () => { @@ -60,7 +66,7 @@ describe('issue_comment_form component', () => { expect(vm.toggleIssueState).toHaveBeenCalled(); }); - it('should disable action button whilst submitting', (done) => { + it('should disable action button whilst submitting', done => { const saveNotePromise = Promise.resolve(); vm.note = 'hello world'; spyOn(vm, 'saveNote').and.returnValue(saveNotePromise); @@ -84,19 +90,21 @@ describe('issue_comment_form component', () => { it('should render textarea with placeholder', () => { expect( vm.$el.querySelector('.js-main-target-form textarea').getAttribute('placeholder'), - ).toEqual('Write a comment or drag your files here...'); + ).toEqual('Write a comment or drag your files here…'); }); - it('should make textarea disabled while requesting', (done) => { + it('should make textarea disabled while requesting', done => { const $submitButton = $(vm.$el.querySelector('.js-comment-submit-button')); vm.note = 'hello world'; spyOn(vm, 'stopPolling'); spyOn(vm, 'saveNote').and.returnValue(new Promise(() => {})); - vm.$nextTick(() => { // Wait for vm.note change triggered. It should enable $submitButton. + vm.$nextTick(() => { + // Wait for vm.note change triggered. It should enable $submitButton. $submitButton.trigger('click'); - vm.$nextTick(() => { // Wait for vm.isSubmitting triggered. It should disable textarea. + vm.$nextTick(() => { + // Wait for vm.isSubmitting triggered. It should disable textarea. expect(vm.$el.querySelector('.js-main-target-form textarea').disabled).toBeTruthy(); done(); }); @@ -105,21 +113,27 @@ describe('issue_comment_form component', () => { it('should support quick actions', () => { expect( - vm.$el.querySelector('.js-main-target-form textarea').getAttribute('data-supports-quick-actions'), + vm.$el + .querySelector('.js-main-target-form textarea') + .getAttribute('data-supports-quick-actions'), ).toEqual('true'); }); it('should link to markdown docs', () => { const { markdownDocsPath } = notesDataMock; - expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual('Markdown'); + expect(vm.$el.querySelector(`a[href="${markdownDocsPath}"]`).textContent.trim()).toEqual( + 'Markdown', + ); }); it('should link to quick actions docs', () => { const { quickActionsDocsPath } = notesDataMock; - expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions'); + expect( + vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim(), + ).toEqual('quick actions'); }); - it('should resize textarea after note discarded', (done) => { + it('should resize textarea after note discarded', done => { spyOn(Autosize, 'update'); spyOn(vm, 'discard').and.callThrough(); @@ -136,7 +150,9 @@ describe('issue_comment_form component', () => { it('should enter edit mode when arrow up is pressed', () => { spyOn(vm, 'editCurrentUserLastNote').and.callThrough(); vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo'; - vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(38, true)); + vm.$el + .querySelector('.js-main-target-form textarea') + .dispatchEvent(keyboardDownEvent(38, true)); expect(vm.editCurrentUserLastNote).toHaveBeenCalled(); }); @@ -151,7 +167,9 @@ describe('issue_comment_form component', () => { it('should save note when cmd+enter is pressed', () => { spyOn(vm, 'handleSave').and.callThrough(); vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo'; - vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, true)); + vm.$el + .querySelector('.js-main-target-form textarea') + .dispatchEvent(keyboardDownEvent(13, true)); expect(vm.handleSave).toHaveBeenCalled(); }); @@ -159,7 +177,9 @@ describe('issue_comment_form component', () => { it('should save note when ctrl+enter is pressed', () => { spyOn(vm, 'handleSave').and.callThrough(); vm.$el.querySelector('.js-main-target-form textarea').value = 'Foo'; - vm.$el.querySelector('.js-main-target-form textarea').dispatchEvent(keyboardDownEvent(13, false, true)); + vm.$el + .querySelector('.js-main-target-form textarea') + .dispatchEvent(keyboardDownEvent(13, false, true)); expect(vm.handleSave).toHaveBeenCalled(); }); @@ -168,41 +188,51 @@ describe('issue_comment_form component', () => { describe('actions', () => { it('should be possible to close the issue', () => { - expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close issue'); + expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual( + 'Close issue', + ); }); it('should render comment button as disabled', () => { - expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual('disabled'); + expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual( + 'disabled', + ); }); - it('should enable comment button if it has note', (done) => { + it('should enable comment button if it has note', done => { vm.note = 'Foo'; Vue.nextTick(() => { - expect(vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled')).toEqual(null); + expect( + vm.$el.querySelector('.js-comment-submit-button').getAttribute('disabled'), + ).toEqual(null); done(); }); }); - it('should update buttons texts when it has note', (done) => { + it('should update buttons texts when it has note', done => { vm.note = 'Foo'; Vue.nextTick(() => { - expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Comment & close issue'); + expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual( + 'Comment & close issue', + ); expect(vm.$el.querySelector('.js-note-discard')).toBeDefined(); done(); }); }); - it('updates button text with noteable type', (done) => { - vm.noteableType = 'merge_request'; + it('updates button text with noteable type', done => { + vm.noteableType = constants.MERGE_REQUEST_NOTEABLE_TYPE; Vue.nextTick(() => { - expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual('Close merge request'); + expect(vm.$el.querySelector('.btn-comment-and-close').textContent.trim()).toEqual( + 'Close merge request', + ); done(); }); }); describe('when clicking close/reopen button', () => { - it('should disable button and show a loading spinner', (done) => { + it('should disable button and show a loading spinner', done => { const toggleStateButton = vm.$el.querySelector('.js-action-button'); toggleStateButton.click(); @@ -217,7 +247,7 @@ describe('issue_comment_form component', () => { }); describe('issue is confidential', () => { - it('shows information warning', (done) => { + it('shows information warning', done => { store.dispatch('setNoteableData', Object.assign(noteableDataMock, { confidential: true })); Vue.nextTick(() => { expect(vm.$el.querySelector('.confidential-issue-warning')).toBeDefined(); @@ -237,7 +267,9 @@ describe('issue_comment_form component', () => { }); it('should render signed out widget', () => { - expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual('Please register or sign in to reply'); + expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toEqual( + 'Please register or sign in to reply', + ); }); it('should not render submission form', () => { |