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变量始终为null。我可以验证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片段和JS片段之间存在巨大差异。

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

您可以使用.ts后缀编写与JS相同的代码，它是有效的TS代码。

然后您可以导入该配置功能，将所有注射剂传递给它并进行测试。

单元测试AngularJS'config'使用Jasmine

1 个答案: