Karma-jasmine Installation and use

Note: In this article, the data link, Karma plug-in installation, etc., may need to turn over the wall before the correct execution.

Jasmine is a JavaScript test tool that runs Jasmine on karma to complete JavaScript automated testing, generate coverage reports, and more. This article does not contain the use of jasmine details, these days I will write a Jasmine introductory article, interested friends can look at the time.

Step One: Install node. JS (version: v0.12.4, windows-64)

Karma is running on node. js, so we'll first install node. js. To https://nodejs.org/download/download the Nodejs version you need for your system, I downloaded the MSI version of the WINDOWS-64 bit.

After downloading, double-click Node-v0.12.4-x64.msi to run and install, this will not repeat the next step, of course, it is better to change the directory.

Figure 1 (Select Install content, default):

Step Two: Install Karma

Command-line program to run node. JS: node. js Command prompt:

Figure 2 (in all program->node.js, starting with):

Figure 3 (we will install to the E:\Karma path):

Enter the command to install karma:

NPM Install Karma--save-dev

Figure 4 (After Karma installation):

Step three: Install the Karma-jasmine/karma-chrome-launcher plugin

Continue to enter the NPM command to install the karma-jasmine, Karma-chrome-launcher plugin:

NPM Install Karma-jasmine karma-chrome-launcher--save-dev

Figure 5 (after installation of Karma-jasmine, Karma-chrome-launcher):

Step Four: Install KARMA-CLI

KARMA-CLI is used to simplify the invocation of karma, the installation command is as follows, where-G is the global parameter, so it is very convenient to use karma in the future:

NPM install-g KARMA-CLI

Figure 6 (after KARMA-CLI installation):

Karma-jasmine installation is complete:

Figure 7 (after installation, under the E:\Karma folder there will be a node_modules directory containing the Karma, Karma-jasmine, karma-chrome-launcher directories just installed, Of course the Jasmine-core directory is included):

Open karma:

Enter the command:

Karma Start

Figure 8 (there is a line of info information after the run, there are no other prompts and actions, because at this point we do not configure the Karma startup parameters.) Karma.conf.js will be added later so that the karma will automatically start the browser and execute the test case):

Figure 9 (Open chrome manually, enter localhost:9876, if you see this page to prove that the installation was successful):

Karma+jasmine configuration:

Execute the Command init command to configure:

Karma Init

Figure 10 (all default configuration issues):

Description

1. Test framework: Of course we choose Jasmine.

2. Whether to add the Require.js plugin

3. Select Browser: we choose Chrome

4. Test the file path settings, the file can use wildcard characters, such as *.js matches all the JS files in the specified directory (the actual operation found that the path is the relative path of the Karma.conf.js file, see below I give the actual test configuration and description)

5. Files that need to be excluded from the test file path

6. Whether to allow Karma monitoring files, yes indicates that when the file changes under the test path, Karma will automatically test

Examples of my tests on virtual machines:

Figure One (TestFiles and Nodejs in the e-packing directory, karma.conf.js in the folder Nodejs root directory):

The following is the full content of Karma.conf.js:

 1//Karma configuration 2//Generated on Fri 19:30:26 gmt+0800 (China Standard Time) 3 4 module.exports = function (conf IG) {5 Config.set ({6 7//base path that would be used to resolve all patterns (eg. files, exclude) 8 BasePath : ‘.. /testfiles ', 9//frameworks to Use12//Available FRAMEWORKS:HTTPS://NPMJS.ORG/BROWSE/KEYWORD/KARMA-ADAPTE R13 frameworks: [' Jasmine '],14//List of files/patterns to load in the Browser17 files: [18 ' *. JS '],20//list of files to Exclude23 exclude: [],25 +//preprocess matching files be     Fore serving them to the BROWSER28//Available preprocessors:https://npmjs.org/browse/keyword/karma-preprocessor29     Preprocessors: {},31//test results reporter to Use34//Possible values: ' dots ', ' progress ' 35 Available reporters:https://npmjs.org/browse/keyword/karma-reporter36 reporters: [' progress '],37//We    b Server Port40 port:9876,41//enable/disable colors in the output (reporters and logs) colors:true,45 46 47// Level of logging48//possible values:config. log_disable | | Config. Log_error | | Config. Log_warn | | Config. Log_info | | Config. Log_debug49 Loglevel:config. log_info,50//enable/disable watching file and executing tests whenever any file changes53 Autowatch:tru E,54//Start these BROWSERS57//available browser Launchers:https://npmjs.org/browse/keyword/karma-launch er58 browsers: [' Chrome '],59//Continuous integration MODE62//If True, Karma captures browsers, runs The tests and Exits63 singlerun:false64}); 65};

Description

If all the test files are in the same directory, we can set BasePath (also relative to the Karma.conf.js file), and then specify files, which is the file relative path under the BasePath directory;

Of course you can also do not set basepath, directly use relative to the Karma.conf.js file path, as in this example, if we keep basepath default is empty, then the files configuration should be:

