1

I have a directive attribute, that passes a value and performs an action based on the value:

define(function () {
'use strict';

var myDirective = function ($rootScope, myFactory) {
    return {
        restrict: 'A',
        scope: {
            _myValue : '=value'
        },
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if (scope._myValue === 'red') {
                    myFactory.red();
                }
                if (scope._myValue === 'green') {
                    myFactory.green();
                }
                if (scope._myValue === 'black') {
                    myFactory.black();
                }
            });
        }
    };
};

return ['$rootScope', 'myFactory', myDirective];
});

HTML:

<a my-directive  value="\'red\'"></a>

Unit Test:

define(['angular-mocks'], function () {
'use strict';

var angular = require('angular');

describe('<-- Directive Spec ------>', function () {

    var scope, $compile, element;

    beforeEach(angular.mock.module('myApp'));

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

        var html = '<a my-directive  value="\'red\'"></a>';
        element = $compile(angular.element(html))(scope);
        scope.$digest();

    }]));

    it('should be red and call myFactory.red', function () {
        element.click();
    });

UPDATE:

define(['angular-mocks'], function () {
'use strict';

var angular = require('angular');

describe('<-- Directive Spec ------>', function () {

    var scope, $compile, element, myFactory;

    beforeEach(angular.mock.module('myApp'));

    beforeEach(inject(['$rootScope', '$compile', function (_$rootScope_, _$compile_, _myFactory_) {
        scope = _$rootScope_.$new();
        $compile = _$compile_;

        var html = '<a my-directive  value="\'red\'"></a>';
        myFactory = _myFactory_;
        spyOn(myFactory , 'red');
        element = $compile(angular.element(html))(scope);
        scope.$digest();

    }]));

    it('should be red and call myFactory.red', function () {
        expect(myFactory.red).toHaveBeenCalled();
    });

Tried the above and get error:

Error: spyOn could not find an object to spy upon for red()

Factory example:

define(['require', 'angular'], function (require, angular) {
    'use strict';

    var myFactory = function () {    

        return {
            red: function() {
                console.log('red');
            },
            green: function() {
                console.log('green');
            },
            black: function() {
                console.log('black');
            }
        };
    };

    return myFactory;
});

1 Answer 1

1

I would have added a spy just like this in the beforeEach:

spyOn(myFactory, 'red');

And then check if it has been called :

expect(myFactory.red).toHaveBeenCalled();

Of course, you have to inject myFactory.

Sign up to request clarification or add additional context in comments.

11 Comments

Thanks, nice solution. Do i have to define myFactory? Does the spy go before digest? After?
Declare a myFactory var just like as you did with ` scope. Then, inject _myFactory_` and affect it to the myFactory var : var myFactory = _myFactory_. That's it. Then, put the spy as soon as possible (before the compile.
slidingMenuFactory should be myFactory.
What does your factory look like? Is it perhaps an object you need to create with "new MyFactory()"..?
You are working with a module loader. There are some steps to follow so that you can unit test your factory. Please have a look at : open.blogs.nytimes.com/2015/01/15/… . By the way, it's out of scope of that question. Please post another thread and check my answer if it has suited your (first) needs.
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.