UnitularJS Unit Testing - Multiple Layouts and Providers

Question

I'm starting to do unit testing for my Angular application, and I had some questions about how to create a test folder structure. I mainly used the yoman Angular generator, so it comes with pre-configured Jasmine and Karma.

Here is the scenario of what I'm trying to check ...

I have a "PageHeaderDirective" that displays the username and email address (for example, a welcome message), as well as a logout link. The code for the page header directive is inconsequential, but I need to hit the "/ user" endpoint from the backend to get the user's details. Here is the code for UserService that is entered in PageHeaderDirective:

/**
 * @ngdoc function
 * @name Common.service.UserService
 * @description
 * Service to retrieve a {@link User} from the backend.
 */
(function () {
    'use strict';

    angular.module('Common').service('UserService', UserService);

    UserService.$inject = ['User', 'Restangular'];

    /**
     * User service function.
     * @param User The {@link User} provider.
     * @param Restangular The restangular provider.
     */
    function UserService(User, Restangular) {
        var userPromise;

        return {
            getUser: getUser
        };

        /**
         * Retrieves a {@link User} instance from the /user endpoint.
         * @returns A promise to be resolved with a {@link User} instance.
         */
        function getUser() {
            if(!userPromise) {
                userPromise = Restangular.one('user').get().then(function(data) {
                    return User.factory(data);
                });
            }
            return userPromise;
        }
    }

})();

PageHeaderDirective:

describe('Pageheader Tests', function() {
    'use strict';

    var scope;
    var element;

    beforeEach(module('templates'));
    beforeEach(module('Common'));

    beforeEach(inject(function(_$rootScope_, $compile) {
        scope = _$rootScope_.$new();

        scope.message = 'Test message';

        element = '<ft-page-header message="message" page="home"></ft-page-header>';
        element = $compile(element)(scope);
        scope.$digest();
    }));

    it('should render a page header with the logo and username', function() {
        expect(element.find('.logo-text').length).toBe(1);
        var isolateScope = element.isolateScope();
        expect(isolateScope.name).toBe('test');
    });
});

, , , , " : RestangularProvider < - Restangular < - UserService < - pageHeaderDirective", .

, - beforeEach(function(){ module(function($provide) { $provide.service('UserService', function() { ... }})}); , , / UserService. UserService.mock.js? , "UserService.mock.js" ?

-, Restangular PageHeaderDirective (Restangular.one('logout').get().then...). ( API)?

, , ($ document, $localStorage, $window), ? , ?

!

Answer 1

, - , ( mocks , -), .

// /test/mock/UserService.mock.js
(function() {
    "use strict";

    angular.module('mocks.Common').service('UserService', mock);

    mock.$inject = ['$q', 'User'];

    function mock($q, User) {
        return {
            getUser : getUser
        };

        function getUser() {
            return $q.when(User.factory({
                firstName: 'test',
                email: '[e-mail]',
                id: 1
            }));
        }
    }

})();

, , ( "mocks.Common" ). : angular.module('mocks.Common', []); "mocks.Common". "UserService" $q, . User.factory factory Common.

, "UserService" , , . :

module('app');
module('templates');
module('mocks.Common');

, , PageHeaderDirective "UserService" !

: , , $httpBackend Restangular.

-, , module('appName') , . , :

angular.module('app', [
    'Common',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngDialog',
    'ngStorage',
    'lodash',
    'smart-table',
    'rhombus',
    'helpers',
    'restangular',
    'moment',
    'cgBusy',
    'duScroll'
])

, module('app'), ( "" ).