Karma is introduced

Karma is the new name for Testacular, which was open-source by Google in 2012 and renamed Karma in 2013. Karma is a Node.js JavaScript Test execution management tool (Test Runner). The tool can be used to test all major Web browsers, can be integrated with CI (Continuous Integration) tools, or can be used with other code editors. A powerful feature of this testing tool is that it can monitor changes to files and then execute on its own, displaying test results via console.log.

Install the karma

Karma relies on NodeJs and NPM package management tools. Before installing it, make sure that node and NPM exist (I won’t cover it here).

The first step is to install the CLI tool karma-cli. Only with the CLI tool can you execute karma commands globally

NPM install karma-cli-g // Install the cli tool for karma

Create a new directory to perform the whole process

$ mkdir karma-test

$ cd karma-test

Generate package. Json

$ npm init -y

Install the karma

$ npm install --save-dev karma

Initialize the karma

$karma init // select the testing framework of Jasmine Which testing framework do you want to use? Press TAB to list possible options. Enter to move to the next question. > jasmine // Require. Do you want to use require.js? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > no // PhantomJS is a headless browser, but you need to install PhantomJS separately // You can also select multiple browsers. Test cases will be executed in multiple browsers // Here I have just selected PhantomJS (type blank to execute the next step). Press TAB to list possible options. Enter empty string to move to the next question. > PhantomJS > // Tell the code path of the test case to be executed, Regex support, can write multiple (type blank next) What is the location of your source and test files? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > src/**/*.js > test/**/*.js 14 10 2016 10:49:43. 958: WARN (init) : > // Should any of the files included by the previous patterns be matched with this pattern  be excluded ? You can use glob patterns, Eg. "**/*.swp". Enter empty string to move to the next question. > // files and run the tests on change ? Press tab to list possible options. > yes Config file generated at "E:\demo\karma-test\karma.conf.js".

When the command is finished, we can see that the karma.conf.js file is generated in the current directory. At the same time, depending on our configuration, package.json has some additional dependencies. For example, in my package.json, there are more

"DevDependencies ": {"karma-jasmine": "^1.1.2", "karma-phantomjs-launcher": "^1.0.4"}

Since we chose to use the Jasmine framework and PhantomJS, we automatically added these two Karma dependencies.

Install the new dependencies

$NPM install jasmine $NPM install jasmine-core --save-dev $NPM install jasmine-core --save-dev

Write the first test case

Create a SRC directory and a test directory and create index.js and index.spec.js files, respectively. The simple test I’m going to do is to test two functions in index.js (one addition function and one multiplication function). The index.js file is as follows:

Function add(x){return function(y){return x + y; }} // function multi(x){return function(y){return x * y + 1; }}

The index.spec.js file is as follows:

Describe (" function(){it(" function(){var add5 = add(5) expect(add5(5)).tobe (10)}); Function (){var multi5 = multi(5) expect(multi5(5).tobe (25)})})

Once the single-test code is written, you can use Karma Start to run unit tests. Because there is an error in our multiplication code, the test result looks like this:

23 07 2018 15:28:06.122:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js". 23 07 2018 15:28:06.334:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js". 23 07 2018 15:28:06.570:INFO [watcher]: Changed file "E:/demo/ karm-test /test/index.spec.js". PhantomJS 2.1.1 (Windows 8 0.0.0) Optional function unit test 26 to be 25. <Jasmine> test/index.spec.js:9:31 <Jasmine> PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.004 secs / 0.003 secs) TOTAL: 1 FAILED, 1 SUCCESS

Change the code for the multiplication function to normal and enable Karma Start again for testing:

23 07 2018 15:30:39.779:INFO [watcher]: Changed file "D:/test/karma-test/test/index.spec.js". PhantomJS 2.1.1 (Windows 8 0.0.0): Changed file "D:/test/karma-test/test/index.spec.js". Executed 2 of 2 Success (0.005 SECs / 0.003 SECs) Total: 2 Success

Test coverage

Karma’s plugin, Karma-Coverage, provides support for testing code coverage. First you need to install the Karma plugin, and then you need to configure it in three places in the configuration file.

$ npm install karma-coverage --save-dev

Modify the karmat.conf.js configuration

// Karma configuration module.exports = function(config) { config.set({ ... For example, if all of your code files are in the SRC folder, you will need the following configuration. preprocessors: { 'src/*.js': CoverageReporter: {CoverageReporter: {CoverageReporter: {CoverageReporter: {CoverageReporter: {CoverageReporter: {CoverageReporter: {CoverageReporter:}} 'HTML ', dir:' Coverage /'}, // Add config report select reporters: ['progress',' Coverage '],... })}

Execution of karma start again, we can see that the coverage directory has been generated. Open the index.html in the directory in the browser and we can see that the coverage has been generated.