Il go strait to it. Im writing unit tests for Angular front end application.
This is what I have so far...
app.js:
var app = angular.module('app', ['dependency1', 'dependency2', 'dependency3']);
Then to create a service I have:
app.factory('myService', ['serviceDependency', function(serviceDependency) {
...
});
How do I create/inject myService to be tested? When I do:
beforeEach(module("app"));
Jasmine screams at me about not finding dependencies, and I dont know how to mock them. (there are more than 3, like way more. :) )
beforeEach(inject(function(myService){}));
Does not work without doing the 'module' one first. Im stuck on this for 3 days googleing watching videos and I just cant find what I need, or I cant see it.
First time writing for help, so do ask any questions if you feel I missed something, and you need more info.
ktnxbye
Edit:
Custom providers are created like so:
app.config(['customProvider', function(customProvider){
...
}]);
any suggestions on how to mock this?
ktnxbye
Well, I've 'solved' it!
What I did is I included all dependencies required by the app in the test project and now it runs fine. But I don't quite like that solution. I would like it more if I could some how mock all those dependencies. I will still try to mock them and if I'm successful I will post here for all to see. Also I would appreciate any help from all :)
ktnxbye
Related
New to karma and jasmine, setting up tests on a project I'm not very familiar with. In order to mock a service in a controller test, do I need to set up fake functions that return data in the format expected? Or is there an easier way to do this than going back and forth trying to set up dummy data, etc
I recommend getting Sinon.js, if you have Sinon all you have to do is get the interface and then you can tell it what each function should return in your tests.
Check out my answer for this post here.
Jasmine, Karma, Angular how to write test on my Angular app?
I am new to angular and it seems very interesting
I am creating a template for a promotional page and struggling to understand what is causing an issue on it - half of the script stopped working...
My fiddle is in here see >
fiddle example
or Plunker
I have working example without route...
Can you advice me how to fix this issue please
First of all, i'd suggest you to separate your project to different files based on best practises
Secondly, 'config, controller, factory' etc are methods of angular.module object. So you need to retrieve it first like
angular.module('<moduleName>').config(...)
or use some variable.
http://plnkr.co/edit/CK5R2cS7Zd9T9Kun9Epc?p=preview
When using backbone with browserify what is the best way of bootstrapping models so that you can inject into your app?
I tried to set a global object in the html but still can't seem to access that from inside the js.
Am I missing something? How is the best way of getting all the preseed data in?
I don't think this is related to backbone but rather to all Browserify projects :)
The global variable solution works for us so it should work for you too: try again or give us your code :)
I didn't find any other way to do this except with a global variable.
I asked something quite similar here to know if there's a better way: Inject data in a Browserify app
In AngularJS there is a short form to create controllers, so you do not have to use a module for this. This short form is to simply define a function
function FooController ($scope) {
// ...
}
and reference it from the HTML markup using ng-controller:
<div ng-controller="FooController">
...
</div>
Now, my question is, whether there is a similar "short form" to define services? In other words: Can you define (and use) a service without using a module?
Please note that I know that it perfectly makes sense to structure your applications using modules, and not doing so could / should be regarded as bad practice. It's just that I am explaining AngularJS to someone who's completely new to it, and the question arose today. So it's just for curiosity and completeness.
Quoted from the doc of Creating Services
To register a service, you must have a module that this service will
be part of.
So I guess the answer is no.
Since the ng module is always loaded, you could define your service on the ng module:
angular.module('ng')
.service('aService', function () {
// you really shouldn't do this
});
It works, but you shouldn't be messing with a module that you don't own.
If you're trying to explain to someone why using your own modules with .controller is good:
Talk to them about testing. It's a lot easier to mock things if you're using modules
If you need to have other modules as dependencies (like angular-ui)
If you want to decorate another service (e.g. $http)
If you need to register directives, filters, animations, etc.
It's a lot nicer to have modular code :)
It's an angular concept I don't understand at all, I always believed "separation" is good, so I dont get why we need to associate a service to a specified application.
Here what I am doing: you can declare your angularjs application as a global object:
window.markrApplication = angular.module('markrOptionsApp', ....)
And declare all your services like this:
markrApplication.service('data', ....
Of course you need to have all the dependencies set on all your angularjs application.
I am new to Jasmine, but would like to do more TDD in Javascript. I've been using the Angular library from Google, and I know that Testacular was specifically created for testing Angular apps.
I have read through both the Jasmine documentation and watched the Testacular setup video, but I can't get the most basic testing to work. Assume I have three files:
modules.js
controller.js
appSpec.js
modules.js has my module definition with a few .factory(...) services and a few .directive(...) custom directives. controller.js houses my controllers for wiring up the modules to the html view.
So far, so good. Next I have added appSpec.js. Let's say I want to use it to test a service in my module called, "Data" that has a method, "getData()" which returns a resource.
In testactular init I have told it to watch all three files. I run Testacular and it tells me it is watching the correct files. Super.
What I don't understand is how I get the Jasmine spec know how to look at the module and controller so that they can be tested. If I simply say:
describe('Data Service', function(){
it ('should retrieve two items from the database', function(){
data = Data.getData() //my angular service
expect(data.length).toBe(2);
});
});
Not surprisingly, it has no idea what Data.getData() is.
It seems obvious that somehow I am supposed to bring my module definition and controllers into the spec before I begin writing suites. It must be so obvious that I don't see in the documentation how people are doing it. Tutorials just seem to start writing specs in the spec.js file and assume all is well.
I have seen other posts here where similar questions are being asked, but admittedly they all have a foundation I seem to be lacking. For example, one post talks about not manually creating an instance of the controller, but rather inject dependencies. Why is he creating a new $rootScope object, how is his module being referenced, etc...
I understand that my question is probably just a lack of basic understanding of the Jasmine framework, but I can't seem to squeeze any more understanding from the Jasmine readme file. Can someone point me to a basic explanation of how this is supposed to work?
Thanks.
Try doing module('myModule') in the jasmine test.
Here are some open source angular projects that have great tests to look at:
angular-app
angular-ui
bootstrap
The way that you include your definitions for your tests is through the karma.config.js file
files = [
JASMINE,
JASMINE_ADAPTER,
'../app/lib/icg/object.js',
'../app/lib/icg/geometry.js',
'../app/lib/icg/ubiquity.js',
'../test/unit/icgUbiquitySpec.js',
'../test/unit/icgObjectSpec.js'
];
Here you define which files get loaded into your browser, the first files that don't include the word 'Spec' are the definitions and the ones that do include are my test files. You need to include your definitions BEFORE your tests so that they are defined before you run the tests, which is why I include all my spec files last.