Question

我正在考虑业力进行单元测试。我想检查状态转换，所以我创建了这个测试。该应用程序开始时会转到landing状态，然后我会转到main。这是一条安全路线，因此会被重定向到login：

it('should go to loginpage  before main', function () {
    $scope.$apply();
    expect($state.current.name).toBe('landing');    
    $state.transitionTo('main');
    $scope.$apply();
    expect($state.current.name).toBe('login');
});

在我的app.js中我有：

 $rootScope.$on('$stateChangeStart', function (event,next) {
        console.log('statechange from:', $state.current.name)
        //console.log('statechange to:',$state)

        if (!next.authenticate) {
            return;
        }

        //if next state is secure then check whether user is logged in:

        if (next.authenticate) {
            event.preventDefault();
            $state.transitionTo('login');
            console.log('goto login');
        }


    });

当我用业力进行测试时，我得到：

Chrome 51.0.2704 (Mac OS X 10.11.4) secure tests should go to loginpage  before main FAILED
    Expected '' to be 'landing'.
        at Object.<anonymous> (/Users/dimitri/karma/basic_karma/appSpec.js:23:37)
    Expected '' to be 'login'.

为什么$state.current.name为空？

github ref：https://github.com/dimitri-a/basic_karma

Answer 1

好像你正试图测试两种不同的东西。首先，您正在测试$stateChangeStart - 事件是否被触发。其次，如果需要时重定向，则会在其中测试自定义处理程序和逻辑。

单元测试是关于测试应用程序的一小部分。 $stateChangeStart - 事件不是您的应用程序的一部分，因为它是ui-router组件的一部分。测试此事件是否触发不是您的责任。更好; ui-router制作了自己的测试用例，用于检查$stateChangeStart是否被触发。您可以自己查看right here。您可以相当确定在需要时触发事件。

那么，我们如何测试您自己的自定义逻辑？首先，我们需要重构$rootScope.$on处理程序。

$rootScope.$on('$stateChangeStart', handleStateChange);

function handleStateChange(event, next) {
    console.log('statechange from:', $state.current.name)
    //console.log('statechange to:',$state)

    if (!next.authenticate) {
        return;
    }

    //if next state is secure then check whether user is logged in:

    if (next.authenticate) {
        event.preventDefault();
        $state.transitionTo('login');
        console.log('goto login');
    }
}

这样，我们将自定义逻辑与Angular $rootScope分离，我们可以自己测试逻辑。别担心，当状态即将发生变化时，你的逻辑仍会运行。

接下来是测试本身。我们不必处理$state.transitionTo因为我们没有测试应用程序的那部分（同样，ui-router有自己的$state.transitionTo测试）。我们甚至不需要使用$scope.$apply。

describe('handleStateChange()', function() {

    var $state;

    beforeEach(inject(function(_$state_) {
        $state          = _$state_;

        // we spy on the $state.transitionTo method, to check if it 
        // has been called by our test case.
        spyOn($state, 'transitionTo');
    }));

    it('should transition to login state when authenticate:true', function () {
        // arrange
        var next = {
            name: 'main',
            authenticate: true
        };

        // act
        handleStateChange({}, next);

        // assert
        // in case of authenticate: true, $state.transitionTo should 
        // have been called with the 'login' name
        expect($state.transitionTo).toHaveBeenCalledWith('login');
    });

    it('should not transition to login state when authenticate:false', function () {
        // arrange
        var next = {
            name: 'landing',
            authenticate: false
        };

        // act
        handleStateChange({}, next);

        // assert
        expect($state.transitionTo).not.toHaveBeenCalledWith('login');
    });

});

如何以角度单位测试状态转换？

1 个答案: