FE review, replace timeout with nexttick and improve assertion helper. add changelogfix-md-form-tabs-double-click-toggle

2 files changed, 20 insertions, 16 deletions

diff --git a/changelogs/unreleased/fix-md-form-tabs-double-click-toggle.yml b/changelogs/unreleased/fix-md-form-tabs-double-click-toggle.yml
new file mode 100644
index 00000000000..0ec9bcbcde2
--- /dev/null
+++ b/changelogs/unreleased/fix-md-form-tabs-double-click-toggle.yml
@@ -0,0 +1,6 @@
+---
+title: Fix markdown form tabs toggling preview mode from double clicking write mode
+  button
+merge_request: 15119
+author:
+type: fixed
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index d9d02a6754a..95bd2beb42f 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -1,6 +1,11 @@
 import Vue from 'vue';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
-import setTimeoutPromise from '../../../helpers/set_timeout_promise_helper';
+
+function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
+  expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
+  expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
+  expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
+}
 
 describe('Markdown field component', () => {
   let vm;
@@ -107,26 +112,19 @@ describe('Markdown field component', () => {
         }, 0);
       });
 
-      function assertLinks(isWrite) {
-        expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
-        expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
-        expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
-      }
-
       it('clicking already active write or preview link does nothing', (done) => {
         writeLink.click();
-
-        setTimeoutPromise()
-          .then(() => assertLinks(true))
+        Vue.nextTick()
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
           .then(() => writeLink.click())
-          .then(() => setTimeoutPromise())
-          .then(() => assertLinks(true))
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
           .then(() => previewLink.click())
-          .then(() => setTimeoutPromise())
-          .then(() => assertLinks(false))
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
           .then(() => previewLink.click())
-          .then(() => setTimeoutPromise())
-          .then(() => assertLinks(false))
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
           .then(done)
           .catch(done.fail);
       });