AngularJs 用户界面路由器。 Protractor 测试失败

Question

我正在使用 AngularJs 和来自 Angular-UI 的 ui-router 创建一个 SPA。现在我正在尝试创建身份验证逻辑。

$rootScope.$on("$stateChangeStart", function (event, toState) {
    if(toState.authenticate && !MainService.isAuthenticated()) {
        if($cookieStore.get('authToken')) {
            MainService.loginWithToken($cookieStore.get('authToken'))
            .then(function() {
                $state.go(toState.name);
                event.preventDefault();
            });
        }

        $rootScope.requestPath = toState.name;
        $state.go('public.login');
        event.preventDefault();
    } 

    if(toState.url == '/login' && MainService.isAuthenticated()) {
        $state.go('private.main');
        event.preventDefault();
    }
});

在状态更改时，这会检查状态是否需要身份验证并在必要时转移到登录状态。此外，如果用户已登录，它会阻止进入登录状态。身份验证是通过存储在 cookie 中的 token 完成的。

这是我的 Protractor 测试场景:

describe('Routes', function() {
it('Should go to the selected path if user logged in', function() {
    browser.get('/');
    expect(browser.getLocationAbsUrl()).toMatch("/login");

    browser.manage().addCookie("authToken", "aaa");

    browser.manage().getCookie("authToken").then(function(cookie) {
        expect(cookie.name).toBe('authToken');
        expect(cookie.value).toBe('aaa');
    });

    browser.get('/');
    expect(browser.getLocationAbsUrl()).toMatch("/main");

    browser.get('/#/main');
    expect(browser.getLocationAbsUrl()).toMatch("/main");

    /* This part fails, because, when the user is logged in, 
    he should be transfered to main state, if he is trying to reach the 
    login page. In this failing case, the user is able to reach the 
    /login even if he is  logged in. */

    browser.get('/#/login');
    expect(browser.getLocationAbsUrl()).toMatch("/main");

    browser.manage().deleteCookie("authToken");

    browser.get('/#/login');
    expect(browser.getLocationAbsUrl()).toMatch("/login");

    browser.get('/#/main');
    expect(browser.getLocationAbsUrl()).toMatch("/login");
});

});

当我尝试自己模拟测试行为时，一切正常，但是当我运行 Protractor 时:

Message:
 Expected 'http://localhost/#/login' to match '/main'.

堆栈跟踪:
错误:预期失败

Answer 1

我遇到了解决这个问题的另一个问题。

基本上，您等待新页面中的元素出现，而不是依赖 Protractor 来等待状态/页面完成加载。在撰写此答案时， Protractor 在为 ui-router 完全加载的等待页面上仍然不可靠。 Protractor 等待 $timeout 和 $http 完成。

official doc

所以如果你使用 websocket，它可能不会被覆盖(至少根据我的观察)。

你需要用到的api是browser.wait

    browser.wait(function() {
       return $('#test321').isPresent(); // keeps waiting until this statement resolves to true
      }, 
      timeToWaitInMilliseconds, 
      'message to log to console if element is not present after that time'
    );

    expect($('#test321').isPresent()).toBe(true);  

您可以在以下链接中找到详细信息
Protractor, AngularJS, Parse -- Protractor does not wait for Angular to resolve