I'm trying to use TDD with AngularJS using Protractor (and then Karma for unit test). But simple end-to-end tests just don't work as expected. Here's one case, stripped down to the bare minimum. I want to write a test for the expected repeater, and since it's TDD, the repeater does not yet exist.
I expected/would like to get a "No element found for locator: ..." error, but nothing happened until the test failed with a "Failed: undefined is not a function" error, which is not much help.
How do I put in some reasonable tests and have Protractor give me meaningful responses to guide me through the TDD process? And as a side note, why does Protractor not provide an option to resolve all promises automatically -- that would make testing much more straight-forward, IMO.
index.html
<html lang="en">
<head >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app/search.js"></script>
<script src="app/searchCtrl.js"></script>
<title>Testing TDD & AngularJS</title>
</head>
<body ng-app="search">
<div ng-controller='searchCtrl'>
<input type="text" ng-model="searchQuery"/>
<button ng-click="search(searchQuery)" type="submit">search</button>
</div>
<div ng-view>
</div>
</body>
</html>
test.js
describe('basic search test', function(){
var searchResults= null;
beforeEach( function(){
browser.get("/index.html");
searchResults = element.all(by.repeater('result in results'));
// ^-- Expected to get "No element found using locator: xxx"
searchResults.then(function(results) {
expect(results.count().toBe(0)}));
// ^-- Failed: undefined is not a function
var searchQueryInput = $('input');
searchQueryInput.sendKeys('any value');
var searchButton = element(by.buttonText('search'));
searchButton.click();
});
it('has a result', function(){
expect(searchResults.count()).toBe(1);
^-- Expected 0 to be 1.
});
});