6
\$\begingroup\$

I'm trying to unit test an AngularJS service that is dependent on another service, using QUnit as my testing framework. The first test I'm writing is one to verify that my service calls another service under specific circumstances.

Below is a runnable example. I'm mainly looking to get feedback on the contents of the second main closure (which represents a QUnit module). Things I'm particularly interested in:

  • Conventions around unit testing AngularJS services with QUnit (e.g. I'm unsure when it's common to prefix variables with a $);
  • I'm following this advice (which was for Jasmine though) on mocking a dependent service, but am unsure if I can improve that approach or even need a different one (heck, perhaps I even need / should use a mocking framework?);
  • Whether I'm using the injector features of Angular correctly.

Here's a runnable snippet with promised code:

(function() {
    var app = angular.module('demoApp', []);

    app.factory('myService', ['anotherService', function(anotherService) {
        return {
            getTheTruth: function() { return anotherService.someFunction(); }
        };
    }]);
})();
    
(function() {
    // Looking to get feedback on this closure...

    'use strict';
  
    var $injector, anotherService;
    
    QUnit.module('myServiceTests', {
        beforeEach: function() {
            anotherService = {};
            angular.module('demoApp').factory('anotherService', function() {
                return anotherService;
            });            
            $injector = angular.injector(['ng', 'demoApp']);
        }
    });
    
    QUnit.test('Calling getTheTruth relays to anotherService', function(assert) {
        var service = $injector.get('myService');
        anotherService.someFunction = function() {
            assert.ok(true);
        };
        assert.expect(1);
        service.getTheTruth();
    });
    
    // More tests here
})();
<link href="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.16.0/qunit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qunit/1.16.0/qunit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<div id="qunit"></div>

\$\endgroup\$
1
  • \$\begingroup\$ psssst: look up angular-mocks. \$\endgroup\$
    – Dan
    Aug 12, 2015 at 9:41

1 Answer 1

2
+50
\$\begingroup\$

e.g. I'm unsure when it's common to prefix variables with a $

A quick Google and I found a StackOverflow thread about this,

The accepted answer had this to say:

It's a common reference to a jQuery wrapped object. It makes reading the code easier to know which variables are jQuery wrapped.

I would say that you don't need to use $ prefix in your code at all, at least what you have posted.


If you were using $scope that would be different as noted by this answer

$scope variables bind to the view where as var does not and is local to the function it was declared in!


also noted in the comments

The $ prefix is used as a naming convention identifying native AngularJS services

▼▼▼

Do not use $ to prepend your own object properties and service identifiers. Consider this style of naming reserved by AngularJS and jQuery.

From Google's AngularJS Style Guide

\$\endgroup\$
5
  • \$\begingroup\$ Does that hold up for typical AngularJS code? I didn't think typical vars such as $scope, $http, etc are jQuery wrapped objects. I don't think angular.injector will return a jQuery wrapped object either, right? (Yet I do see the result of it stored in a $-prefixed var in examples...) \$\endgroup\$
    – Jeroen
    Aug 10, 2015 at 14:49
  • \$\begingroup\$ docs.angularjs.org/misc/faq search for jquery on the page. you can still have jQuery objects or select objects using jQuery. I would say that you don't need to use $ prefix in your code at all, at least what you have posted. \$\endgroup\$
    – Malachi
    Aug 10, 2015 at 14:56
  • 4
    \$\begingroup\$ The $ prefix is used as a naming convention identifying native AngularJS services: "Do not use $ to prepend your own object properties and service identifiers. Consider this style of naming reserved by AngularJS and jQuery." \$\endgroup\$ Aug 10, 2015 at 17:45
  • \$\begingroup\$ Thanks in any case for your comment. Since this only touches upon the "e.g." part of one of the bullets: you (or someone else) wouldn't happen to have any insights on the other parts? \$\endgroup\$
    – Jeroen
    Aug 11, 2015 at 7:10
  • \$\begingroup\$ As promised in the bounty notice, I'll be awarding you the bounty. Thanks for taking the time to respond. \$\endgroup\$
    – Jeroen
    Aug 13, 2015 at 9:44

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.