Модульное тестирование AngularJS 'config' Написано на TypeScript с использованием Jasmine - PullRequest
Новая
       29

Модульное тестирование AngularJS 'config' Написано на TypeScript с использованием Jasmine

0 голосов
/ 11 мая 2018

Я сейчас пытаюсь провести модульное тестирование config нового компонента AngularJS. Мы используем 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 one), но ни один из них не касается TypeScript, который является моей проблемой.

1 Ответ

0 голосов
/ 12 мая 2018

Существует огромная разница между фрагментом кода TS и фрагментом JS.

Я не уверен, почему вы используете класс для элиминации функции?.config предположим, чтобы получить функцию.

Вы можете написать тот же код, что и в JS, только с суффиксом .ts, это действительный код TS.

Тогда вы можете просто импортировать этотФункция config, передайте все инъекции и протестируйте.

...