BigW Consortium Gitlab

gl_form_spec.js 3.99 KB
Newer Older
1 2 3 4
import autosize from 'vendor/autosize';
import '~/gl_form';
import '~/lib/utils/text_utility';
import '~/lib/utils/common_utils';
5

6
window.autosize = autosize;
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

describe('GLForm', () => {
  const global = window.gl || (window.gl = {});
  const GLForm = global.GLForm;

  it('should be defined in the global scope', () => {
    expect(GLForm).toBeDefined();
  });

  describe('when instantiated', function () {
    beforeEach((done) => {
      this.form = $('<form class="gfm-form"><textarea class="js-gfm-input"></form>');
      this.textarea = this.form.find('textarea');
      spyOn($.prototype, 'off').and.returnValue(this.textarea);
      spyOn($.prototype, 'on').and.returnValue(this.textarea);
      spyOn($.prototype, 'css');
      spyOn(window, 'autosize');

      this.glForm = new GLForm(this.form);
      setTimeout(() => {
        $.prototype.off.calls.reset();
        $.prototype.on.calls.reset();
        $.prototype.css.calls.reset();
30
        window.autosize.calls.reset();
31 32 33 34
        done();
      });
    });

35
    describe('setupAutosize', () => {
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
      beforeEach((done) => {
        this.glForm.setupAutosize();
        setTimeout(() => {
          done();
        });
      });

      it('should register an autosize event handler on the textarea', () => {
        expect($.prototype.off).toHaveBeenCalledWith('autosize:resized');
        expect($.prototype.on).toHaveBeenCalledWith('autosize:resized', jasmine.any(Function));
      });

      it('should register a mouseup event handler on the textarea', () => {
        expect($.prototype.off).toHaveBeenCalledWith('mouseup.autosize');
        expect($.prototype.on).toHaveBeenCalledWith('mouseup.autosize', jasmine.any(Function));
      });

      it('should autosize the textarea', () => {
54
        expect(window.autosize).toHaveBeenCalledWith(jasmine.any(Object));
55 56 57 58 59 60 61
      });

      it('should set the resize css property to vertical', () => {
        expect($.prototype.css).toHaveBeenCalledWith('resize', 'vertical');
      });
    });

62
    describe('setHeightData', () => {
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
      beforeEach(() => {
        spyOn($.prototype, 'data');
        spyOn($.prototype, 'outerHeight').and.returnValue(200);
        this.glForm.setHeightData();
      });

      it('should set the height data attribute', () => {
        expect($.prototype.data).toHaveBeenCalledWith('height', 200);
      });

      it('should call outerHeight', () => {
        expect($.prototype.outerHeight).toHaveBeenCalled();
      });
    });

78
    describe('destroyAutosize', () => {
79 80 81 82 83
      describe('when called', () => {
        beforeEach(() => {
          spyOn($.prototype, 'data');
          spyOn($.prototype, 'outerHeight').and.returnValue(200);
          spyOn(window, 'outerHeight').and.returnValue(400);
84
          spyOn(window.autosize, 'destroy');
85 86 87 88 89 90 91 92 93 94 95 96 97

          this.glForm.destroyAutosize();
        });

        it('should call outerHeight', () => {
          expect($.prototype.outerHeight).toHaveBeenCalled();
        });

        it('should get data-height attribute', () => {
          expect($.prototype.data).toHaveBeenCalledWith('height');
        });

        it('should call autosize destroy', () => {
98
          expect(window.autosize.destroy).toHaveBeenCalledWith(this.textarea);
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
        });

        it('should set the data-height attribute', () => {
          expect($.prototype.data).toHaveBeenCalledWith('height', 200);
        });

        it('should set the outerHeight', () => {
          expect($.prototype.outerHeight).toHaveBeenCalledWith(200);
        });

        it('should set the css', () => {
          expect($.prototype.css).toHaveBeenCalledWith('max-height', window.outerHeight);
        });
      });

      it('should return undefined if the data-height equals the outerHeight', () => {
        spyOn($.prototype, 'outerHeight').and.returnValue(200);
        spyOn($.prototype, 'data').and.returnValue(200);
117
        spyOn(window.autosize, 'destroy');
118
        expect(this.glForm.destroyAutosize()).toBeUndefined();
119
        expect(window.autosize.destroy).not.toHaveBeenCalled();
120 121 122 123
      });
    });
  });
});