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
├── 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
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
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'.
Karma and Jasmine for unit tests
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!
Protractor for end-to-end tests
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