How to test AngularJS App using Karma/Jasmine - angularjs

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.

Related

How to measure code coverage in a webapp through unit and functional tests

I'm a little bit stuck with a task that I have been researching. It's about code coverage in a react webapp.
I implemented a few unit tests using jest + enzyme. also some functional test, using cucumber to get gherkin features and puppeteer for browser automation.
I have able to get the coverage from the code built by webpack and served on my localhost using puppeteer and istanbul through functional tests. Also, I get code coverage from unit test using jest (btw, it include istanbul to do that).
The problem is: I feel those are two diferents metrics, because I test components with jest + enzyme file by file, and in the other hand, I have code coverage from puppeteer that actually is a single built js file.
The goal should be get code coverage from unit tests and functional tests.
So, my questions are:
has sense, mesure the code coverage on unit tests and functional tests?
has sense, merge code coverage from unit tests and functional tests? and if has sense how to do that?
what is the best aproach to get code coverage from a webapp?
Overall your approach to measuring, recording and reporting code coverage will be tailored to your use case. This means that there aren't clear right or wrong answers to your question. I am going to try to give you ideas that help you decide the best approach for you and your team.
I would start by asking yourself why are we measuring code coverage? I.E. what is the change in how the team operates that you are trying to create? I will come back to this question while answering your specific questions.
It is worth at this point making sure that code coverage will encourage the behavior you are looking for. For more on this look at this paper. I have tried to tackle this question in a recent blog post.
I am making a few assumptions here about the layout of the team that you are working in so please forgive me if the assumptions are wrong.
measure the code coverage on unit tests and functional tests?
If you want to encourage the team to write tests, or, automate a significant portion of testing then yes it is appropriate to measure code coverage as it is a great measure of whether people are adding tests at the same rate as the code is changing.
merge code coverage from unit tests and functional tests?
Let's consider the example where you want to encourage developers to write more unit tests. In this case, I would say no, don't merge coverage. The desired behavior change is for the developers to write more tests, therefore, you don't want to mask their lack of testing by reporting a metric that includes functional tests from a QA team.
However, if you are considering the Software Engineering team and would like more testing from the whole team (Developers and QA) then absolutely combine the coverage numbers and report the total coverage.
if has sense how to do that?
There are plenty of tools out there that will allow you to combine coverage information from multiple runs. One of my favorites (assuming you can use cloud-based services) is CodeCov. This is a great way of visualizing your code coverage with minimal setup effort.
what is the best approach to get code coverage from a webapp?
I am going to leave this one for someone who understands in more detail than I do the technologies that you are using.

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

Karma-Jasmine with AngularJS realtime project

I have gone through several tutorials but none could really help me out.
I have also read through the documentation, which is easy for beginner test cases like to test for an array/string, etc. But i need some help in using it in a full-time project.
How to write these unit tests for not-so-simple cases like, matching what is displayed on the website is what should be expected?
Thanks!

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

How to add tests to Ionic/Phonegap project?

How to add tests like karma/jasmine to existing Ionic project? I know that there are some ionic generators that also add some test stuff...
But is there something similar for existing projects?
Thanks for any help!
Yes, there are couple of good generators. The most popular one is generator-ionic. It's a Yeoman generator and it has a build-in setup for static code analysis, running unit tests and checking code coverage. Another good alternative is generator-mcfly. It also include infrastructure for running tests and some more UI components.

Resources