当前位置: 首页 > 面试题库 >

Angular ui路由器单元测试(指向URL的状态)

梁丘俊材
2023-03-14
问题内容

我在应用程序中测试路由器时遇到了一些麻烦,该应用程序是基于Angular
ui路由器构建的。我要测试的是状态转换是否适当地更改了URL(稍后将进行更复杂的测试,但这是我开始的地方。)

这是我的应用程序代码的相关部分:

angular.module('scrapbooks')
 .config( function($stateProvider){
    $stateProvider.state('splash', {
       url: "/splash/",
       templateUrl: "/app/splash/splash.tpl.html",
       controller: "SplashCtrl"
    })
 })

和测试代码:

it("should change to the splash state", function(){
  inject(function($state, $rootScope){
     $rootScope.$apply(function(){
       $state.go("splash");
     });
     expect($state.current.name).to.equal("splash");
  })
})

关于Stackoverflow的类似问题(以及官方ui路由器测试代码)表明,将$ state.go调用包装在$
apply中应该足够了。但是我已经做到了,状态仍然没有更新。$ state.current.name保持为空。


问题答案:

同样也遇到了这个问题,最终找到了解决方法。

这是一个示例状态:

angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('myState', {
        url: '/state/:id',
        templateUrl: 'template.html',
        controller: 'MyCtrl',
        resolve: {
            data: ['myService', function(service) {
                return service.findAll();
            }]
        }
    });
}]);

下面的单元测试将涵盖测试带参数的URL,以及执行注入自身依赖关系的解析:

describe('myApp/myState', function() {

  var $rootScope, $state, $injector, myServiceMock, state = 'myState';

  beforeEach(function() {

    module('myApp', function($provide) {
      $provide.value('myService', myServiceMock = {});
    });

    inject(function(_$rootScope_, _$state_, _$injector_, $templateCache) {
      $rootScope = _$rootScope_;
      $state = _$state_;
      $injector = _$injector_;

      // We need add the template entry into the templateCache if we ever
      // specify a templateUrl
      $templateCache.put('template.html', '');
    })
  });

  it('should respond to URL', function() {
    expect($state.href(state, { id: 1 })).toEqual('#/state/1');
  });

  it('should resolve data', function() {
    myServiceMock.findAll = jasmine.createSpy('findAll').and.returnValue('findAll');
    // earlier than jasmine 2.0, replace "and.returnValue" with "andReturn"

    $state.go(state);
    $rootScope.$digest();
    expect($state.current.name).toBe(state);

    // Call invoke to inject dependencies and run function
    expect($injector.invoke($state.current.resolve.data)).toBe('findAll');
  });
});


 类似资料:
  • 问题内容: 正如我们在http://docs.angularjs.org/tutorial/step_07中看到的那样, 建议通过e2e测试来完成路由测试, 但是,我认为’$ routeProvider’配置是通过单个函数function($ routeProvider)完成的,我们应该能够在不涉及浏览器的情况下进行单元测试,因为我认为路由功能不需要浏览器DOM。 例如, 当url为/ foo时,

  • 问题内容: 这是一个具有提交功能的控制器: 这是我的考验 我得到的错误是: views / appBar.html是我的templateUrl: 因此,以某种方式ui-router使我的$ httpBackend指向此位置而不是我的提交功能。使用$ httpBackend进行的所有测试都存在相同的问题。 有什么解决办法吗? 问题答案: 采取这个要点 https://gist.github.com/

  • 问题内容: 我是AngularUI路由器的新手,并希望将其用于以下情况: 所有页面 共有的布局包括一个顶部导航栏,顶部导航栏包含一个右侧带有按钮的菜单,以及一个内容部分,用于填充下面的空间。该页面包含我映射到UI路由器状态的多个页面(第1页,第2页,…)。每个页面可以具有自己的菜单项和内容。该 菜单需要与内容共享范围 ,因为它们交互(例如保存按钮提交的内容形式,它应该只如果表单有效启用)。 HTM

  • 在以下React应用程序中,有两个路由URLhttp://myapp 正确布线到布局构件。但是,URLhttp://myapp/login 也路由到布局组件,而不是登录。如果我将path=“/login”更改为“/sign”,它将正确路由到登录组件。 React路由器中的“/login”路径将其路由到路由是否有特殊之处?或者我设置这个路由的方式有错误吗?

  • 英文原文:http://emberjs.com/guides/testing/testing-routes/ 单元测试方案和计算属性与之前单元测试基础中说明的相同,因为Ember.Route集成自Ember.Object。 路由测试可以通过集成测试或者单元测试来进行。集成测试对路由的测试具有更好地覆盖性,因为路由通常用来执行过渡和数据加载,这些测试在完整上下文中更加容易测试,而独立上下文则没有那么

  • 问题内容: 我正在学习Node.js,并且一直在玩Express。真的很像框架;但是,我很难弄清楚如何为路由编写单元/集成测试。 能够对简单模块进行单元测试非常容易,并且已经通过Mocha完成了;但是,由于我传入的响应对象未保留值,因此使用Express进行的单元测试失败。 待测路由功能(routes / index.js): 单元测试模块: 当我运行它时,它因“错误:检测到全局泄漏:viewNa