e2e Testing: Stubbing HTTP interactions made by the browser

[kanhirun]

Background

In our code, we dynamically create a <script> that is injected into the DOM to be evaluated by the browser engine—the specific code [source] was copied from Zendesk. When evaluated, the browser makes an HTTP request as normal, and the response is rendered as an <iframe> to display a third-party widget.

There are many reasons to mock out this HTTP interaction:

1. Better reliability because test failures will be isolated from some external factors (i.e. connection)
2. Faster development because of no network latency
3. Better [defect localization](http://xunitpatterns.com/Goals%20of%20Test%20Automation.html#Defect Localization) because it wouldn't test Zendesk, but our application interfacing with Zendesk.

Problem

There doesn't seem to be a tool that makes mocking this specific task convenient. Insofar, the solutions I've discovered are less flexible; they work with stubbing services that are within angular's API (i.e. $http, $httpBackend), but it is unclear if there are tools available that mock requests made directly by the browser.

Here is a list of some tools I've peeked into so far: connect-prism, protractor-http-mock, httpbackend. Out of the three, connect-prism has the best fit being a middleware solution.

Alternative Solutions

1. Change production code to use $http instead of the Zendesk embed code. This increases testability because we would be able to leverage http stubbing libraries.
2. Avoid mocking solution, and simply test through Zendesk. This can be implemented very easily, and gets the job done.

My question: Are there are mocking toolkits or frameworks that can handle this specific task that you know of? If not, what are your thoughts on the alternative solutions or your own suggestion?

[bsouthga]

This sounds like a good idea to me (using $http) -- part of this could also be formatting / commenting the widget initialization code. That might also help find another more elegant solution for this issue: #3