diff options
7 files changed, 78 insertions, 41 deletions
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue index 390be5c26af..751d7578087 100644 --- a/app/assets/javascripts/notes/components/issue_comment_form.vue +++ b/app/assets/javascripts/notes/components/issue_comment_form.vue @@ -175,6 +175,7 @@ this.noteType = type; }, editCurrentUserLastNote() { + console.log('editCurrentUserLastNote') if (this.note === '') { const lastNote = this.getCurrentUserLastNote(window.gon.current_user_id); @@ -228,9 +229,8 @@ :quick-actions-docs="quickActionsDocsUrl" :add-spacing-classes="false"> <textarea - id="note-body" name="note[note]" - class="note-textarea js-gfm-input js-autosize markdown-area" + class="note-textarea js-vue-comment-form js-gfm-input js-autosize markdown-area" data-supports-quick-actions="true" aria-label="Description" v-model="note" diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue index 63df996a0e0..3b0c684f2a1 100644 --- a/app/assets/javascripts/notes/components/issue_note.vue +++ b/app/assets/javascripts/notes/components/issue_note.vue @@ -60,10 +60,9 @@ }, deleteHandler() { // eslint-disable-next-line no-alert - const isConfirmed = confirm('Are you sure you want to delete this list?'); - - if (isConfirmed) { + if (confirm('Are you sure you want to delete this list?')) { this.isDeleting = true; + this.deleteNote(this.note) .then(() => { this.isDeleting = false; @@ -149,8 +148,8 @@ :can-delete="note.current_user.can_edit" :can-report-as-abuse="canReportAsAbuse" :report-abuse-path="note.report_abuse_path" - :edit-handler="editHandler" - :delete-handler="deleteHandler" + @editHandler="editHandler" + @deleteHandler="deleteHandler" /> </div> <issue-note-body diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue index 6982b201f41..638362f4588 100644 --- a/app/assets/javascripts/notes/components/issue_note_actions.vue +++ b/app/assets/javascripts/notes/components/issue_note_actions.vue @@ -37,14 +37,6 @@ type: Boolean, required: true, }, - editHandler: { - type: Function, - required: true, - }, - deleteHandler: { - type: Function, - required: true, - }, }, directives: { tooltip, @@ -76,6 +68,14 @@ return this.getUserDataByProp('id'); }, }, + methods: { + onEdit() { + this.$emit('editHandler'); + }, + onDelete() { + this.$emit('deleteHandler'); + } + } }; </script> @@ -125,7 +125,7 @@ <template v-if="canEdit"> <li> <button - @click="editHandler" + @click="onEdit" type="button" class="btn btn-transparent js-note-edit"> Edit comment @@ -140,7 +140,7 @@ </li> <li v-if="canEdit"> <button - @click.prevent="deleteHandler" + @click.prevent="onDelete" class="btn btn-transparent js-note-delete js-note-delete" type="button"> <span class="text-danger"> diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue index 6bd5bd2d8a1..a4d677a780f 100644 --- a/app/assets/javascripts/notes/components/issue_note_form.vue +++ b/app/assets/javascripts/notes/components/issue_note_form.vue @@ -118,8 +118,7 @@ </div> <div class="flash-container timeline-content"></div> <form - class="edit-note common-note-form" - @submit="handleUpdate"> + class="edit-note common-note-form"> <markdown-field :markdown-preview-url="markdownPreviewUrl" :markdown-docs="markdownDocsUrl" @@ -128,7 +127,7 @@ <textarea id="note-body" name="note[note]" - class="note-textarea js-gfm-input js-autosize markdown-area" + class="note-textarea js-gfm-input js-autosize markdown-area js-vue-issue-note-form" :data-supports-quick-actions="!isEditing" aria-label="Description" v-model="note" @@ -143,8 +142,9 @@ <div class="note-form-actions clearfix"> <button type="submit" + @click="handleUpdate" :disabled="isDisabled" - class="btn btn-nr btn-save"> + class="js-vue-issue-save btn btn-save"> {{saveButtonTitle}} </button> <button diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue index 371addd937e..adb08f97b22 100644 --- a/app/assets/javascripts/notes/components/issue_notes_app.vue +++ b/app/assets/javascripts/notes/components/issue_notes_app.vue @@ -113,9 +113,11 @@ mounted() { this.fetchNotes(); this.initPolling(); + const parentElement = this.$el.parentElement; - if (this.$el.parentElement) { - this.$el.parentElement.addEventListener('toggleAward', (event) => { + if (parentElement && + parentElement.classList.contains('js-vue-notes-event')) { + parentElement.addEventListener('toggleAward', (event) => { const { awardName, noteId } = event.detail; this.actionToggleAward({ awardName, noteId }); }); diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js index 1ad7648e533..bb9c2c53b79 100644 --- a/app/assets/javascripts/notes/stores/actions.js +++ b/app/assets/javascripts/notes/stores/actions.js @@ -87,7 +87,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => { const commandsChanges = res.commands_changes; if (hasQuickActions && Object.keys(errors).length) { - dispatch('poll'); + dispatch('fetchData'); $('.js-gfm-input').trigger('clear-commands-cache.atwho'); Flash('Commands applied', 'notice', $(noteData.flashContainer)); @@ -186,6 +186,15 @@ export const poll = ({ commit, state, getters }) => { }); }; +export const fetchData = ({ commit, state, getters }) => { + const requestData = { endpoint: state.notesData.notesPath, lastFetchedAt: state.lastFetchedAt }; + + service.poll(requestData) + .then(resp => resp.json) + .then(data => pollSuccessCallBack(data, commit, state, getters)) + .catch(() => Flash('Something went wrong while fetching latest comments.')); +}; + export const toggleAward = ({ commit, state, getters, dispatch }, { awardName, noteId }) => { commit(types.TOGGLE_AWARD, { awardName, note: getters.notesById[noteId] }); }; diff --git a/spec/javascripts/notes/components/issue_note_app_spec.js b/spec/javascripts/notes/components/issue_note_app_spec.js index 847cb2a23ff..9b48d3817a6 100644 --- a/spec/javascripts/notes/components/issue_note_app_spec.js +++ b/spec/javascripts/notes/components/issue_note_app_spec.js @@ -1,8 +1,10 @@ import Vue from 'vue'; import issueNotesApp from '~/notes/components/issue_notes_app.vue'; +import service from '~/notes/services/issue_notes_service'; +import { keyboardDownEvent } from '../../issue_show/helpers'; import * as mockData from '../mock_data'; -fdescribe('issue_note_app', () => { +describe('issue_note_app', () => { let mountComponent; beforeEach(() => { @@ -52,7 +54,7 @@ fdescribe('issue_note_app', () => { }); }); - fdescribe('render', () => { + describe('render', () => { let vm; const responseInterceptor = (request, next) => { @@ -73,8 +75,18 @@ fdescribe('issue_note_app', () => { afterEach(() => { Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor); }); - it('should render list of notes', () => { - console.log(vm); + + it('should render list of notes', (done) => { + const note = mockData.discussionResponse[0].notes[0]; + + setTimeout(() => { + expect( + vm.$el.querySelector('.main-notes-list .note-header-author-name').textContent.trim(), + ).toEqual(note.author.name); + + expect(vm.$el.querySelector('.main-notes-list .note-text').innerHTML).toEqual(note.note_html); + done(); + }, 0); }); it('should render form', () => { @@ -109,28 +121,43 @@ fdescribe('issue_note_app', () => { describe('update note', () => { describe('individual note', () => { - describe('shortup up key', () => { - it('shows correct editing form when user clicks up', () => { + let vm; + + const responseInterceptor = (request, next) => { + next(request.respondWith(JSON.stringify(mockData.discussionResponse), { + status: 200, + })); + }; + + beforeEach(() => { + Vue.http.interceptors.push(responseInterceptor); + + vm = mountComponent({ + issueData: mockData.issueDataMock, + notesData: mockData.notesDataMock, + userData: mockData.userDataMock, }); + }); - describe('dropdown', () => { - it('renders edit form', () => { - }); + afterEach(() => { + Vue.http.interceptors = _.without(Vue.http.interceptors, responseInterceptor); + }); + + it('renders edit form', () => { + setTimeout(() => { + vm.$el.querySelector('.js-note-edit').click(); + Vue.nextTick(() => { + expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined(); + }); + }, 0); }); it('updates the note and resets the edit form', () => {}); }); describe('dicussion note note', () => { - describe('shortup up key', () => { - it('shows correct editing form when user clicks up', () => { - }); - }); - - describe('dropdown', () => { - it('renders edit form', () => { - }); + it('renders edit form', () => { }); it('updates the note and resets the edit form', () => {}); |