Question

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

如您所知，在＆lt; = 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"

Answer 1

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

//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)

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

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

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

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

1 个答案: