Angular JS unit testing tutorials with examples - angularjs

I am new to karma-jasmine unit testing for Angular js. So guys please can u share good tutorials?

First of all, and most IMPORTANT:
Unit-testing is similar in all other languages.
You have to keep in mind the main features of writing testable code.
Note: There is a good Pluralsight video ( Which cost money ) by Misko Hevery on Writing Testable Code).
First: Watch this youtube by Vojta Jina - Installing and Starting Karma, the person who wrote karma.
Second: Watch this 1 Hour tutorial which I highly recommand : Introduction to AngularJS Unit Testing By Jim Levin
After you complete those you should be able to test every piece of code in your Angular Project.
Good Luck.

I've written a number of tutorials detailing how to get up and running with Karma and Jasmine for Unit Testing in AngularJS. I've also written a series of posts detailing ngMock in depth, which is Angular's own module that provides support for testing controllers, services etc in isolation.
Here's a link to a page that lists all these articles: AngularJS Unit Testing Tutorials

There is an amazing documentation on Jasmine Testing provided by Angular IO on their official website.
https://angular.io/docs/ts/latest/guide/testing.html
Good Luck

Related

What unit testing is best for an application which is running on Angular 1.5 among Karma, Protractor or Jasmine or others?

I have a AngularJS 1.5 application with 5-6 modules with lots relying on directives and stuff.
How do i figure out which testing is better for our application to actually built a test harness over it?
I have been through many types, some are runners and e2e etc.,
Karma, Protractor, Jasmine are the most familiar ones but how would we test the application;
is it whole application one at a time like other automation tools?
OR
is it functionality based?
OR
is it file based?
I know i am pretty much naive to ask this but feeling hard to find the differences and whats best for the application to cover the test harness.
Thanks in advance...
Well as we know,
According to angular documentation, they are recommending Karma and jasmine.
Karma
Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.
Karma is a NodeJS application, and should be installed through npm/yarn. Full installation instructions are available on the Karma website.
Jasmine
Jasmine is a behavior driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this
As per documentation
And you have to go with module testing instead of file testing
It will be controller or functionality based

MeteorJS Tutorial & detailed explanation

I just finished the JS course on codecademy and started learning meteorJS for Angular 2 now for building my first real application. I started with the simple-todos tutorial but noticed that the tutorial isn't for real noob beginners but instead for intermediate programmers. I do not understand what the single lines of code do
for example:
angular.module('simple-todos', [
angularMeteor
]);
This is one of the many examples which are not clearly explained in the tutorial.
Do you know a source where I could learn all this noob stuff before I continue with Meteor?
Thank you!
Personally, I think the official Meteor tutorials do a really good job of explaining all the meteor specific stuff that it covers. One thing you could do is also pull up the Meteor API and read the details about a specific function it asks you to use as you progress. This will certainly provide some more meat to the tutorial.
The piece of code that you provided in your question is actually Angular specific code. Angular itself has a somewhat steep learning curve so by doing that tutorial, you are taking quite a big step by trying to learn Angular and Meteor at the same time.
Instead, I highly recommend you follow the Meteor Blaze tutorial. It provides much more detail and it covers ONLY meteor specific stuff. Once you finish that then read the Meteor guide and if you have the funds, buy the Discover Meteor book and follow that tutorial. This approach is exactly how I learned Meteor and it was very successful for me.
Be sure to just read along in the Meteor API and Blaze API as you progress thru any tutorial and you will be well on your way (and then later you can jump into learning Angular or React with Meteor if it suites your fancy)! Honestly, I have had a lot of success with Blaze and use it for Meteor apps 99% of the time.

Best practices of writing unit tests in angularjs

I'm new to AngularJs unit testing, and I can't decide on what's the best strategy when it comes to unit testing my AngularJs + ASP.NET MVC(C#) application.
I am looking for a best practices of writing unit tests in AngularJs.
I am also looking for a tools for same.
Note : My applications are mostly data centric.
Look no further than the documentation of unit-testing on AngularJS's site: https://docs.angularjs.org/guide/unit-testing.
QuickLeft, Smashing Magazine and SitePoint has some good examples of how to unit-test. They all include certain practices used commonly. They all mention tools used as well such as Karma, Protractor etc.

How to test AngularJS App using Karma/Jasmine

Till now I have been reading the Angular JS official docs, and some other sites which have demonstrated Unit testing in Angular JS. But all of them have just started the explanation with an example file which contains some test code. But nowhere could I find the Pre-steps to write the unit testing code. Something like, where do we write our test cases? any Specific folder location? How to run the tests etc. Can anyone please guide?
Really appreciate the help and time spent on the question.
The question where to put the unit tests is more like a matter of personal taste and which directory layout you choose. I prefer a feature-driven layout, putting all files for a feature in a directory and that includes the unit tests as well. If you do that, you have to follow certain naming conventions like:
myfeature.module.js
myfeature.controller.js
myfeature.controller.spec.js /* this is the unit test */
myfeature.html
myfeature.less
I suggest reading the angular styleguide from John Papa and if you want to get kickstarted, use one of the generators out there. In my one (cc-angular) I tried to stick to these rules and jasmine with karma and e2e tests are built in.

Best Approach to Test Backbone Views with Templates Using Jasmine

I am learning backbone so I am building a simple Backbone app. I am using jasmine framework to test my backbone app.
As luck would have it, my first jasmine test was for a Backbone View. This is a very simple view that uses a haml-js template. App users rails 3.1 so the whole thing is packaged via sprockets with the help of haml-sprockets gem, and it works.
However when I test with jasmine I get an error
TypeError: Cannot call method 'backbone/templates/admin_personal_attribute_template' of undefined
I understand this is because haml-js template is not present.
Normally this template is accessed like this:
$(this.el).html(window.JST["backbone/templates/admin_personal_attribute_template"]({pars:this.model.attributes}));
(i.e. haml-sprockets gem compiles is using haml-js and appends to window.JST).
I am looking for the 'best', i.e. least disruptive and, hopefully, simple, way to test my views + templates in jasmine.
I have found a number of ways to do it, but not sure as what is the 'best':
Use jasmine-headless-webkit . This will utulize sprockets, but loose ability to access jasmine server, so simple but some loss of flexibility
Using phantom.js as desribed by japhr (sorry stackoverflow prevented me from posting more links) will work around the server-side limitations, but this seems to be a very new and untested method, so flexible but not simple
Pre-generate your templates as desribed here. This is conceptually simple, but require some maintenance - so some coding work
Assuming I have a project with ~ 20 models and ~ 40 views and templates, what is the best way to go?
Check this article: Unit Testing Backbone Applications With Jasmine
It has some examples how to implement unit tests for Backbone JS view
Also there is an O'Reilly book "Developing Backbone.js Applications" which has a whole chapter on testing views with Jasmine and qUnit
I've written an in depth blog post on making Backbone.js, CoffeeScript and Jasmine play nicely together. Hopefully it will be useful for anyone who stumbles on this question: http://ihid.co.uk/blog/backbone-js-coffeescript-jasmine-haml-and-rails-working-together

Resources