单元测试 AngularJS 'config' 使用 Jasmine 用 TypeScript 编写

Question

我目前正在尝试对新 AngularJS 组件的config 进行单元测试。我们使用ui-router 来处理我们应用程序中的路由。我们已经能够成功地为我们之前的所有组件测试它，但是所有这些组件的代码都是用纯 Javascript 编写的。现在我们切换到 TypeScript，我们遇到了一些问题。

这是我们配置模块的 TypeScript 代码：

'use strict';

// @ngInject
class StatetiworkpaperConfig {

    constructor(private $stateProvider: ng.ui.IStateProvider) {
        this.config();
    }

    private config() {
        this.$stateProvider
            .state('oit.stateticolumnar.stateticolumnarworkpaper', {
                url: '/stateticolumnarworkpaper',
                params: { tabToLoad: null, groupTabId: null, jurisdiction: null, showOnlyItemsWithValues: false, showOnlyEditableItems: false},
                template: '<stateticolumnarworkpaper-component active-tab-code="$ctrl.activeTabCode"></stateticolumnarworkpaper-component>',
                component: 'stateticolumnarworkpaperComponent',
                resolve: {
                    onLoad: this.resolves
                }
            });
    }

    //@ngInject
    private resolves($q, $stateParams, ColumnarWorkpaperModel, ChooseTasksModel, localStorageService) {
        // Some not important code
    }
}

angular
    .module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper')
    .config(["$stateProvider", ($stateProvider) => {
        return new StatetiworkpaperConfig($stateProvider);
    }]);

这是 Spec 文件，用 Javascript 编写：

describe('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper', function () {

    beforeEach(module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper'));
    beforeEach(module('oit'));

    var state = 'oit.stateticolumnar.stateticolumnarworkpaper';

    it('has a route', inject(function ($state) {
        var route = $state.get(state);
        expect(route.url).toBe('/stateticolumnarworkpaper');
    }));
});

我的问题是在执行var route = $state.get(state) 行时，因为route 变量始终为空。我可以验证 config() 方法是否正在执行，但我完全不知道为什么 route 在我的测试中始终为空。

仅供参考，这是另一个组件的配置，但使用的是Javascript

'use strict';

angular
    .module('oit.components.binders.binder.dom_tas.taxaccountingsystem.stateworkpapers.stateworkpapersreview')
    .config(stateworkpapersreviewConfig);

function stateworkpapersreviewConfig($stateProvider) {
    $stateProvider
        .state('oit.binder.taxaccountingsystem.stateworkpapersreview', {
            url: '/stateworkpapersreview?reviewType&binderId&year&jurisdiction&chartId&withBalance',
            templateUrl: 'components/binders/binder/dom_tas/taxaccountingsystem/stateworkpapers/stateworkpapersreview/stateworkpapersreview.tpl.html',
            controller: 'StateworkpapersreviewController',
            controllerAs: 'stateworkpapersreviewCtrl',
            resolve: {
                onLoad: resolves
            }
        });

    function resolves($q, $stateParams, StateTiBinderJurisdictionsModel, WorkpaperModel, localStorageService, StateTiFiltersModel) {
        // Some not important code
    }
}

如您所见，代码基本相同，但我仍然可以按照我描述的方式成功测试此组件的 config，但是当我尝试使用 TypeScript 编写的组件时，我得到了我提到的错误。

PD：我知道有几个类似的帖子（比如this 一个），但没有一个涉及 TypeScript，这是我的问题。

Answer 1

TS sn-p 和 JS 的区别很大。

我不确定您为什么要使用类来优化功能？ .config 假设得到一个函数。

你可以写和JS一样的代码，只是.ts后缀，它是一个有效的TS代码。

然后您只需导入该配置函数，将所有可注射剂传递给它并进行测试。