modular-ujs/test/form.spec.js

Rails UJS as JS Modules

describe('Form methods', function () {
  var form, submit, submitForm;

  beforeEach(function () {
    form = document.createElement('form');
    submit = document.createElement('input')
    doc().body.appendChild(form);
    submit.setAttribute('type', 'submit');
    submit.setAttribute('name', 'submit');
    submit.setAttribute('value', 'submit');
    form.appendChild(submit)
    win().submitForm = submitForm = sinon.spy();
  });

  describe('[method=post]', function () {
    beforeEach(function () {
      form.onsubmit = submitForm;
      form.setAttribute('method', 'post');
    });

    describe('no [data-remote]', function () {
      beforeEach(function () {
        form.setAttribute('action', '/echo?callback=parse');
      });

      it('is submitted as a form', function (done) {
        var url = win().location.href;

        window.parse = function (json) {
          expect(url).to.not.equal(win().location.href);
          expect(json).to.deep.equal({
            method: 'post',
            path: '/echo'
          });
          done();
        };

        click(submit);

        expect(submitForm.called).to.be.true;
      });

    });

    describe('[data-remote]', function () {
      beforeEach(function () {
        form.setAttribute('action', '/xhr');
        form.setAttribute('data-remote', 'true');
      });

      it('calls ajax:before event on form with bubbling enabled', function (done) {
        var handler = function (event) {
          expect(event.target).to.equal(form);
          expect(event.bubbles).to.equal(true);

          doc().removeEventListener('ajax:before', handler);
          done();
        };

        doc().addEventListener('ajax:before', handler);

        click(submit);

        expect(submitForm.called).to.be.true;
      });

      it('calls ajax:complete event on form with bubbling enabled', function (done) {
        var handler = function (event) {
          expect(event.target).to.equal(form);
          expect(event.bubbles).to.equal(true);

          doc().removeEventListener('ajax:complete', handler);
          done();
        };

        doc().addEventListener('ajax:complete', handler);

        click(submit);

        expect(submitForm.called).to.be.true;
      });

      it('is sent as XHR request', function (done) {
        var url = win().location.href;

        var handler = function (event) {
          expect(url).to.equal(win().location.href);
          expect(JSON.parse(event.detail.response)).to.deep.equal({
            method: 'post',
            path: '/xhr'
          });

          doc().removeEventListener('ajax:complete', handler);
          done();
        };

        doc().addEventListener('ajax:complete', handler);

        click(submit);

        expect(submitForm.called).to.be.true;
      });

      it('does not pass formdata when there are no form inputs', function (done) {
        // Inputs without name are usually not included in a form POST, we use that to simulate
        // a request without inputs
        submit.removeAttribute('name');

        win().LiteAjax.ajax = sinon.spy();
        click(submit);

        var options = win().LiteAjax.ajax.getCall(0).args[0];
        expect(options.data).to.equal(null);

        expect(submitForm.called).to.be.true;
        done();
      });
    });
  });

});