Automatically creating fixtures for your Angular.js karma tests with RequestInterceptor and a transparent PHP Proxy

I wanted to have a method to automagically and transparently save HTTP Request results when browsing my angular app for later use in Karma tests, so I whipped up a little RequestInterceptor that you hook into your angular app and that’s automatically used when you’re accessing your application on localhost.

This interacts with this php proxy: (CURL required)

(make sure to pre-create the /fixtures/ path and make it writeable for PHP)

The nice thing about this is that you can now just browse through your app like normally and save request to third-party API’s locally while clicking through your app.

You will end up with a nicely filled fixtures directory like this:

Now, in your Karma tests, you can easily re-use those:

Don’t forget to edit your karma.conf.js to allow the XHR requests access to (but not auto-include) your fixtures directory!

Hope this helps someone out who’s just starting with this like me :-)

Footnote: if there’s a better way to do this, please enlighten me below!