This Tutorial Explains How to Setup Karma & Automate Front-End Unit Testing Using Karma, Basic Configuration Options for Karma.conf.js file, etc.:
This tutorial explains the procedure of automating Unit Testing of the front-end of the software using Karma and some of its associated tools.
We will start with web applications developed using JavaScript library: ‘Jquery’ and JavaScript runtime: ‘NodeJS’; and later we will look at some JavaScript frameworks such as AngularJS and ReactJS.
=> SCROLL DOWN to see the entire list of Karma Tutorials
Table of Contents:
List Of Karma Tutorials
Tutorial #1: Karma Tutorial: Front-End Unit Testing Using Karma Test Runner
Tutorial #2: Jasmine Framework Tutorial Including Jasmine Jquery With Examples
Tutorial #3: Sample Project On Front-End Unit Testing Using KARMA And JASMINE
Overview Of Karma Tutorials In This Series
| Tutorial # | What You Will Learn |
|---|---|
| Tutorial_#1: | Karma Tutorial: Front-End Unit Testing Using Karma Test Runner This introductory tutorial explains all about how to setup Karma & automate Front-End Unit Testing Using Karma, basic configuration options for Karma.conf.js file etc. |
| Tutorial_#2: | Jasmine Framework Tutorial Including Jasmine Jquery With Examples This tutorial covers Jasmine Testing Framework & its Constructs. Also learn about Jasmine-Jquery Package that extends Jasmine to Test Jquery Applications. |
| Tutorial_#3: | Sample Project On Front-End Unit Testing Using KARMA And JASMINE This tutorial shows how to write test specs for a sample project using Karma & Jasmine. You will also quickly learn how to use other tools such as gulp, browserify. |
What Is Front-End Unit Testing?
The front-end of any software system is simply the interface where the user accesses all the functionalities provided by the system. To guarantee the best user experience, there is a need to ensure that the front-end developers have coded the front-end by keeping all the user requirements in mind.
The only way to enforce this is to write & execute tests over the developer’s codes. The deliverable should be accepted as a quality front-end code/feature only when all these tests result are in the ‘pass’ status.
Unit testing is a kind of software testing method in which each individual and independent part of the source code is tested to determine that it is good enough for use.
When we perform this unit testing on the front-end (client-side) of the software, it is called as front-end unit testing. The opposite of front-end testing is back-end testing (server-side).
Front-end unit testing can be carried out manually or automatically. Automated front-end unit testing is in trend these days as it is more effective and time-saving. There are diverse tools that are available for front-end unit testing on different programming platforms.
AngularJS and ReactJS are two popular front-end JavaScript frameworks, though ReactJS is quite new.
To carry out unit testing on an application, the front-ends built with these front-end frameworks or even those built without the frameworks, certain automation testing tools like Karma, mocha, Jasmine, jest, enzyme, etc., are used.
Firstly, we would be learning how to conduct front-end unit testing using Karma and Jasmine and then, later on, we can take a look at the other tools as well.
We will start with running front-end unit tests using fixtures for front-ends built without any of the JavaScript frameworks for front-ends. In total, we will divide our learnings in this series into three tutorials.
In this very first tutorial, we would try to have a grasp on how Karma is being set up, the second tutorial will explain Jasmine in detail, finally, in the third tutorial, we will look at its practical application.
What Is Karma Test Runner?
Karma is a node-based test tool that allows you to test your JavaScript codes across multiple real browsers. A node-based tool is any tool that needs the Nodejs engine installed for it to run and can be accessed (installed) through the node package manager (npm).
Karma is a tool that makes our test-driven development fast, fun and easy. It is technically termed as a test-runner. It is noteworthy to mention here that Karma was developed by the Angular team.
How Does Karma Work As A Testrunner?
As a test runner, Karma does three important things:
- It starts a web server and serves your JavaScript source and test files on that server.
- Loads all the source and test files in the correct order.
- Finally, it spins up browsers to run the tests.
What Else Can Karma Do?
Apart from the above-listed functions of Karma, there are few other things as well which Karma can be configured to do. For example, to publish code test coverage to coveralls.io; transpile a code from es6 format to es5, bundling multiple files together into one file and generate source maps.
In our subsequent tutorials, we will see how some of these things work.
Requirements For Getting Started With Karma
In order to get started with Karma, you need to have an understanding of NodeJS and Node package manager.
What Is NodeJS?
Nodejs solves the blocking nature of JavaScript asynchronous calls i.e. when an asynchronous function is accessed in JavaScript, it prevents the other parts of the code from running till the asynchronous call returns. However, with NodeJS, asynchronous non-blocking function calls can be made.
In technical terms, NodeJS can be said to be an asynchronous event-driven JavaScript runtime that makes building scalable networked applications easy and possible.
Getting Started With NodeJS
You simply need to install the NodeJS framework. All you need to do is visit their website and, based on your OS, you must download the installer and follow the instructions on their site about its installation.
What Is Node Package Manager (Npm)?
The node package manager (npm) is a JavaScript package manager that is used for installing other pre-built node-based applications or modules that you may want to re-use in your own application.
Npm gets installed when you install NodeJS, but npm gets updated faster than the node. Hence there may be the need for you to update your npm at some point. To install the latest version of npm, you have to run this command from your command line: npm install npm@latest -g
The above command indicates that you are asking the OS shell to execute the application npm and the application should perform the installation of the package npm. @latest indicates that the latest version of the package should be installed, -g option indicates that the package should be installed globally.
More details about npm can be found here.
There are two important things that should be mentioned here i.e. installing a package with the –save and –save-dev option.
During tests, any package installed should be installed using the –save-dev option i.e. to instruct the package manager to install the package as a development dependency and not as a project dependency (when I use –save).
Development dependency should be chosen as that package is not needed by the application during the production phase but is only required during the development phase for quality assurance purposes.
How To Install Karma?
To get started with Karma, you need to create a folder for the project that you are about to write the unit tests for. You can name it like “basicUT”. I am using Visual Studio Code as the text editor, hence I recommend you as well to download and install it. You can find it here.
Open the Visual studio code inbuilt terminal window, click the ‘View menu’, and then select the integrated terminal sub-menu.
In the terminal window, type ‘npminit’ as shown in the below figure. This command guides you to automatically set up the ‘package.json’ file which every node-based application must-have.
The package.json file stores information about your application such as its name, version number, author, application dependencies, development dependencies, test command or script and script to start the application or build the app into a runnable form.
Click here for more details on the ‘package.json’ file.
Screenshot of Initializing a package.json file using npminit
As described above, to install Karma, all you need is run the command npm install Karma@latest –save-dev. I hope that you can now interpret what that command implies.
Now, we have successfully installed Karma, what is the next thing that you need to do in order to use Karma for your front-end unit testing?
All you need to do is write the configuration file for it, and the file is usually named as Karma.conf.js for JavaScript. However, it is different for CoffeeScript. Click here to explore more about the Karma configuration file.
Overview Of Karma.conf.js File Configuration Options
The Karma.conf.js configuration file should contain the setup instruction that Karma must follow to perform the three important functions of Karma.
This configuration file can be created manually or automatically by using the command:‘karma init’, which starts to display different questions for you to answer, and Karma uses the answers that you provide to set up the configuration file.
You would have discovered by now that running the command:‘karma init’, gives the error “‘Karma’ is not recognized as an internal or external command operable program or batch file”.
This is because Karma was installed locally and not globally on the project that you are working on. Hence, your operating system shell cannot find the application Karma in its path environmental settings if you are using windows or in the .bash_profile file if you are using Mac.
To fix this error, we need to install Karma globally. Not just Karma, but the package specifically designed to enable the usage of Karma at the command line which is Karma-cli. Simply run the command, ‘npm install -g karma-cli’.
Now re-run the command karma-init, and you can see the questions as shown in the below figure. When you answer each question and press the ‘ENTER’ key, the next question will come up.
Running Karma init command on the Command line.
The table below will give you a list of the questions, their meaning along with what your answer should be in the context of this tutorial.
Karma init Questions
Q #1) Which testing framework do you want to use?
Explanation: A Testing framework is a package that provides the functions and routines needed to automate the process of coding tests for any software product of a particular language. For Example, jasmine and mocha are testing frameworks for JavaScript software packages, Junit and JTest are testing frameworks for Java, check this for more details.
Answer: An instruction appears asking you to use tab to view other available testing frameworks for a node-based application, but by default you see jasmine, so simply click enter.
Q #2) Do you want to use Require.js?
Explanation: Require.js is a JavaScript file and module loader. You may be wondering: why you need a file or module loader? Read this
Answer: In the code, we will be writing, I wouldn’t make use of require.js, so simply answer no. he question is what would we use? To be able to use the require statements to bring in external files into another file, we need a module loader, so we would opt for Browserify. You will see more details below.
Q #3) Do you want to capture any browsers automatically?
Explanation: Recall that karma is a tool that helps you test your front-end across different browsers, hence, this question is meant for you to select the browsers you would love to spin up anytime you run the test with karma start.
Answer: For this lesson, select chrome, firefox, and phantomjs. Now the question is what is PhantomJS? PhantomJS is a headless web browser that is meant for headless website testing, screen capturing, page automation and network monitoring, you can see details here.
Another question, what is a headless web browser? A headless web browser is a browser without a graphical user interface, the codes are executed in a console-like environment.
Q #4) What is the location of your source and test files?
Explanation: This question is meant to expose the path where you will save the front-end files and the test files that will perform Unit testing on them.
Answer: For this project enter public/js/*.js for the source files path and test/*Spec.js for the test files path. The *Spec.js indicates that all test files can be called anything but must contain Spec at the end with a .js file extension.
Q #5) Should any of the files included by the previous patterns be excluded?
Explanation: Sometimes, there may be the need that certain source files and test files shouldn’t be loaded, this question is meant for you to specify such files that shouldn’t be loaded in the browser by Karma.
Answer: Simply enter an empty string by pressing enter. Did you see the statement ‘You can use glob patterns, For Example, “**/*.swp”.’. Glob patterns are used to specify a set of filenames in a Unix-like environment using the wildcard character.
In our case, public/js/*.js stands for any file named any set of characters as indicated by (*) and has the file extension .js and resides in the path public/js. Read more here
Q #6) Do you want Karma to watch all the files and run the tests on change?
Explanation: When a task/test runner watches your files, all it simply means is that whenever you edit the files during development the test/task runner, reloads the file or re-performs it’s the function on the file again, without you coming to manually ask it to do it again.
Answer: So simply answer yes.
Other karma.conf.js File Content
#1) basePath: This configuration bears the name of any folder which should be used to resolve the path information provided for test and source files.
#2) preprocessors: This bears the name of the program files that should be used to process source and test files before loading them into the browser.
Why is this needed?
With the advent of ES6 coding style which is not understood by the browsers yet, there is a need to transpile the code from ES6 format to ES5 which the browser can understand, hence, babel preprocessor for Karma can be specified to be used to transpile the code from ES6 to ES5 before loading it into the browser.
There are other uses of a preprocessor, E.g. code test coverage publishing to coveralls.io, see here for more details.
#3) reporters: This configuration option specifies the package to be used to report the test results. There are several reporters for reporting code test coverage; E.g. coverage. But, by default, it is set to progress. Note that it is an array, hence you can add other reporters as well.
#4) port: This specifies the port on which the browser is spun on.
#5) colors: Specifies if the reporters should produce the reports with colorings.
#6) logLevel: This specifies the level of logging. By default, it is set to config.LOG_INFO which means that only the information is logged.
#7) singleRun: This specifies if Karma should exit after running the test once. If set to true, Karma runs the test and exits with the status 0 or 1 depending on whether the test is failed or passed, else Karma doesn’t stop.
This configuration is required for continuous integration test purposes using tools like TravisCI and CircleCI.
#8) concurrency: This specifies how many browsers Karma should start at the same time. By default, it is set to infinity.
Click here for detailed information about Karma configuration options.
If you are an observant learner, then, you must have seen these three lines.
23 03 2017 15:47:54.912:WARN [init]: Failed to install "Karma-firefox-launcher" Please install it manually. 23 03 2017 15:47:54.913:WARN [init]: Failed to install "Karma-chrome-launcher" Please install it manually. 23 03 2017 15:47:54.914:WARN [init]: Failed to install "Karma-phantomjs-launcher" Please install it manually.
Let us explore this in the below section.
Karma Browser Launchers
Karma-firefox-launcher, Karma-chrome-launcher, and Karma-phantomjs-launcher can be generally termed as the browser launchers for Karma.
Karma needs to spin up these browser applications that are independent, so a third-party application is required to provide an interface to Karma to run the shell command that spins the browsers up in any operating system that Karma is running a test on.
Thus, they are Karma browser launchers for firefox, chrome, and phantomjs respectively. Karma is popping up those statements to inform us of its inability to install those requirements and it’s then asking us to install it by ourselves manually.
To do that, we will use the node package manager and run these commands from the command line: npm install Karma-chrome-launcher Karma-firefox-launcher Karma-phantomjs-launcher –save-dev
All of us must have chrome and firefox browsers installed, with phantomjs not installed. If that’s true, then you need to install it, see here for details and click here for a quick start guide.
Conclusion
In this tutorial, we tried to understand what front-end unit testing is all about. We also introduced a major front-end unit testing tool for JavaScript software known as Karma, which is a node-based tool. We also presented the basic configuration options for Karma.conf.js file and what all they imply.
Takeaways
- Unit testing is a kind of software testing method in which each individual and independent part of the source code is tested to determine if it is good enough for use.
- When we perform this unit testing on the front-end (client-side) of the software, it is known as front-end unit testing.
- Karma is a node-based test tool that allows you to test your JavaScript codes across multiple real browsers. Hence it is termed as test-runner.
- Nodejs is an asynchronous event-driven runtime JavaScript that makes building scalable networked applications easy and possible.
- The node package manager (npm) is a JavaScript package manager that is used for installing other pre-built node-based applications or modules that you may want to re-use in your own application.
Karma alone cannot automate front-end unit testing of JavaScript applications, it also needs to work with other testing tools like a testing framework that will facilitate the writing of our test cases.
In our upcoming tutorial, we will explore about Jasmine and the Jasmine-Jquery package which extends the functionality of Jasmine to be able to test HTML fixtures that make use of the JavaScript library: Jquery.