Question

在阅读角度ngViewSpec.js文件后，我终于想出了如何使用路径，控制器和表单来测试我的控制器。这是我的单元测试：

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;
        }

    });
});

如果我正确理解这里发生了什么：我使用ng-view指令创建一个元素，编译它，将它绑定到rootscope。然后我创建路由和控制器。最后，我设置$ location并完成单元测试的主要部分。

这工作正常，我的测试正在通过。令我困惑的是，我无法看到元素的内容。在路由器更改和$ digest（）之后，我原本期望它们是templates / mainView.html的内容。但我一无所获。我注入$ route来检查$ route.current.templateHtml，我注入$ templateCache来检查。两者都正确。

我不应该期望使用element.html（）找到内容吗？或者我完全误解了这里发生了什么？感谢您的帮助或见解，马库斯

Answer 1

事实证明，魔法在element.siblings（）中。我得到了元素[0]的第一个线索：

<!-- ngView:  -->

这解释了为什么element.html（）和element.text（）未定义

我正在寻找的所有内容都在element.siblings（）[0]下：

<div class="ng-scope" ng-view="">...</div>

我发现了元素[0]技巧： https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

希望这有助于某人，马库斯

Answer 2

在我的情况下，我必须使用ngView[0].nextSibling这是我的测试

  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

单元测试ngView时缺少编译的元素内容

2 个答案: