The following code in the $timeout is never called. I can put any wrong test I like in there and the test always passes (there is a similar question (Karma e2e testing: how to know when the DOM is ready?) but it does not provide a solution):
it('should display a filter row when attribute sg-live-filtering is present', function()
{
angular.mock.inject(function($compile, $rootScope, $timeout) {
var elem = $compile('<div sg-grid sg-data="api/grid/accounts" sg-live-filtering></div>')(scope); // the angular-kendo grid
$rootScope.$apply();
var table = elem.find('table[role="grid"]'); // find the kendo grid
expect(table.length).toBe(1);
var header = table.find('thead'); // find the grid's table header
expect(header.length).toBe(1);
$timeout(function () {
// get the second row in the header and check it has a specific class
expect(header.find('tr').eq(1).hasClass('sg-grid-filter-row')).toBeTruthy();
// e.g. I could do this and it would still pass!!!
expect(header.find('tr').eq(500));
});
}
}
PhantomJS 1.9.2 (Windows 7): Executed 1 of 871 (skipped 383) SUCCESS (0 secs / 0
This is what it looks like in the browser:
The kendo grid is created using a standard angularjs directive:
angular.module('sgComponents').directive('sgGrid', [
templateUrl: 'sg-grid.html',
// lots of kendo code follows to build the grid
]);
The external sg-grid.html template:
<div sg-grid sg-data="api/grid/accounts"
sg-live-filtering> <!-- the attribute I want to test -->
</div>
When the directive code runs, there is a check to see if the sg-live-filtering attr is present. If it is, a utility function is called to append the row you see highlighted in the image to the grid's table header:
if (attrs.sgLiveFiltering) {
/*
timeout is needed to ensure DOM is ready. COULD THIS BE THE PROBLEM?
*/
$timeout(function () {
/*
this function adds the filter row to the grid.
THE NEW ROW HAS CLASS 'sg-grid-filter-row' THAT I USE FOR TESTING
*/
buildGridFilterRow(elm, scope, attrs);
});
}
Can you display your test code ??? Because you have to wait in order to execute timeout or just use $timeout.flush(); Here is an example: Unit testing an asynchronous service in angularjs