Merge branch 'fix-md-form-tabs-double-click-toggle' into 'master'

Fix md form tab double click toggle

Closes #39624

See merge request gitlab-org/gitlab-ce!15119

2 files changed, 32 insertions, 5 deletions

diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index 65c49b9f30b..24209be83fe 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -1,6 +1,12 @@
 import Vue from 'vue';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 
+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;
 
@@ -39,6 +45,7 @@ describe('Markdown field component', () => {
 
     describe('markdown preview', () => {
       let previewLink;
+      let writeLink;
 
       beforeEach(() => {
         spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
@@ -53,7 +60,8 @@ describe('Markdown field component', () => {
           });
         }));
 
-        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+        previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
+        writeLink = vm.$el.querySelector('.nav-links .js-write-link');
       });
 
       it('sets preview link as active', (done) => {
@@ -105,6 +113,23 @@ describe('Markdown field component', () => {
           done();
         }, 0);
       });
+
+      it('clicking already active write or preview link does nothing', (done) => {
+        writeLink.click();
+        Vue.nextTick()
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
+          .then(() => writeLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
+          .then(() => previewLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
+          .then(() => previewLink.click())
+          .then(() => Vue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
+          .then(done)
+          .catch(done.fail);
+      });
     });
 
     describe('markdown buttons', () => {
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js
index 7110ff36937..edebd822295 100644
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js
@@ -43,11 +43,13 @@ describe('Markdown field header component', () => {
   it('emits toggle markdown event when clicking preview', () => {
     spyOn(vm, '$emit');
 
-    vm.$el.querySelector('li:nth-child(2) a').click();
+    vm.$el.querySelector('.js-preview-link').click();
 
-    expect(
-      vm.$emit,
-    ).toHaveBeenCalledWith('toggle-markdown');
+    expect(vm.$emit).toHaveBeenCalledWith('preview-markdown');
+
+    vm.$el.querySelector('.js-write-link').click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('write-markdown');
   });
 
   it('blurs preview link after click', (done) => {