Dont emit toggle-markdown event if current target is already active and add specs

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -16,12 +16,18 @@
       toolbarButton,
     },
     methods: {
+      isMarkdownForm(form) {
+        return form && !form.find('.js-vue-markdown-field').length;
+      },
+
+      isActiveTarget(target) {
+        return target.closest('li').classList.contains('active');
+      },
+
       toggleMarkdownPreview(e, form) {
-        if (form && !form.find('.js-vue-markdown-field').length) {
-          return;
-        } else if (e.target.blur) {
-          e.target.blur();
-        }
+        if (e.target.blur) e.target.blur();
+
+        if (this.isMarkdownForm(form) || this.isActiveTarget(e.target)) return;
 
         this.$emit('toggle-markdown');
       },

spec/javascripts/vue_shared/components/markdown/field_spec.js

@@ -39,6 +39,7 @@ describe('Markdown field component', () => {
 
     describe('markdown preview', () => {
       let previewLink;
+      let writeLink;
 
       beforeEach(() => {
         spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
@@ -52,6 +53,7 @@ describe('Markdown field component', () => {
         }));
 
         previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+        writeLink = vm.$el.querySelector('.nav-links li:nth-child(1) a');
       });
 
       it('sets preview link as active', (done) => {
@@ -103,6 +105,40 @@ describe('Markdown field component', () => {
           done();
         }, 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();
+
+        setTimeout(() => {
+          assertLinks(true);
+
+          writeLink.click();
+
+          setTimeout(() => {
+            assertLinks(true);
+
+            previewLink.click();
+
+            setTimeout(() => {
+              assertLinks(false);
+
+              previewLink.click();
+
+              setTimeout(() => {
+                assertLinks(false);
+
+                done();
+              });
+            });
+          });
+        });
+      });
     });
 
     describe('markdown buttons', () => {