diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index 30e7ccc82296a4348adf4e812d2e3f10148fbef0..045077de3838a5b5e9ed9dd0a8e525e7d974d2cc 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/app/assets/javascripts/notes/components/noteable_note.vue
@@ -102,6 +102,7 @@
.then(() => {
this.isEditing = false;
this.isRequesting = false;
+ this.oldContent = null;
$(this.$refs.noteBody.$el).renderGFM();
this.$refs.noteBody.resetAutoSave();
callback();
diff --git a/changelogs/unreleased/42462-edit-note.yml b/changelogs/unreleased/42462-edit-note.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8df98f3ecefb63fe5625596ccd873c6a5064d264
--- /dev/null
+++ b/changelogs/unreleased/42462-edit-note.yml
@@ -0,0 +1,5 @@
+---
+title: Fix cnacel edit note button reverting changes
+merge_request: 42462
+author:
+type: fixed
diff --git a/spec/javascripts/notes/components/note_app_spec.js b/spec/javascripts/notes/components/note_app_spec.js
index 36c56cd386211769c76f5051cfbb14fef3a49ee3..12d180137a0fee9cf4b6ef898eed3baa74407aa1 100644
--- a/spec/javascripts/notes/components/note_app_spec.js
+++ b/spec/javascripts/notes/components/note_app_spec.js
@@ -2,14 +2,29 @@ import _ from 'underscore';
import Vue from 'vue';
import notesApp from '~/notes/components/notes_app.vue';
import service from '~/notes/services/notes_service';
+import '~/render_gfm';
import * as mockData from '../mock_data';
-import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper';
+
+const vueMatchers = {
+ toIncludeElement() {
+ return {
+ compare(vm, selector) {
+ const result = {
+ pass: vm.$el.querySelector(selector) !== null,
+ };
+ return result;
+ },
+ };
+ },
+};
describe('note_app', () => {
let mountComponent;
let vm;
beforeEach(() => {
+ jasmine.addMatchers(vueMatchers);
+
const IssueNotesApp = Vue.extend(notesApp);
mountComponent = (data) => {
@@ -105,7 +120,7 @@ describe('note_app', () => {
});
it('should render loading icon', () => {
- expect(vm.$el.querySelector('.js-loading')).toBeDefined();
+ expect(vm).toIncludeElement('.js-loading');
});
it('should render form', () => {
@@ -118,10 +133,14 @@ describe('note_app', () => {
describe('update note', () => {
describe('individual note', () => {
- beforeEach(() => {
+ beforeEach((done) => {
Vue.http.interceptors.push(mockData.individualNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
vm = mountComponent();
+ setTimeout(() => {
+ vm.$el.querySelector('.js-note-edit').click();
+ Vue.nextTick(done);
+ }, 0);
});
afterEach(() => {
@@ -131,40 +150,32 @@ describe('note_app', () => {
);
});
- it('renders edit form', (done) => {
- setTimeout(() => {
- vm.$el.querySelector('.js-note-edit').click();
- Vue.nextTick(() => {
- expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined();
- done();
- });
- }, 0);
+ it('renders edit form', () => {
+ expect(vm).toIncludeElement('.js-vue-issue-note-form');
});
it('calls the service to update the note', (done) => {
- getSetTimeoutPromise()
- .then(() => {
- vm.$el.querySelector('.js-note-edit').click();
- })
- .then(Vue.nextTick)
- .then(() => {
- vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
- vm.$el.querySelector('.js-vue-issue-save').click();
-
- expect(service.updateNote).toHaveBeenCalled();
- })
- // Wait for the requests to finish before destroying
- .then(Vue.nextTick)
+ vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
+ vm.$el.querySelector('.js-vue-issue-save').click();
+
+ expect(service.updateNote).toHaveBeenCalled();
+ // Wait for the requests to finish before destroying
+ Vue.nextTick()
.then(done)
.catch(done.fail);
});
});
- describe('dicussion note', () => {
- beforeEach(() => {
+ describe('discussion note', () => {
+ beforeEach((done) => {
Vue.http.interceptors.push(mockData.discussionNoteInterceptor);
spyOn(service, 'updateNote').and.callThrough();
vm = mountComponent();
+
+ setTimeout(() => {
+ vm.$el.querySelector('.js-note-edit').click();
+ Vue.nextTick(done);
+ }, 0);
});
afterEach(() => {
@@ -174,30 +185,17 @@ describe('note_app', () => {
);
});
- it('renders edit form', (done) => {
- setTimeout(() => {
- vm.$el.querySelector('.js-note-edit').click();
- Vue.nextTick(() => {
- expect(vm.$el.querySelector('.js-vue-issue-note-form')).toBeDefined();
- done();
- });
- }, 0);
+ it('renders edit form', () => {
+ expect(vm).toIncludeElement('.js-vue-issue-note-form');
});
it('updates the note and resets the edit form', (done) => {
- getSetTimeoutPromise()
- .then(() => {
- vm.$el.querySelector('.js-note-edit').click();
- })
- .then(Vue.nextTick)
- .then(() => {
- vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
- vm.$el.querySelector('.js-vue-issue-save').click();
-
- expect(service.updateNote).toHaveBeenCalled();
- })
- // Wait for the requests to finish before destroying
- .then(Vue.nextTick)
+ vm.$el.querySelector('.js-vue-issue-note-form').value = 'this is a note';
+ vm.$el.querySelector('.js-vue-issue-save').click();
+
+ expect(service.updateNote).toHaveBeenCalled();
+ // Wait for the requests to finish before destroying
+ Vue.nextTick()
.then(done)
.catch(done.fail);
});
diff --git a/spec/javascripts/notes/components/noteable_note_spec.js b/spec/javascripts/notes/components/noteable_note_spec.js
index cb63b64724db4afaac7cfa3d103b082d846177a6..88a7ffb0b9cdf7c84d9d396cc26ee1bbcfa14e5f 100644
--- a/spec/javascripts/notes/components/noteable_note_spec.js
+++ b/spec/javascripts/notes/components/noteable_note_spec.js
@@ -56,4 +56,25 @@ describe('issue_note', () => {
done();
}, 0);
});
+
+ describe('cancel edit', () => {
+ it('restores content of updated note', (done) => {
+ const noteBody = 'updated note text';
+ vm.updateNote = () => Promise.resolve();
+
+ vm.formUpdateHandler(noteBody, null, $.noop);
+
+ setTimeout(() => {
+ expect(vm.note.note_html).toEqual(noteBody);
+
+ vm.formCancelHandler();
+
+ setTimeout(() => {
+ expect(vm.note.note_html).toEqual(noteBody);
+
+ done();
+ });
+ });
+ });
+ });
});