AsyncForm Component

async-form.js

define(function(require) {
    'use strict';

    var defineComponent = require('flight/lib/component');

    function AsyncForm() {
        this.defaultAttrs({
            'broadcastEvent': 'uiFormProcessed'
        });

        this.after('initialize', function() {
            this.on(this.node, 'submit', this.asyncSubmit.bind(this));
        });

        this.asyncSubmit = function(event) {
            var self = this;
            event.preventDefault();
            $.ajax({
                'url': this.$node.attr('action'),
                'dataType': 'json',
                'data': this.$node.serializeArray(),
                'type': this.$node.attr('method')
            }).done(function(response, data) {
                this.$node.trigger(this.attr.broadcastEvent, data);
            }.bind(this)).fail(function() {
                // error handling excluded for brevity
            });
        };
    }

    return defineComponent(AsyncForm);
});

async-form.spec.js

describeComponent('component_ui/async-form', function () {
    beforeEach(function () {
        setupComponent(
            '<form action="lulz.aspx" method="post"><input type="submit"><input name="foo" value="bar" type="hidden"></form>'
        );
        jasmine.Ajax.useMock();
    });

    it('posts to form action', function() {
        this.component.$node.find('[type="submit"]').click();
        var request = mostRecentAjaxRequest();
        request.response({ status: 200 , responseText: '{}'});
        expect(request.url).toBe(this.component.$node.attr('action'));
    });
});