代码之家 › 专栏 › 技术社区 › Neil

AngularJS:Angular UI Router加载多个模板进行测试

angular-template karma-runner angular-ui-router angularjs

Neil · 技术社区 · 10 年前

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

    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页,共1页。然后测试我的助手函数,看看它是否正确地检索了ID。

然而,我在状态模板中遇到错误,如下所示: Unexpected request: GET /app/sections/posts/details/post-details.html

该州 后详细信息 是的孩子 posts 两者都有自己的模板,问题是我无法将两者加载到 templateCache 或者至少我不知道该怎么做。

是否可以加载两个模板以完成测试?

1 回复 | 直到 10 年前

scarlz 10 年前

针对您的实际问题,缓存模板的最简单方法是使用以下方法 karma-ng-html2js-preprocessor 。它将缓存所有应用程序模板,并将其作为模块提供给测试。

然而,根据我从所提供的代码推测,这是不必要的。目前,您的单元测试实际上是一个集成测试,因为它依赖于 'posts.details' 状态,但方法本身只与 $stateParams 对象

因此,相反 $状态参数 实际上只是一个简单的对象,一个更简单(更好)的方法就是在测试之前模拟它:

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

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

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