AngularJS:AngularUI路由器加载多个模板进行测试

我正在尝试对我创建的助手函数执行一个简单的测试：

    function getPostId() {
        return $stateParams._id;
    }

下面是我正在使用的测试，请注意getService只是Angular

inject（）

函数的包装器：

describe('wpApp Router', function() {

    var $state, $stateParams, Router;

    beforeEach(module('wpApp.core.router'));
    beforeEach(function() {
        $state = getService('$state');
        $scope = getService('$rootScope');
        $stateParams = getService('$stateParams');
        Router = getService('Router');
        $templateCache = getService('$templateCache');

        $templateCache.put('/app/sections/posts/list/post-list.html', '');
    });

    it('should provide the current post ID', function() {
        $state.go('posts.details', { _id: 1 });
        $scope.$digest();
        expect(Router.getPostId()).to.equal(1);
    });
});

我的路由器如下所示：

    $stateProvider
        .state('posts', {
            url: '/posts',
            controller: 'PostsListController as postsList',
            templateUrl: '/app/sections/posts/list/post-list.html'
        })

        .state('posts.details', {
            url: '/:_id',
            controller: 'PostDetailsController as postDetails',
            templateUrl: '/app/sections/posts/details/post-details.html'
        })

我正在尝试将当前状态设置为

posts.details

，id为1。然后测试我的助手函数，看看它是否正确地检索ID

但是，我在各州的模板中遇到了错误，如下所示：

意外请求：GET/app/sections/posts/details/post details.html

状态

posts.details

是

posts

的子项，两者都有自己的模板，问题是我无法将两者加载到

templateCache

中，或者至少我不知道如何加载

---

为了完成测试，是否可以同时加载两个模板？

针对您的实际问题，缓存模板的最简单方法是使用以下内容。它将缓存所有应用程序模板，并将它们作为模块提供给测试

然而，根据我从提供的代码中推测，这是不必要的。目前，单元测试实际上是一个集成测试，因为它依赖于

'posts.details'

状态的路由才能通过，而方法本身只与

$stateParams

对象有关

因此，由于

$stateParams

实际上只是一个普通对象，因此更简单（更好）的方法是在测试之前对其进行模拟：

beforeEach(module(function($provide) {
  $provide.value('$stateParams', {
    _id: 1
  });
}));

然后，您可以独立于您的状态测试您的服务方法：

it('should provide the current post ID', function() {
   expect(Router.getPostId()).toEqual(1);
);

---

谢谢你，我还在开始测试，所以这篇文章比你第一次回复我要有用得多。：）