Unit testing is an important part of the software development process as it allows a developer to spell out their intent by creating tests containing assertions that prove it. In a dynamic language like JavaScript it’s even more so important to do so for the project’s stability, quality and longer term maintainability. JavaScript’s great flexibility and power to quickly create software also presents a lot of opportunity to create problems if checks and balances are not in place to maintain order. In the following blog series I’ll talk a bit about how to create unit tests for applications written with Ionic, a mobile hybrid framework based on Angular.js and Cordova which are JavaScript based technologies.
Ionic uses Gulp, a JavaScript based streaming build system, out of the box so we’ll also leverage Gulp to create a task for running unit tests and seeing their results. Gulp tasks are generally composed by using an existing Gulp module, as thousands exist to perform almost any task you can think of, and some custom code to configure those modules for your project. I’ll create a task using Karma, a JavaScript test runner, that will load our test files and execute them in the headless browser called PhantomJS and then display the results on the command line. Finally, we’ll use the Jasmine test framework along with Angular mocks in order to create suites of tests containing assertions about our code that we expect in order for it to run properly. In our ionic project directory the following npm and bower commands will install the required packages:
npm install karma –save-dev
npm install karma-jasmine –save-dev
npm install karma-phantomjs-launcher –saved-dev
npm install -g karma-cli
npm install karma-spec-reporter –save-dev
npm -g install phantomjs
bower install angular-mocks –save-dev
Karma uses a configuration file to tell it how to run tests, what source files it should include, how to display results and more. In order to create a configuration file we can use karma’s command line client:
karma init
Karma guides you through it’s initial setup on the command line with a series of questions, for this example I specified:
– Testing framework: Jasmine
– Require.js: no
– Capture any browsers automatically: PhantomJS
– Source location: www/js/**/*.spec.js
– (Default for the rest)
By default Karma is configured to use the ‘progress’ reporter which will show an ascii progress bar in the console output with a summary of the test results. In order to see a bit more detail about what tests are passing/failing change the reporter from ‘progress’ to ‘spec’ in the generated Karma config file:
// test results reporter to use
// possible values: ‘dots’, ‘progress’
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: [‘spec’],
In the gulpfile.js that is created with our Ionic project, I’ll add a task to kick off Karma and run our unit tests:
var Server = require(‘karma’).Server;
gulp.task(‘test’, function (done) {
new Server({
configFile: __dirname + ‘/karma.conf.js’,
singleRun: true
}, done).start();
});
Now any tests that have been created in our project can be run and have the results displayed in detail on the command line by running ‘gulp test’ in our project directory
$ gulp test
[22:32:38] Using gulpfile C:DevelopmentBloggingionicutgulpfile.js
[22:32:38] Starting ‘test’…
05 03 2016 22:32:38.745:INFO [karma]: Karma v0.13.21 server started at ://localhost:9876/
05 03 2016 22:32:38.757:INFO [launcher]: Starting browser PhantomJS
05 03 2016 22:32:40.488:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#5PSNRP-konOjgWF1AAAA with id 41621962
Dashboard controller tests
When the dashboard view is shown
✓ Should show a one time welcome message
✓ Should store that the message was shown in local storage
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.039 secs)
TOTAL: 2 SUCCESS
[22:32:40] Finished ‘test’ after 2.08 s
In the next part of this blog series I’ll talk a bit about Jasmine test framework concepts and how to structure tests within an Ionic project
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.