Revert "Delete field_spec.js"winh-danger-locale-test

This reverts commit 916286fc3d87a79db4499579fabe3800f45017fa.

1 files changed, 172 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js
new file mode 100644
index 00000000000..d9d14e7bba7
--- /dev/null
+++ b/spec/frontend/vue_shared/components/markdown/field_spec.js
@@ -0,0 +1,172 @@
+import $ from 'jquery';
+import Vue from 'vue';
+import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+import { mount } from '@vue/test-utils';
+import '~/behaviors/markdown/render_gfm';
+
+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-holder').style.display).toEqual(isWrite ? 'none' : '');
+}
+
+describe('Markdown field component', () => {
+  let vm;
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(
+      {
+        components: {
+          fieldComponent,
+        },
+        data() {
+          return {
+            text: 'testing\n123',
+          };
+        },
+        template: `
+        <field-component
+          markdown-preview-path="/preview"
+          markdown-docs-path="/docs"
+        >
+          <textarea
+            slot="textarea"
+            v-model="text">
+          </textarea>
+        </field-component>
+      `,
+      },
+      {
+        mocks: {
+          $http: {
+            post: () =>
+              Promise.resolve({
+                json() {
+                  return {
+                    body: '<p>markdown preview</p>',
+                  };
+                },
+              }),
+          },
+        },
+      },
+    );
+
+    ({ vm } = wrapper);
+
+    return Vue.nextTick();
+  });
+
+  describe('mounted', () => {
+    it('renders textarea inside backdrop', () => {
+      expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull();
+    });
+
+    describe('markdown preview', () => {
+      let previewLink;
+      let writeLink;
+
+      beforeEach(() => {
+        previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
+        writeLink = vm.$el.querySelector('.nav-links .js-write-link');
+      });
+
+      it('sets preview link as active', () => {
+        previewLink.click();
+
+        return Vue.nextTick().then(() => {
+          expect(previewLink.parentNode.classList.contains('active')).toBeTruthy();
+        });
+      });
+
+      it('shows preview loading text', () => {
+        previewLink.click();
+
+        const holder = vm.$el.querySelector('.md-preview-holder');
+
+        return Vue.nextTick().then(() => {
+          expect(holder.textContent.trim()).toContain('Loading…');
+        });
+      });
+
+      it('renders markdown preview', () => {
+        previewLink.click();
+
+        // wait for request to complete
+        jest.runAllTicks();
+
+        return Vue.nextTick().then(() => {
+          expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
+            '<p>markdown preview</p>',
+          );
+        });
+      });
+
+      it('renders GFM with jQuery', () => {
+        jest.spyOn($.fn, 'renderGFM').mockImplementation(() => {});
+
+        previewLink.click();
+
+        // wait for request to complete
+        jest.runAllTicks();
+
+        return Vue.nextTick()
+          .then(() => Vue.nextTick())
+          .then(() => {
+            expect($.fn.renderGFM).toHaveBeenCalled();
+          });
+      });
+
+      it('clicking already active write or preview link does nothing', () => {
+        writeLink.click();
+        return 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));
+      });
+    });
+
+    describe('markdown buttons', () => {
+      it('converts single words', () => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 7);
+        vm.$el.querySelector('.js-md').click();
+
+        return Vue.nextTick().then(() => {
+          expect(textarea.value).toContain('**testing**');
+        });
+      });
+
+      it('converts a line', () => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 0);
+        vm.$el.querySelectorAll('.js-md')[5].click();
+
+        return Vue.nextTick().then(() => {
+          expect(textarea.value).toContain('*  testing');
+        });
+      });
+
+      it('converts multiple lines', () => {
+        const textarea = vm.$el.querySelector('textarea');
+
+        textarea.setSelectionRange(0, 50);
+        vm.$el.querySelectorAll('.js-md')[5].click();
+
+        return Vue.nextTick().then(() => {
+          expect(textarea.value).toContain('* testing\n* 123');
+        });
+      });
+    });
+  });
+});