summaryrefslogtreecommitdiff
path: root/spec/javascripts/vue_shared/components/markdown/field_spec.js
blob: 4bbaff561fcada4b98195c37add786dbd57f2ed7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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();
        });
      });
    });
  });
});