单元测试 – AngularJS 2.0 – 如何测试应用程序？

我正在构建一个尽可能多的AngularJS 2.0的AngularJS应用程序(使用ES6),因此我不会有很多迁移工作.

如你所知,我们在< = v1.4中知道它们不会有控制器 我的一个指令的示例代码

class LoginSidebar {

    constructor() {

    }

    someMethod(){
    }   
}

LoginSidebar.$inject = [];

export default function() {
    return {
        scope: {},templateUrl: 'tpl/path/to/loginSidebar.tpl.html',replace: true,controller: LoginSidebar,controllerAs: 'loginSidebarCtrl'
    };
};

这就是我的app.js的样子

import loginSidebar from "./js/component/loginSidebar/LoginSidebar.js";

angular.module('myModule',[
    'ngNewRouter','ngAnimate'
])

    .directive("loginSidebar",loginSidebar);

你可以看到我没有.controller(),所以我该如何测试类中的方法？

PS.
我尝试过使用Karma-Jasmine,但我必须测试整个指令,如果我这样做,我会得到我在这里写的错误：AngularJS & Karma-Jasmine – How to ignore templateUrl to avoid “Unexpected request: GET …/.html”

解决方法

您可以使用全局名称定义控制器,然后在指令中引用它：

//LoginSidebarController.js
class LoginSidebarController {
  // controller code here
}

export default LoginSidebarController

//LoginSidebarDirective.js
export default function() {
    return {
        scope: {},controller: 'LoginSidebarController',controllerAs: 'loginSidebarCtrl'
    };
};

//app.js
import loginSidebarDirective from "./js/component/loginSidebar/LoginSidebarDirective.js";
import LoginSidebarController from "./js/component/loginSidebar/LoginSidebarController.js";

angular.module('myModule',[])
     .directive('loginSidebar',loginSidebarDirective)
     .controller('LoginSidebarController',LoginSidebarController)

然后你可以要求控制器作为其他通常的控制器来独立于指令进行测试.

作为第二种方式,您可以通过angular.element().controller(‘loginSidebar’)方法访问控制器.像这样的东西：

var testElm = angular.element('<login-sidebar />');
$compile(testElm);
testElm.controller('loginSidebar')