AngularJS unit testing with ReSharper - angularjs

I'm trying to get Jasmine unit tests for an AngularJS controller running with the ReSharper test runner so I can run my client and server-side tests in one place within VS 2012.
I'm running into an issue where the ReSharper test runner is failing with a message of "Inconclusive: Test wasn't run". The same test runs fine using the test runner that comes with the AngularJS Seed project.
Here's my simple test for troubleshooting:
/// <reference path="~/Scripts/angular/angular.js"/>
/// <reference path="~/tests/test/lib/angular/angular-mocks.js"/>
/// <reference path="~/Scripts/app/controllers.js"/>
'use strict';
describe('controllers', function(){
beforeEach(module('myApp.controllers'));
it('should ....', inject(function() {
expect(1).toEqual(1);
}));
});
I suspect it has something to do with my references because if I remove the call to inject, my test runs fine. However, inject is defined in angular-mocks.js (which I'm referencing) so I'm not sure what the problem is.
Any suggestions?

Your hunch about ReSharper tripping over inline inject is right, it seems to expect function instead when it parses file to get list of tests. I've worked around by moving injects into either beforeEach or into the body of the it and that made ReSharper happy again. Btw, I've also added reference to jasmine.js at the top (before other references) to get rid of ReSharper's warnings about undefined Jasmine globals.

There is an issue about this ReSharper problem at their tracker at http://youtrack.jetbrains.com/issue/RSRP-383328 - you can vote for it to be fixed.

Take a look to this page. I disabled the option "Shadow-copy assemblies being tested", and it worked.
Test method is inconclusive: Test wasn't run. Error?

ReSharper set file jasmine.js after all references.
angular-mock.js will not find jasmine and will skip creation window.module and window.injec functions
I created jasmine2.js and set it as first reference. I did empty jasmine.js and set it as second reference.
After all my test did work

Related

Is it possible to use Jasmine without Karma for testing Angular/Node based Nw.js apps?

I've read ton's of tutorials, but I must admit that this testing stuff is still very confusing to me. I have a Nw.js app which (of course) uses NodeJS and also Angular. I've installed the Jasmine test framework globally via npm and wrote an example test which starts with the following lines, and placed it in the spec sub-directory:
describe ( 'Test for my controller', function () {
beforeEach ( module ('module_under_test') );
... and so on ...
});
When running the test by typing jasmine on the cmd line (from the root folder of the app), I get the following error message:
TypeError: module is not a function
I know that I have to include the Angular library somehow. But where? In a normal browser application, it is included in the HTML <script> tag, but I don't have this possibility. I also know that I could write a HTML file, which shows the Jasmine result page after tests have finished, but I would prefer to start Jasmine on the cmd line.
First I thought about adding the angular library to the "helpers" entry in jasmine.json. But it didn't work. The documentation of this file is unfortunately very poor. In the Angular documentation and tutorials it is always mentioned to use Karma. But my understanding is that Karma is only useful for testing with browsers, since it spawns an own webserver. This does not make sense in my case.
Would be great if somebody could give me a hint, thanks!

Running more than 10 tests on karma using jasmine causes: "ERROR: Some of your tests did a full page reload!"

So, this is my first project where I'm using Karma and Jasmine to unit test my angularJS code. Used Yeoman angular generator for the setup.
As soon as I reached 11 tests, I got an error saying "Some of your tests did a full page reload". I'm not doing any tests that would trigger a reload.
Digging deeper I saw the same issue being referenced on Github.
https://github.com/jasmine/jasmine/issues/366 -- (FuzzySockets comments)
The problem seems to stem from a line of code in jasmine-core
https://github.com/jasmine/jasmine/blob/master/lib/jasmine-core/jasmine.js
To avoid overflow of stack, the maximumSpecCallbackDepth is set to 20. And every time currentSpecCallbackDepth exceeds that, further tests are executed on a new stack by using the setTimout function.
This is the line that seems to cause problems and makes karma throw the error. (I've verified this by invoking the setTimeout method in my own unit test, and it threw the same error).
If change the maximumSpecCallbackDepth to 100, my tests run fine, and no errors are thrown at the end
Has anyone seen this issue and know a fix? I'm using the latest versions of karma(0.13.15) and jasmine(2.4.1).
I haven't really messed around too much with the default grunt or karma config that came with yeoman generated ones, except that I'm using the chrome launcher instead of the default phantomJS, so I don't understand how everyone else is not facing the same issue here.
+1 for this issue. As u said, it caused by maximumSpecCallbackDepth limitation, but I didn't find no fix for this issue so far. You probably could track issue here https://github.com/karma-runner/karma/issues/1101 .
One temporary solution is to reduce nested 'describe' block in your project.
I got a similar issue where the angular injections in the global beforeEach stopped working and all tests failed after the 20 limit of maximumSpecCallbackDepth.
During my investigations, I found out that angular-mock doesn't play well with the setTimeout done in jasmine when that limit is reached.
The following code that is given as example everywhere will create a new injector on each test case:
var yourService;
beforeEach(module('app'));
beforeEach(inject(function(_yourService_) {
yourService = _yourService_;
}));
Instead, you could do the following, which will use a single injector and register your modules only once.
var yourService;
module.sharedInjector();
beforeAll(module('app'));
beforeEach(inject(function(_yourService_) {
yourService = _yourService_;
}));
Hope this might help others as it took me almost a week to find out that this was the root cause of the issue and not Jasmine itself like some people think on github.

How do you reference external libraries with Jasmine + Resharper

I can run Jasmine unit tests from the Resharper 8.0 unit test runner.
I have a problem where any Javascript references that are normally in the html page (ie in my case Ext-Js) then I can't use the Resharper test runner, as you don't seem to have access to the HTML page that Resharper uses. (I assume it's generated as I could not locate it on disk)
I was thinking if there is a way to call or load your external library references from the Javascript test file directly instead of via the html page, then I could get this to work. I've not found if that is possible with Javascript (or Ext-Js) yet.
It seems the way to go at the moment is hardcoding include statements as special comments in the suite file (called doc-comments references), e.g.:
// include external files like so:
/// <reference path="/path/to/external-file.js" />
// than write your testing suite as usual:
describe('a silly suite', function() {
it('should test something is happening', function() {
expect(something).toBe('happening');
});
});
See this thread on the ReSharper community, as the source of this recommendation.
I wrote 2 repos for dealing with ExtJS 4 for unit testing using Karma test runner/ Jasmine 1.x and 2.0 versions and dealing with Async Issues: here they are: https://github.com/cgauthier/karma_jasmine_1_extjs4 and https://github.com/cgauthier/karma_jasmine_2_extjs4. The trick to loading external references is to add them as files in your modules declaration.

Loading mocks into an AngularJS unit test

I'm trying to setup my AngularJS application to test out controllers, routes, templates and so on, but I'm having an issue getting some of the helper methods provided by the angular-mocks.js to work (namely module and inject).
I'm using testacular to load up the test suite with the following files added before the specs:
files = [
MOCHA,
MOCHA_ADAPTER,
'../application/lib/angular.min.js',
'./lib/angular/angular-mocks.js',
'./lib/angular/angular-scenario.js',
'../application/application.js',
'./lib/chai.js',
'./lib/chai-should.js',
'./lib/chai-expect.js',
'./spec/**/*.js'
];
So far so good, but when I run the tests I get this issue:
ReferenceError: Can't find variable: module
Not sure where this is loaded. Am I missing something?
First thing to check is that all those files are getting loaded in the test browser. It's surprisingly easy to get a path wrong in your config and not realize it. If you're running testacular with autowatch, you can navigate to http://localhost:9876/context.html with a browser and use developer tools inspect elements/resources/network and see if anything is missing.
If everything is good there and you're still having problems, post some of your test code and I'll take a look.
UPDATE: It appears (strangely) from the comments in the source for angular-mocks.js (line 1635) that window.module is only available with Jasmine. It looks like you're using Mocha instead of Jasmine. This is very likely the culprit.
ANSWER:
I can't rightly take credit for this Matsko, since you figured it out yourself... but it turns out that the current AngularJS stable download and angular-seed contain an older version of ngMock that doesn't support Mocha. Manually replacing the mock file with the latest from the github repo solves the problem. Glad I could help ;-)
I ran into this issue today and I wanted to provide others with a complete summary of the required steps to get this working. First let's say you have a module named myApp. Inside that that module there is a service called myModel. the myModel service has a method named getItems().
Currently, the angular-mocks.js (I am using AngularJS 1.0.6) does not support Mocha. You will need to visit this link and replace the 1.0.6 version with the one in the master branch from the AngularJS GitHub project. An easy way to do this (if you have wget) is wget https://raw.github.com/angular/angular.js/master/src/ngMock/angular-mocks.js in the correct directory. If you use a properly configured Sublime or vim it can also easily pull it down for you.
Make sure your karma.conf.js file includes the angular-mocks.js file in files array
Somewhere in your tests.js file (maybe at the top level describe) include beforeEach(module('myApp')); or whatever you named your main module.
If you plan to use the service (or whatever you want to include in the test) in more than one place you can call another beforeEach where needed like this:
beforeEach(inject(function(myModel) {
mymodel = myModel;
}));
otherwise you just can inject where it is needed. Now the mymodel variable (notice this is the variable you assigned in the beforeEach above) will be available to you for testing in your next blocks. For example, you can now write:
describe('when fetched', function() {
it('should return 3 items', function() {
// console.log(mymodel.getItems());
expect(mymodel.getItems()).to.have.length(3);
});
});

AngularJS + Testacular / Jasmine unit tests: Executed 0 of 0 SUCCESS

I am trying to write unit tests for an AngularJS project. The project is based on angular-seed and uses Testacular to run tests. Every attempt to run test.sh script always ends up with "Executed 0 of 0 SUCCESS".
I tried this super-simple "test":
describe('Testing Jasmine', function() {
console.log('describe');
var test = 'test';
it('should be test', function() {
console.log('it');
expect(test).toEqual('test');
});
});
The result is that only 'describe' is logged, the 'it' part is skipped. When I try the same thing on clean angular-seed clone everything works - so I assume that the testing system itself with Testacular and Jasmine is working correctly.
Our project is based on Rails, but the clean angular-seed that I was testing for comparison is running on Apache so I thought that this might be the difference - messed up paths or something in that Rails project.
But there are no error messages, e2e tests work... and also I assume that if some files were missing or paths were incorrect it would not be able to log that 'describe' in tests - if I understand correctly this means that Jasmine is processing the right file (there are no other dependencies in this pseudo-test). How is it possible that the 'describe' part works just fine and only 'it' part seems to be skipped?
Any hint or help would be appreciated.
If you are doing unit tests, do not include the angular-scenario.js file in your testacular config file. That will break the unit tests.
e2e testing in testacular has a long way to go. I struggled with this for a while. It turns out that the left side of an expect must be one of the methods defined in the angular documentation: http://docs.angularjs.org/guide/dev_guide.e2e-testing.
the following is an example
describe('Testing Jasmine', function() {
it('should be test', function() {
expect(element('foo').count()).toEqual(1);
});
});
Remember, if you dont enter in one of the prescribed method calls into the expect, testacular will not run the 'it'
Also make sure that you have one of these attributes used on page you are testing:
'ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'
Because if function angularInit() won't find element with one of these arguments runner won't start.
This is espcially important if you would like to use angular test runner on webage that does not have ng-app - with current version it just won't work.
Please check the order of the Javascript files.
A similar issue was reported in Testacular and reordering the js files fixed the problem.

Resources