Trying to test a specific element of the user interface requires a particular request to the backend with predefined data while allowing all other requests to pass through. Here's a more readable version in coffee script:
describe 'select2 combobox widget', ()->
httpBackendMock = () ->
angular.module 'httpBackendMock', ['ngMockE2E', 'fmAppApp']
.run ($httpBackend)->
dummyCategories = [
{id: 1, name: 'foo', icon: '', user_id: 5},
{id: 2, name: 'bar', icon: '', user_id: 5},
{id: 3, name: 'baz', icon: '', user_id: 5},
{id: 4, name: 'quax', icon: '', user_id: 5}
]
$httpBackend.whenGET '/api/categories'
.respond ()->
[200, dummyCategories]
$httpBackend.whenGET /.*/
.passThrough()
$httpBackend.whenGET /^\/views\//
.passThrough()
$httpBackend.whenGET /^\/scripts\/.*/
.passThrough()
$httpBackend.whenGET /^\/scripts\//
.passThrough()
$httpBackend.whenGET /^\/bower_components\//
.passThrough()
$httpBackend.whenGET(/\.html$/).passThrough()
browser
.addMockModule 'httpBackendMock', httpBackendMock
The process involves creating a new module on top of the application module fmAppApp and using Angular ngMockE2E to inform Protractor about it.
To provide a complete picture, here is a simple statement within the describe block:
it 'should allow users to input anything', ()->
browser.get 'http://localhost:9000/#/'
element By.model 'category.selected'
.click()
input = element By.css '.ui-select-search'
input.sendKeys 'newtestcategory'
expect input.getAttribute('value')
.toBe 'newtestcategory'
Running grunt protractor opens the browser, navigates to the specified URL (http://localhost:9000/#/), but results in a blank page and spec failures due to a "NoSuchElementError" for by.model("category.selected").
Unable to use Firebug for debugging, attempting to redirect logging from the browser console reveals an error message:
'http://localhost:9000/bower_components/angular/angular.js 11607:24 Error: Unexpected request: POST /api/login'This prompts the question of whether 'api/login' should be added to passThrough() function.