AngularJS is certainly growing in popularity as a framework to accelerate front-end web development. The good news is automated testing with Angular is great once it is all properly configured. The not-so-good news is there aren’t many resources to help you get there. I just recently struggled through this process for a client and want to share what I learned so others can benefit from my experience.
In this series of posts, I will explain how to set up and configure Karma and Protractor to run your unit and end-to-end (E2E) tests. I will also explain how to use Karma and Protractor with Grunt to run your tests.
This series will explain the configuration for Angular testing, so I will not cover how to write unit tests. There are some example tests in the example project or see the Sources section at the end of this post for more about writing tests.
In this post, I will explain how to configure Karma to run your unit tests.
Example Project
Before we get started, a complete example project can be found on GitHub. I updated the Unit tests and added some E2E tests to the TodoMVC AngularJS app. After cloning the repository, run grunt unit-test in the app directory to run the unit tests.
What is Karma?
Karma is a JavaScript test runner that works by launching different browsers and running tests against each of them. It records the status of each test so you know which tests failed in certain browsers, making cross-browser compatibility testing incredibly easy. Note that you will need to use Karma with Windows to test in Internet Explorer.
Step 1: Installation
Install Karma and the necessary plugins using NPM.
You also need to install a few required plugins before you can start using Karma. First download the correct plugin for your chosen testing framework (Jasmine, Mocha, etc.).
Also install the launcher plugins for the browsers you want to execute your tests against. There are launcher plugins for all major browsers.
*Note: The --save-dev option saves the package as a dev dependency to the package.json file
Step 2: Configuration
Create a file called karma-conf.js in your test directory. Add the following configuration options to the file. Karma has a complete list of the configuration options available in the documentation.
Note: PhantomJS is a headless WebKit browser meaning no browser window pops up when tests are running. A headless browser is usually necessary for running unit tests on a server such as with continuous integration workflows. You can install Phantom and the associated Karma plugin with the following commands:
Step 3: Running Tests Using the Karma Command Line Interface
You can execute your tests using the Karma command line interface (CLI). Install it globally using Node.
Now you can execute tests with the karma command and passing in the location of your config file. There are a few ways to run your tests.
Run all your unit tests once
Start the Karma server then execute tests against the server using a different console window. Use this method if you are connecting external devices.
Re-run tests when changes are made to JavaScript or test spec files
Using the first command, you should see the Karma server starting and the following output.
Note: If you are using Grunt with your application, see part three in this series for an explanation on setting up Karma and Grunt.
Connecting Other Devices and Browsers
Another nice feature of Karma is you can connect other devices to the running Karma server and run your tests in that device’s browser. If you are running Karma with the autoWatch flag or you are using Grunt watch, Karma will automatically re-run all the unit tests in each connected browser and device when you make changes.
To do this, start the Karma server with the karma start test/karma-conf.js command. Point your device’s browser to the machine and port running Karma. This is port 9876 by default. You can find the port by looking at the URL of any open browser window running Karma (see screenshot). Karma will also provide the test results of these browsers. If you are running locally, your devices will need to be on the same network. Now run the karma run test/karma-conf.js command and you should see the new browser listed in the test results.
Conclusion
Karma is a powerful tool that can be used to automate testing across browsers and devices. You should now understand how to configure Karma in your project to run unit tests. In the next post, I will explain how to use a few additional Karma plugins to help with your testing.
Sources
Unit Testing With Angularjs, Grunt, Karma, and Travisci
Full-Spectrum Testing With AngularJS and Karma
The post Testing With AngularJS Part 1: Setting up Unit Testing With Karma appeared first on blog.credera.com.