在angular1.5 x上下文中,ES6控制器的茉莉花单元测试失败,但有例外

时间:2016-09-23 22:32:13

标签: angularjs unit-testing ecmascript-6 karma-jasmine angular-mock

我有角度1.5控制器的ES6类。我正在尝试使用jasmine / karma和angular-mocks编写相同的单元测试。但是,我不知道如何为$ inject注入我的依赖项(如$ filter)添加单元测试。我该如何测试,最初this.users是一个数组。另外我想知道如何测试生命周期钩子,如$ inject和$ destroy。

目前,当我运行这些测试时,我得到以下异常,我不明白。我是编写单元测试的新手。我看到它无法找到对象

作为TypeError:无法读取属性'用户'未定义的         在对象。 (测试context.js:35022:37)

Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'fn' is not a function, got undefined
http://errors.angularjs.org/1.5.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20undefined
    at test-context.js:141:13
    at assertArg (test-context.js:1965:12)
    at assertArgFn (test-context.js:1975:4)
    at Function.annotate (test-context.js:4039:6)
    at Function.angular.injector.$$annotate (test-context.js:34574:37)
    at injectionArgs (test-context.js:4752:37)
    at Object.invoke (test-context.js:4783:19)
    at test-context.js:4697:46
    at forEach (test-context.js:394:21)
    at loadModules (test-context.js:4674:6)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=undefined&p1=Error%3A%20%5Bng%3Aareq%5D%20Argument%20'fn'%20is%20not%20a%20function%2C%20got%20undefined%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520undefined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A141%3A13%0A%20%20%20%20at%20assertArg%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A1965%3A12)%0A%20%20%20%20at%20assertArgFn%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A1975%3A4)%0A%20%20%20%20at%20Function.annotate%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A4039%3A6)%0A%20%20%20%20at%20Function.angular.injector.%24%24annotate%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A34574%3A37)%0A%20%20%20%20at%20injectionArgs%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A4752%3A37)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A4783%3A19)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A4697%3A46%0A%20%20%20%20at%20forEach%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A394%3A21)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A9876%2Fbase%2Ftest-context.js%3Fbaf81e3c4b3650402340117bf441fdc795153a18%3A4674%3A6)
    at test-context.js:141:13
    at forEach (test-context.js:394:21)
    at loadModules (test-context.js:4674:6)
    at test-context.js:4713:16
    at Object.createInjector [as injector] (test-context.js:4596:20)
    at Object.workFn (test-context.js:34913:53)
    at window.inject.angular.mock.inject (test-context.js:34893:43)
    at Object.<anonymous> (test-context.js:35013:14)
TypeError: Cannot read property 'users' of undefined
    at Object.<anonymous> (test-context.js:35022:37)

Chrome 53.0.2785(Mac OS X 10.10.5):执行3 of 3(1失败)

这是ES6 Class

class UsersCtrl {
    constructor($filter) {
        this.i18n = $filter('i18n');
        this.users = [];
    }
//Life cycle Hooks: Initialization
$onInit() {
    this.users = [
        {name: this.i18n('USERS')}
    ];
}
//Life cycle Hooks: Destroy
  $onDestroy() {
  }
}

  UsersCtrl.$inject = ['$filter'];

 angular.module('app', []).controller('UsersCtrl',UsersCtrl);

export default UsersCtrl;

我的单元测试如下

Import UsersCtrl from './users-controller.js';

describe("given a new Users Page", () => {

var UserController;

beforeEach(() => {
    angular.mock.module('app', []);
});

describe("when initialising  has completed", () => {

    beforeEach(() => {
        inject(($rootScope, $controller, $filter) => {
            const scope = $rootScope.$new();
            const filter = $filter
            UserController = $controller("UsersCtrl", { $scope: scope, $filter: filter});
        });
    });

    it("then users array for tab content should be empty initially", () => {
        const expectedActive = [];       
        expect(UserController.users).toEqual(expectedActive);
    });
});

});

0 个答案:

没有答案