Merge remote-tracking branch 'upstream/master' into 24196-protected-variables

* upstream/master: (141 commits)
  Add Documentation for GIT_CHECKOUT variable
  Ui improvements for count badges and permission badges
  Rename the other jobs
  Update jobs_spec for changes from builds_spec
  Update docs related to protected actions
  Add changelog for protected branches abilities fix
  Ask for an example project for bug reports
  Center loading spinner in issuable filters
  Fix chat commands specs related to protected actions
  Fix builds controller specs related to protected actions
  Fix pipeline retry specs related to protected actions
  Fix environment model specs related to protected actions
  Fix build factory specs related to protected actions
  Fix job play service specs related to protected actions
  Fix play status specs related to protected actions
  Fix deploy chat command specs for protected actions
  Fix environment specs related to protected actions
  Use another scope to add the - prefix, feedback:
  Fix pipeline processing specs related to protected actions
  Fix build entity specs related to protected actions
  ...

1 files changed, 121 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
new file mode 100644
index 00000000000..4bbaff561fc
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -0,0 +1,121 @@
+import Vue from 'vue';
+import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+
+describe('Markdown field component', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = new Vue({
+      render(createElement) {
+        return createElement(
+          fieldComponent,
+          {
+            props: {
+              markdownPreviewUrl: '/preview',
+              markdownDocs: '/docs',
+            },
+          },
+          [
+            createElement('textarea', {
+              slot: 'textarea',
+            }),
+          ],
+        );
+      },
+    });
+  });
+
+  it('creates a new instance of GL form', (done) => {
+    spyOn(gl, 'GLForm');
+    vm.$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        gl.GLForm,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  describe('mounted', () => {
+    beforeEach((done) => {
+      vm.$mount();
+
+      Vue.nextTick(done);
+    });
+
+    it('renders textarea inside backdrop', () => {
+      expect(
+        vm.$el.querySelector('.zen-backdrop textarea'),
+      ).not.toBeNull();
+    });
+
+    describe('markdown preview', () => {
+      let previewLink;
+
+      beforeEach(() => {
+        spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
+          resolve({
+            json() {
+              return {
+                body: '<p>markdown preview</p>',
+              };
+            },
+          });
+        }));
+
+        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+      });
+
+      it('sets preview link as active', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            previewLink.parentNode.classList.contains('active'),
+          ).toBeTruthy();
+
+          done();
+        });
+      });
+
+      it('shows preview loading text', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').textContent.trim(),
+          ).toContain('Loading...');
+
+          done();
+        });
+      });
+
+      it('renders markdown preview', (done) => {
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').innerHTML,
+          ).toContain('<p>markdown preview</p>');
+
+          done();
+        });
+      });
+
+      it('renders GFM with jQuery', (done) => {
+        spyOn($.fn, 'renderGFM');
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            $.fn.renderGFM,
+          ).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+  });
+});