ui-router在控制器测试中导致“整页重载”？

I'm trying to write some angular controller tests but ran into:

我正在尝试编写一些角度控制器测试但遇到:

Some of your tests did a full page reload!

您的一些测试完成了整页重新加载!

karma/jasmine error as soon as my test ran httpMock.flush()

我的测试运行时出现karma / jasmine错误httpMock.flush()

After troubleshooting by removing code from my controller and it's corresponding test piece by piece until it passed, I discovered that the test would pass if I removed $state dependency so the error was somehow related to ui-router.

通过从我的控制器中删除代码进行故障排除后,它一直是相应的测试,直到它通过,我发现如果我删除了$ state依赖,测试将通过,所以错误与ui-router有某种关系。

After more digging it appears to be related to the inclusion of $urlRouterProvider in my routes file:

经过更多的挖掘后,它似乎与我的路线文件中包含$ urlRouterProvider有关:

App.config(function($stateProvider, $urlRouterProvider) {
 // For any unmatched url, redirect to
 $urlRouterProvider.otherwise('dashboard');

$urlRouterProvider produces window.location. If I remove $urlRouterProvider.otherwise line, I can put back $state and the tests pass.

$ urlRouterProvider生成window.location。如果我删除$ urlRouterProvider.otherwise行,我可以放回$ state并且测试通过。

EDIT:

After more digging.

经过多次挖掘。

I did end up finding that we were doing a full page redirect somewhere else in $rootScope.$on('$stateChangeStart') checking to see if a cookie existed or to log the user out.

我最终发现我们在$ rootScope中的其他地方进行了整页重定向。$ on('$ stateChangeStart')检查是否存在cookie或将用户注销。

But even upon commenting that out, I get a new error: unexpected GET request for the template of the dashboard view. I figured maybe my test doesn't pass any values to the ui-router mechanism (I was just passing $state through) so it doesn't know what the state is and therefore triggers the $urlRouterProvider.otherwise route. So I added a state.transitionTo('base.settings.sales-channels.edit', {channelId:1}); in my test. This is a nested state.

但即使评论出来,我也会收到一个新错误:仪表板视图模板的意外GET请求。我想也许我的测试没有将任何值传递给ui-router机制(我只是通过$ state)所以它不知道状态是什么,因此触发$ urlRouterProvider.otherwise路由。所以我添加了一个state.transitionTo('base.settings.sales-channels.edit',{channelId:1});在我的测试中。这是一个嵌套状态。

This indeed changes the error message to Error: Unexpected request: GET ../src/settings/index.tpl.html, which looks like it's the template for the parent state since settings comes before sales-channels, which comes before edit in my state name.

这确实将错误消息更改为错误:意外请求:GET ../src/settings/index.tpl.html,看起来它是父状态的模板,因为设置在销售渠道之前,在我之前编辑州名。

Why do I get this error? Do we have to mock out expectations for all the parent state's templates?

为什么我会收到此错误?我们是否必须嘲笑对所有父州模板的期望?

EDIT

Here is a plunkr the reproduces the test error I am getting http://plnkr.co/edit/DoaIBqK1JMqbTJj3vlmH?p=preview

这是一个plunkr再现我得到的测试错误http://plnkr.co/edit/DoaIBqK1JMqbTJj3vlmH?p=preview

EDIT

Looks like the template GET request is a known issue: https://github.com/angular-ui/ui-router/issues/212

看起来模板GET请求是一个已知问题:https://github.com/angular-ui/ui-router/issues/212

I implemented the state mock method mentioned in that issue and the unit tests pass now.

我实现了该问题中提到的状态模拟方法,单元测试现在通过了。

1 个解决方案

#1

I'd argue that your test isn't focused enough and you are actually testing ui-router instead of your own code. For example, I'd test your controller in isolation, probably asserting that your controller is exposing the appropriate values or api.

我认为你的测试不够集中,你实际上在测试ui-router而不是你自己的代码。例如,我会单独测试你的控制器,可能断言你的控制器正在暴露适当的值或api。

Nonetheless, you can stub out the view expectations to satisfy the $templateCache calls ui-router will make to traverse to your nested state. I fiddled with your code here and tests pass: http://plnkr.co/edit/hjw599oXGCjY03nbVpSN?p=preview

尽管如此,您可以查看视图期望以满足$ templateCache调用ui-router将遍历到您的嵌套状态。我在这里摆弄你的代码并测试通过:http://plnkr.co/edit/hjw599oXGCjY03nbVpSN?p = preview