Merge branch 'issue-form-multiple-line-markdown' into 'master'

Fixed multi-line markdown in issue edit form

Closes #34318

See merge request !12458

1 files changed, 69 insertions, 36 deletions

diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index 4bbaff561fc..291e19c9f3c 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -4,47 +4,33 @@ import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 describe('Markdown field component', () => {
   let vm;
 
-  beforeEach(() => {
+  beforeEach((done) => {
     vm = new Vue({
-      render(createElement) {
-        return createElement(
-          fieldComponent,
-          {
-            props: {
-              markdownPreviewUrl: '/preview',
-              markdownDocs: '/docs',
-            },
-          },
-          [
-            createElement('textarea', {
-              slot: 'textarea',
-            }),
-          ],
-        );
+      data() {
+        return {
+          text: 'testing\n123',
+        };
       },
-    });
-  });
-
-  it('creates a new instance of GL form', (done) => {
-    spyOn(gl, 'GLForm');
-    vm.$mount();
-
-    Vue.nextTick(() => {
-      expect(
-        gl.GLForm,
-      ).toHaveBeenCalled();
-
-      done();
-    });
+      components: {
+        fieldComponent,
+      },
+      template: `
+        <field-component
+          marodown-preview-url="/preview"
+          markdown-docs="/docs"
+        >
+          <textarea
+            slot="textarea"
+            v-model="text">
+          </textarea>
+        </field-component>
+      `,
+    }).$mount();
+
+    Vue.nextTick(done);
   });
 
   describe('mounted', () => {
-    beforeEach((done) => {
-      vm.$mount();
-
-      Vue.nextTick(done);
-    });
-
     it('renders textarea inside backdrop', () => {
       expect(
         vm.$el.querySelector('.zen-backdrop textarea'),
@@ -117,5 +103,52 @@ describe('Markdown field component', () => {
         });
       });
     });
+
+    describe('markdown buttons', () => {
+      it('converts single words', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 7);
+        vm.$el.querySelector('.js-md').click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('**testing**');
+
+          done();
+        });
+      });
+
+      it('converts a line', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 0);
+        vm.$el.querySelectorAll('.js-md')[4].click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('*  testing');
+
+          done();
+        });
+      });
+
+      it('converts multiple lines', (done) => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 50);
+        vm.$el.querySelectorAll('.js-md')[4].click();
+
+        Vue.nextTick(() => {
+          expect(
+            textarea.value,
+          ).toContain('* testing\n* 123');
+
+          done();
+        });
+      });
+    });
   });
 });