<commit_before>import Vue from 'vue';
import fieldComponent from '~/vue_shared/components/markdown/field.vue';

describe('Markdown field component', () => {
  let vm;

  beforeEach((done) => {
    vm = new Vue({
      data() {
        return {
          text: '<PASSWORD>',
        };
      },
      components: {
        fieldComponent,
      },
      template: `
        <field-component
          markdown-preview-path="/preview"
          markdown-docs-path="/docs"
        >
          <textarea
            slot="textarea"
            v-model="text">
          </textarea>
        </field-component>
      `,
    }).$mount();

    Vue.nextTick(done);
  });

  describe('mounted', () => {
    it('renders textarea inside backdrop', () => {
      expect(
        vm.$el.querySelector('.zen-backdrop textarea'),
      ).not.toBeNull();
    });

    describe('markdown preview', () => {
      let previewLink;
      let writeLink;

      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');
        writeLink = vm.$el.querySelector('.nav-links li:nth-child(1) 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();
        }, 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();
              });
            });
          });
        });
      });
    });<commit_msg>Use settimeoutpromise in field_spec<commit_after>import Vue from 'vue';
import fieldComponent from '~/vue_shared/components/markdown/field.vue';
import setTimeoutPromise from '../../../helpers/set_timeout_promise_helper';

describe('Markdown field component', () => {
  let vm;

  beforeEach((done) => {
    vm = new Vue({
      data() {
        return {
          text: 'testing\n123',
        };
      },
      components: {
        fieldComponent,
      },
      template: `
        <field-component
          markdown-preview-path="/preview"
          markdown-docs-path="/docs"
        >
          <textarea
            slot="textarea"
            v-model="text">
          </textarea>
        </field-component>
      `,
    }).$mount();

    Vue.nextTick(done);
  });

  describe('mounted', () => {
    it('renders textarea inside backdrop', () => {
      expect(
        vm.$el.querySelector('.zen-backdrop textarea'),
      ).not.toBeNull();
    });

    describe('markdown preview', () => {
      let previewLink;
      let writeLink;

      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');
        writeLink = vm.$el.querySelector('.nav-links li:nth-child(1) 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();
        }, 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();

        setTimeoutPromise()
          .then(() => assertLinks(true))
          .then(() => writeLink.click())
          .then(() => setTimeoutPromise())
          .then(() => assertLinks(true))
          .then(() => previewLink.click())
          .then(() => setTimeoutPromise())
          .then(() => assertLinks(false))
          .then(() => previewLink.click())
          .then(() => setTimeoutPromise())
          .then(() => assertLinks(false))
          .then(done)
          .catch(done.fail);
      });
    });
{'fraction_non_alphanumeric': 0.17334112832505116, 'fraction_numerical': 0.0013154048523823444, 'mean_word_length': 1.7197933227344993, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 68, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5324013', 'n_tokens_mistral': 1908, 'n_tokens_neox': 1880, 'n_words': 308}