Missing compiled element contents when unit testing ngView - angularjs

Question

After reading the angular ngViewSpec.js file, I've finally figured how to test my controller with routes, controllerAs and forms. Here is my unit test:
describe("mainControllerSpec", function() {
var element;
beforeEach(module("nisArch"));
beforeEach(module("ngRoute"));
it("clickSearch should change location with limitResults true", function () {
var path, search;
var ctrl;
module(function () {
return function ($rootScope, $compile) {
element = $compile("<div ng-view></div>")($rootScope);
};
});
module(function ($compileProvider, $routeProvider) {
$routeProvider.when("/", {
title: "Home",
controller: getController,
controllerAs: "vm",
templateUrl: "templates/mainView.html"
});
});
inject(function ($location, $controller, $rootScope, $route, $templateCache) {
ctrl = $controller("mainController", { $location: $location });
$location.path("/");
$rootScope.$digest();
//breakpoint here. element.html() == "".
//Expected contents of $templateCache.get(...)
ctrl.queryString = "AS65402";
ctrl.clickSearch();
path = $location.path();
search = $location.search();
expect(path).toEqual("/Search");
expect(search).toEqual({ q: "AS65402", limitResults: "true" });
});
function getController() {
return ctrl;
}
});
});
If I understand correctly what's going on here:
I create an element with my ng-view directive, compile it, bind it to the rootscope. I then create the route and controller. Finally I set the $location and do the main part of my unit test.
This is working fine and my test is passing. What's puzzling me is that I can't see the contents of element. I would have expected them to be the contents of templates/mainView.html after the router change and $digest(). But I get nothing. I injected $route to check $route.current.templateHtml and I injected $templateCache to check that. Both correct.
Should I not expect to find the contents using element.html()?
Or have I completely misunderstood what's going on here?
Thanks for any help or insight,
Marcus

Answer 1

It turns out that the magic is in element.siblings(). I got the first clue with element[0]:
<!-- ngView: -->
Which explains why element.html() and element.text() were undefined
Everything I was looking for is under element.siblings()[0]:
<div class="ng-scope" ng-view="">...</div>
I found the element[0] trick from:
https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/
Hope this helps someone,
Marcus

Answer 2

In my case I had to use ngView[0].nextSibling here is my test
it 'check view content', ->
inject ($route, $location, $rootScope, $httpBackend, $compile)->
ngView = $compile("<div ng-view></div>")($rootScope)
using $httpBackend, ->
#.expectGET(url_Template).respond(html)
#.expectGET(url_Data ).respond test_Data
$location.path(url)
$httpBackend.flush()
element = ngView[0].nextSibling
$scope = angular.element(element).scope()
$scope.team.assert_Is 'team-A'
$scope.table.assert_Is metadata: 42