unit-testing - AngularJS 2.0 - 如何测试应用程序？

Question

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

如您所知，在 <=v1.4 中不会有 Controller

我的指令之一的示例代码

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()，那么我该如何测试类中的方法呢？

附言。 我试过使用 Karma-Jasmine，但我必须测试整个指令，如果我这样做，我会得到我在这里写的错误:AngularJS & Karma-Jasmine - How to ignore templateUrl to avoid "Unexpected request: GET .../.html"

Answer 1

你可以用全局名称定义 Controller ，然后在指令中引用它:

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

export default LoginSidebarController

//LoginSidebarDirective.js
export default function() {
    return {
        scope: {},
        templateUrl: 'tpl/path/to/loginSidebar.tpl.html',
        replace: true,
        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)

然后您可以像其他普通 Controller 一样要求 Controller 独立于指令对其进行测试。

作为第二种方式，您可以通过 angular.element().controller('loginSidebar') 方法访问 Controller 。像这样:

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