how to do unit testing for angularJs service using karma? - angularjs

I have a service named "dataService" which is used to get json data from url.This dataService returns some jsonData.Now after running "grunt test" I am getting error like "urlRoot normalized to '/karma/' and client args should be array of strings".Can anyone help me to solve this.

Use the following process:
Define the URL in your package.json
Require grunt in karma.conf.js
Reference the URL via grunt.readJSON
Use array.concat to construct the files array

Related

Injecting angularFileUpload not working

this sound like a simple question but i am a newbie with angular, basicly i want to use AngularFileUpload to upload images on my website, so i did this when i initialize my app:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
before i installed the angularFileUpload module trough npm, so my module is inside node_modules, but i get an error evertyme i start my app
error:
Failled to instantiate module due to:
'fn' is not a function, got string.
someone know what is happening?
That happens because you are injecting the modules in a wrong way.
You are inserting two arrays:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
Instead you should insert just one array with all modules:
var app = angular.module('myApp',['ui.router','angularFileUpload']);
You should use bower instead of npm for loading your client side dependencies in AngularJs. There are following steps required to correctly load your module:
Download using following bower command
bower install angular-file-upload
Then include this library in the script tag, by providing correct location to minified js.
Last inject modules in correct way
var app = angular.module('myApp',['ui.router','angularFileUpload']);
And that's it. Please let me know if it helped you!

ReferenceError when testing angular service with Karma

I have a simple Angular.js service. It makes use of piece of code called esprima.
Esprima is referenced in index.html like so:
...script src="https://unpkg.com/esprima#~3.1/dist/esprima.js"...
and in my code, it is referenced like so:
var syntax = esprima.parse(jsCode, {tokens: true});
According to Esprima documentation, the CDN reference in html makes it a global variable so esprima usage in my angular.js service should work -- which it does.
However, when trying to exercise my angularjs service code from karma test, I am getting ReferenceError for 'esprima'. I am guessing that Karma has no use for my html file and does not pull in the Esprima package because of that.
I dont know how to "import" Esprima package in such a way that it is seen when used from the browser AND can be seen from Karma. Sorry, I am new to this and drinking from a fire hose here. Thank you
Never mind. Karma.config.js file contains the "files" section where you can list any .js files you want to bring in.

Not able to use ng-lodash with restangular

I am trying to use ngLodash with restangular but i m not able to succeed. Below is the error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=portalApp&p1=Error%…A7080%2FNetworkInsight%2Fstatic%2Fjs%2Fangular%2Fangular.min.js%3A19%3A381)
I am able to use restangular with lodash and underscore successfully .
Below is the code:
angular.module('testApp', ['ngLodash', 'restangular']);
The code does not run when i include the below files
ng-lodash.min.js and restangular.min.js
but when i add underscore-min.js the code starts running successfully.
Restangular needs underscore or lodash to run. But restangular is not able to find lodash when we include it as angularized lodash(ngLoad)
Thanks.

Meteor AngularJS templates (unit testing)

How to test angular directives with Meteor? In a normal app, I have karma.conf.js with html2js preprocessor, but in meteor it's different (packages).
Now i have something like this: https://github.com/Nitrooos/Forum-Steganum/tree/templates, but i got Unexpected GET "client/posts/postsList/postsList.directive.html" error.
I tried with this package https://atmospherejs.com/sanjo/angular-templating, but I can't find any example how to configure it.
I resolved it. Now I'm making unit tests via gulp, server tests are via velocity.
An example you can find in this repo: https://github.com/SuperGrupa/Forum-Steganum
Hope it will help.

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);
});
});

Resources