When you generate an app with Generator-M-Ionic it comes with a fully configured and ready-to-use setup for unit and end-to-end testing.
The setup uses Karma for your unit tests and Protractor for end-to-end tests. The Karma configuration consists of a fully configured karma.conf.js
and some sample tests in test/karma/
. Likewise the Protractor configuration consists of a protractor.conf.js
and sample tests in test/protractor/
. Both also provide a ready-to-use .eslintrc
configuration that extends the one in app/.eslintrc
.
├── test/ │ └── karma/ │ └── protractor/ ├── karma.conf.js ├── protractor.conf.js
Using any of Generator-M-Ionic's sub-generators will also create a sample unit test file for that component in test/karma/<module>/
.
If you are new to testing with Angular we recommend angulartestingquickstart.com to learn about testing with karma and protractor.
To check if all tests in your project are running properly use:
gulp karma
# and
gulp protractor
Hint: gulp watch
and gulp protractor
should not be run at the same time, this will yield unexpected and weird results. Make sure to run them separately!
Advanced: You can start both commands with optional parameter --conf=configfile.js
. So in case you have different setup configurations, you can run
gulp karma --conf='karma.extra.conf.js'
or gulp protractor --conf='protractor.ios.conf.js'
.
In addition to providing Karma as a task runner for your unit tests our setup is configured to use Jasmine as a testing framework. This is done in the karma.conf.js
. There are other options besides Jasmine but since Protractor is using it too, it's the simplest just to write your unit tests with Jasmine as well.
Here are some good resources to get started with writing unit tests:
- AngularJS Developer Guide - Unit Testing
- Smashing Magazine - Unit Testing In AngularJS
- careful: this article uses Mocha, Chai & Sinon instead of Jasmine. Still worth a look for general concepts!
Learn more about Protractor and on writing end-to-end tests here:
- Protractor for AngularJS - http://ramonvictor.github.io/protractor/slides/#/
- Jasmine-Matchers: additional matchers for Jasmine - https://github.com/JamieMason/Jasmine-Matchers