Files: [      '.. /testfiles/jasminetest.js ',      '. /testfiles/test.js '    ]

Test.js content:

function TT () {    return ' abc ';}

Jasminetest.js content:

Describe ("A suite of basic Functions", function () {    It ("Test", function () {        expect ("abc"). Toequal (TT ());    }) ;});

Start karma:

Karma Start Karma.conf.js

Because this time the configuration file karma.conf.js is added, karma will follow the parameters specified in the configuration file, since we configured to test in Chrome, Karma will automatically launch the Chrome instance and run the test case:

Figure 12 (the chrome on the left is Karma automatically started, the node. js Command Prompt window on the right, and the last line shows the results of the execution):

Figure 13 (if we click on the Debug button in Figure 12, go to debug.html and press F12 to open the Developer tool and select the console window, we will be able to see the Jasmine execution Log):

If this is the case, we will change the expected value in Jasminetest.js to "ABCD" (actually "ABC") for the call to the TT method:

Describe ("A suite of basic Functions", function () {    It ("Test", function () {        expect ("ABCD"). Toequal (TT ());    } );});

Since we set Autowatch to true in Karma.conf.js:

Autowatch:true

Karma will automatically execute the test case, as the test case does not pass, so the error message is printed on the screen, and the log information in Chrome's console window needs to be refreshed debug.html after display.

Figure (Karma automatic detection of file changes and automatically re-executes the test case):

Code Coverage:

If you also want to see the code coverage for the test, we can install the Karma-coverage plugin, which is:

NPM Install Karma-coverage

Figure 15 (Procedure for installing karma-coverage):

Modify the karma.conf.js to increase the coverage configuration:

Figure 16 (mainly changes the following three configuration nodes, the other configuration content does not change):

1     //preprocess matching files before serving them to the browser 2     //Available preprocessors:https://npmjs.org/ Browse/keyword/karma-preprocessor 3     preprocessors: {4         ' ... /testfiles/test.js ': ' Coverage ' 5     }, 6  7  8     //test results reporter to use 9     //Possible values: ' Dots ', ' progress '     //Available Reporters:https://npmjs.org/browse/keyword/karma-reporter11     reporters: [' Progress ', ' coverage '],12     coveragereporter:{14         type: ' html ', '         . /testfiles/coverage/' +     },

The changes are as follows:

• Increase coverage in reporters
• Specify JS file in Preprocessors
• Add the Coveragereporter node, set the coverage report type types to HTML, enter the directory dir to specify in the directory you want

At this point the complete karma.conf.js is as follows:

Karma Configuration
Generated on Fri 19:30:26 gmt+0800 (China Standard Time)

Module.exports = function (config) {
Config.set ({

Base path that would be used to resolve all patterns (eg. files, exclude)
BasePath: ",

Frameworks to use
Available Frameworks:https://npmjs.org/browse/keyword/karma-adapter
Frameworks: [' Jasmine '],

List of files/patterns to load in the browser
Files: [
‘.. /testfiles/jasminetest.js ',
‘.. /testfiles/test.js '
],

List of files to exclude
Exclude: [
],

Preprocess matching files before serving them to the browser
Available Preprocessors:https://npmjs.org/browse/keyword/karma-preprocessor
Preprocessors: {
‘.. /testfiles/test.js ': ' Coverage '
},

Test results reporter to use
Possible values: ' dots ', ' progress '
Available Reporters:https://npmjs.org/browse/keyword/karma-reporter
Reporters: [' progress ', ' coverage '],

coveragereporter:{
Type: ' HTML ',
Dir: '. /testfiles/coverage/'
},

Web server port
port:9876,

enable/disable colors in the output (reporters and logs)
Colors:true,

Level of logging
Possible values:config. log_disable | | Config. Log_error | | Config. Log_warn | | Config. Log_info | | Config. Log_debug
Loglevel:config. Log_info,

Enable/disable watching file and executing tests whenever any file changes
Autowatch:true,

Start these browsers
Available browser Launchers:https://npmjs.org/browse/keyword/karma-launcher
Browsers: [' Chrome '],

Continuous Integration Mode
If true, Karma captures browsers, runs the tests and exits
Singlerun:false
});
};

Execute command:

Karma Start Karma.conf.js

Figure 17 (after executing the command, in the dir specified in the configuration file Coveragereporter node, we will find the generated coverage report, and Karma-coverage also generates a sub-folder that corresponds to the browser + version number + OS version that performs the test):

Resources:

Karma-runner:http://karma-runner.github.io/0.12/index.html

Karma-runner Installation steps: https://karma-runner.github.io/0.12/intro/installation.html

Karma Config file:http://karma-runner.github.io/0.8/config/configuration-file.html

Karma files:http://karma-runner.github.io/0.8/config/files.html

Karma and Jasmin Automated Unit tests: http://blog.fens.me/nodejs-karma-jasmine/

Angularjs's unittest:https://docs.angularjs.org/guide/unit-testing

Karma-jasmine Installation and use