它使用$ state.transitionTo单元测试控制器

问题描述

控制器内我有一个使用 $ state.transitionTo 来重定向到另一种状态的功能。

现在我卡在测试这个功能，我总是得到错误错误：没有这样的状态国家两化。如何测试呢？它完全的清楚，我认为控制器不知道其他国家什么，但我怎么能嘲笑这种状态？

一些code：

---

  angular.module（'mymodule.state合一，[
  ui.state
]）的.config（配置功能（$ stateProvider）{
  $ stateProvider.state（国家一'，{
    网址：'/国有一个人，
    观点：{
      '主'：{
        控制器：'MyCtrl'，
        templateUrl：mytemplate.tpl.html
      }
    }
  }）;
}）.controller（'MyCtrl'，
  功能（$范围，$州）{
    $ scope.testVar = FALSE;
    $ scope.myFunc =功能（）{
      $ scope.testVar =真;
      $ state.transitionTo（国家二'）;
    };  }
）;
 

---

 描述（' -  mymodule.state合一'，函数（）{  VAR MyCtrl，范围  beforeEach（模块（'mymodule.state一'））;  beforeEach（注（函数（$ rootScope，$控制器）{    范围= $ rootScope $新的（）。    MyCtrl = $控制器（'MyCtrl'，{
      $适用范围：适用范围
    }）;  }））;  描述（' -  myFunc的函数'，函数（）{
    它（' - 应该是一个函数，函数（）{
      期待（typeof运算scope.myFunc）.toBe（'功能'）;
    }）;    它（' - 应该测试scope.testVar真'，函数（）{
      scope.myFunc（）;
      期待（scope.testVar）.to​​Be（真）;
      期待（scope.testVar）.not.toBe（假）;
    }）;
  }）;
}）;
 

解决方案

免责声明：我没有做这个我自己，所以我完全不知道这是否会工作，是你所追求的。

从我的头顶，两个解决方案来我的心。

1）。在你的测试pre配置 $ stateProvider 返回嘲笑州为国家两个这也是什么UI路由器项目本身并测试状态过渡。

请参阅：https://github.com/angular-ui/ui-router/blob/04d02d087b31091868c7fd64a33e3dfc1422d485/test/stateSpec.js#L29-L42

2）渔获物和解析异常和跨preT它作为履行测试，如果尝试去国家两个

第二种方法似乎很hackish的，所以我会投给了第一位。

不过，有机会，我完全把你错了，也许应该得到一些休息。

解决方案code：

  beforeEach（模块（函数（$ stateProvider）{
  $ stateProvider.state（国家两化，网址：{url：'/'}）;
}））;
 

within a controller i have a function which uses $state.transitionTo to "redirect" to another state.

now i am stuck in testing this function, i get always the error Error: No such state 'state-two'. how can i test this? it its totally clear to me that the controller does not know anything about the other states, but how can i mock this state?

some code:

---

angular.module( 'mymodule.state-one', [
  'ui.state'
])

.config(function config($stateProvider) {
  $stateProvider.state('state-one', {
    url: '/state-one',
    views: {
      'main': {
        controller: 'MyCtrl',
        templateUrl: 'mytemplate.tpl.html'
      }
    }
  });
})

.controller('MyCtrl',
  function ($scope, $state) {
    $scope.testVar = false;
    $scope.myFunc = function () {
      $scope.testVar = true;
      $state.transitionTo('state-two');
    };

  }
);

---

describe('- mymodule.state-one', function () {

  var MyCtrl, scope

  beforeEach(module('mymodule.state-one'));

  beforeEach(inject(function ($rootScope, $controller) {

    scope = $rootScope.$new();

    MyCtrl = $controller('MyCtrl', {
      $scope: scope
    });

  }));

  describe('- myFunc function', function () {
    it('- should be a function', function () {
      expect(typeof scope.myFunc).toBe('function');
    });

    it('- should test scope.testVar to true', function () {
      scope.myFunc();
      expect(scope.testVar).toBe(true);
      expect(scope.testVar).not.toBe(false);
    });
  });
});

解决方案

Disclaimer: I haven't done this myself, so I totally don't know if it will work and is what your are after.

From the top of my head, two solutions come to my mind.

1.) In your tests pre configure the $stateProvider to return a mocked state for the state-two That's also what the ui-router project itself does to test state transitions.

See: https://github.com/angular-ui/ui-router/blob/04d02d087b31091868c7fd64a33e3dfc1422d485/test/stateSpec.js#L29-L42

2.) catch and parse the exception and interpret it as fulfilled test if tries to get to state-two

The second approach seems very hackish, so I would vote for the first.

However, chances are that I totally got you wrong and should probably get some rest.

Solution code:

beforeEach(module(function ($stateProvider) { 
  $stateProvider.state('state-two', { url: '/' }); 
}));

这篇关于它使用$ state.transitionTo单元测试控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！