Inject Controller and Mock AngularJS Services

Question

I've finally managed to complete a very simple end to end test, i.e.

In scenarios.js:

describe('My app', function () {
    beforeEach(function () {
        browser().navigateTo('/');
    });

    describe('On Load', function () {
        it('Textbox should be blank', function () {
            expect(input('textbox').val()).toBe('');
        });
    });
});

And my runner.html looks like this:

<head>
    <title>End2end Test Runner</title>
    <script src="/js/libs/angular-scenario.js" ng-autotest></script>
    <script src="/js/libs/angular-mocks.js"></script>
    <script src="/js/test/e2e/scenarios.js"></script>
</head>

This boots up my site, navigates, and checks an input is blank. Ace.

However I would like to now add this test which expands on what I have so far:

describe('Click on Add', function () {
    it('will add new item if valid', function () {
        input('newItemName').enter('Test Item');
        element('#add').click();
        expect(input('newItemName').val()).toBe('');
        expect(repeater('#items li').count()).toEqual(1);
    });
});

But before I run this test I want to Mock the storage service my app is dependant on.

Here is my controller definition:

myapp.controller('MyController', ['$scope', '$routeParams', '$filter', 'storage',
    function ($scope, $routeParams, $filter, storage) { 
        . . . . 
    }
]);

And this is causing me problems (I think), because I want to do something like this:

describe('Controller Unit Tests', function(){
    var ctrl;

    beforeEach(function(){
        ctrl = new MyController();
    });

    it('should ....', function() {
        expect(true).toBe(true);
    });
});

But can't because of the way I am declaring my Controller. And the reason I am declaring my controller that way is for minification purposes...

Does anyone have an advice on how this problem could be solved?!

Would be great to add your testatcular config file, in particular you probably have specified a urlRoot other than '/', in order to support your browser().navigateTo('/') — Fred Sauer
– Fred Sauer, Commented Nov 30, 2012 at 21:55

daddywoodland · Accepted Answer · 2012-09-20 15:45:55Z

3

Try

function MyController($scope, $routeParams, $filter, storage) {}
MyCtrl1.$inject = ['$scope', '$routeParams', '$filter', 'storage'];

answered Sep 20, 2012 at 15:45

daddywoodland

1,5122 gold badges12 silver badges16 bronze badges

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

1 Comment

Greg Over a year ago

I found this - docs.angularjs.org/tutorial/step_05 - on the Angular Tutorial (which I never read!) which has the answer and reason why this is correct. "A note on minification"...

Collectives™ on Stack Overflow

Inject Controller and Mock AngularJS Services

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related