Detailed description of karma & amp; jasmine automated testing,
Front-end package management tools
Code reuse and reuse are an important way of quick development. However, the original code modules are scattered on various platforms, so it is hard to find them. As a result, effective management by programmers has become a major challenge. In this case, the dependency (packages, plug-ins, and tools can all be called; the essence is that others write the encapsulated code module) management tools should be born on demand. Dependency management tools use simple commands to provide dependency search, installation, and uninstallation operations, which are favored by programmers.
The most common dependency management tool for front-end Node. js is npm. What is npm for Node. js? Pip is for Python, gem is for Ruby, pear is for PHP, and maven is for Java.
? Setup of Karma Environment
Install karma (karma is used for run automated test scripts)
npm install karma --save-dev
Install karma-jasmine (jasmine is used to compile unit test cases)
npm install karma-jasmine --save-devnpm install jasmine-core --save-dev
Install karma-chrome-launcher (used to start the chrome browser; if it is firefox, karma-firefox-launcher can be used; similarly, other options are available)
npm install karma-chrome-launcher --save-devnpm install karma-firefox-launcher --save-dev
Install coverage (test code coverage)
npm install karma-coverage --save-dev
? Jasmine
Jasmine has four types of functions:
1. Group describe ????
// Declare a type of test case describe ('add algorithm ', function () {// some variables can be defined in it, such as var a = 1, B = 2 ;});
2. Use Case it
// Declare a type of test case describe ('add algorithm ', function () {// some variables can be defined in it, such as var a = 1, B = 2; // declare a test case it ('test addone', function () {}); it ('test add two', function (){});});
3. Expect expect4. match ****
// Declare a type of test case describe ('add algorithm ', function () {// some variables can be defined, such as var a = 1, B = 2; // declare a test case it ('test addone', function () {// The expected custom function addOne (1) returns 2, reverse read code reverse CT (2 ). toEqual (addOne (a); reverse CT (3 ). toEqual (addOne (B) ;}); it ('test add two', function () {CT (3 ). toEqual (addTwo (a); CT (5 ). toEqual (addTwo (B ));});});
Can you learn more about jasmine on github or the Getting Started website?
Github address :? Https://github.com/jasmine/jasmine
Guide address :? Https://jasmine.github.io/2.0/introduction.html
? Karma configuration file
When I read this article, I may have a question: Where should I put the tested function and test script?
Next let's take a look at it? Karma configuration file
In the directory where karma.exe is located or karma has been installed to global
Command Line input (you can also name it **. conf. js)
karma init karma.conf.js
Configure the file as prompted.
Configure the tested code path and test script path (**/? * Wildcard file path/name)
Omitting or omitting ............
The following prompt is displayed, indicating that the configuration is complete.
If you want to do some personalized processing, you can open the file and add/modify configuration items
/*** Created by lonelydawn on 2017-03-04. */module. exports = function (config) {config. set ({// base path that will 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: ['Public/bower_components/angular. js', 'app/javascripts /**/*. js', 'test /**/*. js'], // list of files to exclude: [], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor // code coverage test, use karma-coverage preprocessors: {'app/javascripts /**/*. 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: 'coverage/'}, // web server 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: ['chromi'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false })};
Then run the command line to start the test (you must pay attention to the path issue during configuration and startup)
karma start karma.conf.js
?
Use of karma in Gulp
Gulp is a simple and easy-to-use automated building tool. Its Chinese documents are detailed.
Gulp Chinese document address: http://www.gulpjs.com.cn /?
?
To use karma in gulp, you no longer need to install the gulp-karma component.
Original github:
Karma? Integration? Gulp. js-based build .?
?
Configure Karma in node_modules of the project and after creating the configuration file
Write in gulpfile. js
Var gulp = require ('gulp'); var Karma = require ('karm '). server; // automated front-end testing gulp. task ('test', function (done) {new Karma ({// configFile: _ dirname + '/karma. conf. js', // exit singleRun: true} after the test is executed. done ). start () ;}); gulp. task ('tdd ', function (done) {new Karma ({configFile: _ dirname +'/karma. conf. js'}, done ). start ();});
Then, Type
gulp test
Or
gulp tdd
Run the test.