0

I work on an app based on Angular 1.5, angular-ui-router and WebPack for which I want to make unit tests on module declaration part, especially on state configuration (I want to test source code of resolve part).

All others unit tests of my app are working fine but on this one it looks like my call $state.go are never processed:

describe('Simple Module', () => {
    beforeEach(angular.mock.module('ui.router', 'my-app'));

    let $state;
    let $location;
    let $httpBackend;

    beforeEach(inject((_$location_, _$state_, _$httpBackend_) => {
        $state = _$state_;
        $location = _$location_;
        $httpBackend = _$httpBackend_;
    }));

    describe('app.onlineListing.error', () => {
        it('go to state', () => {
            const state = 'app.onlineListing.error';    
            $state.go(state);
            // PROBLEM IS HERE...
            // $state.current.name is empty ('') just like if $state.go was never called
            // It's not better with $location.url and $httpBackend.flush
            // ...
            expect($state.current.name).toBe(state);
            // I will spy on myService and expect that myService.getData has been called
            // but currently state is not reach so resolve parts are never triggered...
        });
    });
});

Here is my app module:

export default angular.module('my-app', ['oc.lazyLoad', 'ui.router', mySimpleModule.name])
    .config(($stateProvider, ...) => {
        ...
        $stateProvider
            .state('app', {
                abstract: true,
                ...
            }
    });

There is mySimpleModule declaration:

export default angular.module('my-simple-module', [
    'ui.router'
])
    .config(($stateProvider) => {
        $stateProvider
            .state('app.onlineListing', {
                url: '/onlineListing',
                abstract: true,
                views: {
                    body: {
                        template: '<ui-view />'
                    }
                }
            })

            .state('app.onlineListing.error', {
                url: '/error',
                template: require('./configurationError/configurationError.html'),
                controller: 'onlineListingConfigurationErrorCtrl',
                controllerAs: 'controller',
                resolve: {
                    // @ngInject
                    modules: ($q, $ocLazyLoad) => {
                        return $q((resolve) => {
                            require(['./configurationError/configurationError.js'], (module) => {
                                resolve($ocLazyLoad.load({ name: module.default }));
                            });
                        });
                    },
                    fetchedData: (myService) => {
                        // Finally I want my test to check if getData is called
                        return myService.getData();
                    }                        
                }
            })
    });

Edit

I also try this tutorial (which is exactly what I try to achieve) but it's not working better.

8
  • You have to mock the $state service.
    – Gaurav
    Commented Apr 6, 2017 at 15:57
  • But if I mock it it will not "go" the state I want to reach, no ? Commented Apr 6, 2017 at 16:01
  • 1
    I'm not an expert on the subject of why to write the unit test, but the fact that you are writing unit tests are for some reasons and one of the reason is to test the individual component in isolation. I guess what you are trying to test and verify here is that your code does go to a particular given state, so why not test just that and let the $state implementor write the unit test for the internal of the $state.go() method. If you want I can provide you an example.
    – Gaurav
    Commented Apr 6, 2017 at 16:06
  • +1 to what Gaurav said. Move the code from your resolve into a method/class/function/whatever, then just test that method. No need to test that UI Router is triggering resolves -- that's the job of tests in the UI Router project :)
    – Sunil D.
    Commented Apr 6, 2017 at 16:10
  • My point was not yo test resolve triggering but that m'y services (inside resolve) are called (ans with correct params) so tour solution to "export" m'y code on a function should work, I will try! ;) However I still don't understand why stage.go is not working as expected Commented Apr 6, 2017 at 17:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.