Requests with FormData

[solcre]

When dealing with requests with FileUploads, it is very common to use FormData.

Unluckily only Firefox 39 has getters to retrieve the values of the keys that have been appended. The rest of the browsers just handle this data internally in the browser. This makes testing almost impossible as you can't read values from the FormData object. I guess this is something that will change sooner or later as I've seen some work from Mozilla that is being tested in Chrome's Experimental Features, but for we are lost.

We have been using protractor-http-mock for a long time, and we could't test requests with FormData, as the data object of every request is always { append : function append() } which makes all matchs fail.

The workaround we found is to modify FormData's prototype, adding a property called: 'representation' which keeps track of all keys that has been appended. This is a sample code just as a proof of concept:

// Save original append function as _append
FormData.prototype._append = FormData.prototype.append;
// Override append function
FormData.prototype.append = function(key, value) {
    // Add a new property to keep track of changes
    if (!this.representation) {
        this.representation = {};
    }
    // Add appended data to representation object
    this.representation[key]` = value;
    // Call original function
    this._append(key, value);
};

So now we can read the data that was added to FormData just by accessing representation property.

With this done I suggest adding this small change to transformRequest method:

if (requestConfig.data instanceof FormData && requestConfig.data.representation) {
    requestConfig.data = requestConfig.data.representation;
}

With this simple code, we can now test requests with FormData.

Any suggestions are welcome!

If you think this is acceptable, please accept my pull request.

[solcre]

So FormData won't be supported ?

[atecarlos]

That's not why I closed the issue. As we discussed before, we need to come up with a more generic approach. I'll reopen the issue to be clear on that in case anyone else has the same problem.

[solcre]

The Polyfill one ?

[atecarlos]

@solcre I'm working on a solution for this and other similar problems. I will post back here when it's complete.

[solcre]

Ok, I think we should use the methods from the specification and create a polyfill for those browsers that does not support it yet.

El Thursday, March 31, 2016, atecarlos notifications@github.com escribió:

@solcre https://github.com/solcre I'm working on a solution for this and other similar problems. I will post back here when it's complete.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/atecarlos/protractor-http-mock/issues/73#issuecomment-203897716

[image: Solcre Technology Solutions]

Matias Fuster Coll Solcre Technology Solutions www.solcre.com +598 2706 9927 Ing. Luis P. Ponce 1443A 11602 Montevideo, Uruguay

[atecarlos]

Hello @solcre . I just published plugin capabilities for protractor-http-mock.

I believe this will allow you to extend your tests to properly match FormData with your workaround. You may also publish your plugin to NPM so others can take advantage of it.

I'm going to go ahead and close this issue and the associated PR. Open a new issue if you have any problems with plugins.