Does UI Router Extras break my unit tests into unexpected result errors?

Question

Question:

- Why do my tests fail when installing ui-router-extras (not an ordinary ui-router)?

- How can I use ui-router-extras and still pass my tests?

---

If you want to install this fast, use yoman + angular -fullstack-generator + bower install ui-router-extras

I found a similar problem with regular ui-router .

• Fortunately, ui-router works fine with my testing.
• After installing ui-router-extras I get ERROR

If I remove ui-router.extras, this test passes just fine:

UPDATED for before each module $ urlRouterProvider TEST Here is my test:

 'use strict'; describe('Controller: MainCtrl', function () { // load the controller module beforeEach(module('morningharwoodApp')); beforeEach(module('socketMock')); var MainCtrl, scope, $httpBackend; // Initialize the controller and a mock scope beforeEach( inject( function (_$httpBackend_, $controller, $rootScope) { $httpBackend = _$httpBackend_; $httpBackend.expectGET('/api/things') .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']); scope = $rootScope.$new(); MainCtrl = $controller('MainCtrl', { $scope: scope }); }), module(function ($urlRouterProvider) { $urlRouterProvider.otherwise( function(){ return false; }); }) ); it('should attach a list of things to the scope', function () { $httpBackend.flush(); expect(scope.awesomeThings.length).toBe(4); }); }); 

Here is my karma.conf

 module.exports = function(config) { config.set({ // base path, that will be used to resolve files and exclude basePath: '', // testing framework to use (jasmine/mocha/qunit/...) frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ 'client/bower_components/jquery/dist/jquery.js', 'client/bower_components/angular/angular.js', 'client/bower_components/angular-mocks/angular-mocks.js', 'client/bower_components/angular-resource/angular-resource.js', 'client/bower_components/angular-cookies/angular-cookies.js', 'client/bower_components/angular-sanitize/angular-sanitize.js', 'client/bower_components/lodash/dist/lodash.compat.js', 'client/bower_components/angular-socket-io/socket.js', 'client/bower_components/angular-ui-router/release/angular-ui-router.js', 'client/bower_components/famous-polyfills/classList.js', 'client/bower_components/famous-polyfills/functionPrototypeBind.js', 'client/bower_components/famous-polyfills/requestAnimationFrame.js', 'client/bower_components/famous/dist/famous-global.js', 'client/bower_components/famous-angular/dist/famous-angular.js', 'client/app/app.js', 'client/app/app.coffee', 'client/app/**/*.js', 'client/app/**/*.coffee', 'client/components/**/*.js', 'client/components/**/*.coffee', 'client/app/**/*.jade', 'client/components/**/*.jade', 'client/app/**/*.html', 'client/components/**/*.html' ], preprocessors: { '**/*.jade': 'ng-jade2js', '**/*.html': 'html2js', '**/*.coffee': 'coffee', }, ngHtml2JsPreprocessor: { stripPrefix: 'client/' }, ngJade2JsPreprocessor: { stripPrefix: 'client/' }, // list of files / patterns to exclude exclude: [], // web server port port: 8080, // level of logging // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: false, // Start these browsers, currently available: // - Chrome // - ChromeCanary // - Firefox // - Opera // - Safari (only Mac) // - PhantomJS // - IE (only Windows) browsers: ['PhantomJS'], // Continuous Integration mode // if true, it capture browsers, run tests and exit singleRun: false }); }; 

Answer 1

This may be the result of a component depending on $state , in this case $state will be created and the default route will be executed. This is why the template for one of your main.html controllers is main.html .

To get around this, replace the go() and transitionTo() of the $state methods with dummies:

 beforeEach( inject( function ( _$state_ ) { state = _$state_; spyOn( state, 'go' ); spyOn( state, 'transitionTo' ); } ) ); 

Answer 2

Here's an alternative solution that does not fulfill the nu-router transitionTo function.

---

Firstly, you can reproduce the failed script by following these steps:

 npm install yo generator-angular-fullstack; yo angular-fullstack 

Enter the $ state service by adding this line to client / app / app.js:

 angular.module("yoAppName").run(function($state) {}); 

At this point, calling grunt karma reports an Unexpected request: GET app/main/main.html , because the UI-Router is loading and trying to load the default route that requests the route pattern.

---

To solve this problem, tell the UI-Router about the delay in synchronizing the URL with the state, so we do not load the default route. In the controller specification add $urlRouterProvider.deferIntercept(); to your test init code:

 beforeEach(module('uiRouterExtrasKarmaBugApp')); // Add the following line beforeEach(module(function($urlRouterProvider) { $urlRouterProvider.deferIntercept(); })); 

Answer 3

1) The test does not work because ui-router-extras makes an unexpected HTTP GET request to app/main/main.html , so the test fails.

2) Actually, there are many suggestions in this matter. I assume that an extra call was added to load the template for the default route, i.e. otherwise . Therefore, overriding can solve the problem:

 beforeEach(module(function ($urlRouterProvider) { $urlRouterProvider.otherwise(function(){return false;}); })); 

Answer 4

There are actually two solutions ... Immediately after the module declaration.

• you can add:

  beforeEach(module('stateMock'));

• or you can manually delay the interception:

  beforeEach(module(function($urlRouterProvider) { $urlRouterProvider.deferIntercept(); }));