Best practices of writing unit tests in angularjs - 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.

Related

After Learning Angular 2+, How Hard is it to Learn AngularJS?

Let me start with the justification. A lot of companies that have now been using AngularJS for years are still using it, and don't have immediate plans to migrate to 4+. So there's marketability, plus the inevitable requirement of knowing both as an Angular developer.
My question is broad I know, but I am curious to hear from folks who have experience with both. Are they completely different, or will some of the knowledge transfer? For those who know both really well, what are the key differences that really stick out to you?
In comparison to Angular (2 and higher), AngularJS has several important limitations that affect the way applications can be built.
A single injector with string DI tokens and no built-in lazy loading.
Config/run phases and synchronous bootstrapping (the overview of configuration recipes).
Scope hierarchy for data binding and its consequences for application architecture - the concept of digests, performance impact, AngularJS-specific services ($timeout, $q, ...) instead of native counterparts, etc.
jQuery-influenced approaches for manual DOM manipulation.
Considerably different set and API of built-in services, directives and filters (pipes).
No support for nested applications (possible with a hack).
No view encapsulation and component styles.
No built-in component router.
No built-in translation/i18n.
No built-in support for workers and server side rendering.
No official CLI.
The development of AngularJS has been focused on providing upgrade strategies and common features since 1.5. In a lot of aspects Angular/TypeScript experience can serve as a source for best practices for modern AngularJS development.
AngularJS is generally more flexible in the ways how its injector and compiler work and allows for a plethora of neat hacks that have been rendered impractical or impossible in Angular.
There's a lot of smaller differences that AngularJS introduces which may be discarded if the goal is to intentionally limit development practices to the ones that allow to build TypeScript/ES6/ES.next AngularJS application that follows Angular guidelines and could be easily upgraded to Angular in future.
ng-metadata does its best to unify AngularJS coding practices with Angular but still requires a good understanding of the differences between two frameworks.
However, smaller differences make a big difference if a developer works on existing AngularJS project that heavily relies on them and uses legacy coding standards.

Angular JS unit testing tutorials with examples

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

Large-scale applications using protractor?

I would like to see source code of large applications (if possible, in production) with e2e tests using protractor.
Could anybody provide links to such apps?
As others have said, finding such source code with associated tests may prove to be difficult.
After doing some searching, this is the closest thing I could find.
http://product.moveline.com/testing-angular-apps-end-to-end-with-protractor.html
Perhaps you would be better off finding the differences between how unit tests and e2e tests using Protractor are performed and go from there?
For unit tests, I have found the AngularUI/Bootstrap source and tests to be an invaluable resource. Good luck!

What are the differences between Selenium Webdriver and angular e2e and when should each be used?

I need to test an angular application and I'm thinking which testing framework to use.
Can someone please list the differences between those 2 testing framework, what is good / bad in each. when should each of them should be used? can the one replace the second?
Edit 1:
I'll try to focus my question. what I'm really interested in is the technical abilities of the 2 frameworks.
for example, some of the differences I have found:
selenium webdriver has the ability to run on grid in parallel on multiple machines, on the other side, angular scenarios runs much faster than selenium.
with selenium I can use keyboard keys such as Enter, Backspace and more and also do drag and drop actions.
selenium is not dependent on the app technology, angular is for angular apps only
Those are the type of differences I'm looking for - what can be done with one and can't be done with the other
thanks
Both should be used for testing an angular application. However, in my experience, they serve different purposes.
Angular e2e tests are your best friends when integrating new features into your application, or changing already existing features. They are there to make sure your application still behaves as expected if you are making changes to your code. These tests are much faster than selenium, do not need to be as in-depth, and, in my experience, are best executed before you push a new feature to your version control server.
Selenium tests should be used for regression testing. These tests should be far more in-depth than Angular e2e tests, and should be performed before pushing code into production.
UPDATE: This question may be less relevant now. As of January 2014, Angular plans to move from their own E2E suite to the protractor library for function tests, which use Selenium Webdriver.
If you're starting a new Angular project, you may want to look into using Protractor, as it is going to replace the current method of E2E Testing in the near future.
(Source: http://docs.angularjs.org/guide/dev_guide.e2e-testing)
I am struggling with this question as well.
Here is my thinking today:
1) Use Angular e2e testing for integration/regression testing the UI with mocks of your external dependencies (like the app server).
2) Use Selenium for integration/regression testing the complete system in a test/qa environment.
It seems Angular e2e testing helps fill in the gaps that unit testing leaves in testing view and controller logic that is tied to UI events. All of the Angular tests should mock external dependencies.
Selenium seems like the best fit for testing the entire system as the user will experience it.
This is such a subjective question, and therefore I'd first tell you to do some research. There is not much difference.
It is a very new project, whereas Selenium is a lot more mature. For instance, the JSON Wire Protocol that WebDriver is built on top of, is an actual W3C spec. This shows the project is very mature and very stable.
Due to the above, Selenium has a much much wider set of documentation, and a much wider community.
With Selenium you have a variety of different languages to use to code the tests in, as well as use the IDE. Angular limits use to pure JavaScript. For a lot of manual testers, this is a skill most do not have.
Both Selenium and Angular are open source, which (believe me) helps tremendously in debugging problems and understanding design decisions in their respective API's.

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