Front-end novices use karma+mocha+chai+sinon for angular JS unit testing

Keywords: Attribute angular npm JSON

Here we just talk about how to build the environment.
Type selection: A comparison is made between jasmine and mocha+chai, and the latter is chosen according to the needs of the project.

Installing dependency packages and environments

Install directly by executing the following commands or run npm install (package.json is configured) in the project directory.

npm install  chai mocha sinon angular-mocks@1.5.5 --save-dev
npm install    karma-mocha karma-chai  karma-sinon --save-dev
npm install    karma-chrome-launcher  --save-dev
npm install    karma-coverage  --save-dev
npm rebuild  //build packages for current platform

Note: The angular-mocks version number should be the same as the angular JS version number.

Generate karma.config.js

In the project directory, confirm the existence of karma.config.js, if not, use the run karma init to fill in the corresponding options according to the prompt to generate the configuration file.

Modify the karma.config.js file according to the project situation

Note the parameters:

1) The automatically generated configuration file may not have plugins, so plugins can be registered manually as follows

plugins:[
'karma-mocha',
'karma-chai',
'karma-coverage',
'karma-sinon',
'karma-chrome-launcher',
'karma-jasmine'
],

2) files, add all the JS files needed for testing (runtime JS and test js), you can use glob pattern to match paths, but it is recommended not to use too broad pattern to match js, because the order will cause errors in JS loading during testing. Dependent JS are placed at the top to ensure that the file order meets the dependency requirements. Take myApp as an example, the order is as follows:

files:[
    'lib/angular.min.js',
    'lib/angular-mock.js',
    'lib/angular-md5.js',
    'lib/jquery-2.2.4.min.js',
    'lib/jquery.page.js',
    'lib/es5-sham.min.js',
    'lib/bootstrap.min.js',
    'lib/angular-multi-step-form.js',
    'lib/angular-scroll-glue.js',
    'lib/angular-ui-router.min.js',
    'lib/angular-translate.js',
    'lib/angular-translate-loader-partial.js',
    'lib/ng-tree-dnd.js',
    'lib/angular-cron-jobs.min.js',
    'lib/ngDialog.js',
    'js/app.js',
    'js/service/constant.js',
    'js/service/**/*.js',
    'js/directive/**/*.js',
    'js/filter/*.js',
    'js/controller/**/*.js',
    'test/**/*.test.js'
],

3)singleRun
When testing the development environment, it is recommended to set it to false, but in the jenkins integration environment, the configuration item must be set to true. When false and autoWatch is true, karma automatically monitors file changes and runs all test cases.
4)browsers
When running the test in windows or other OS with GUI, it can be set as chrome or other browser, and the specific keywords can be referred to the karma configuration file.
For situations where there is no GUI or no GUI needs to be opened, you can set

browsers:['ChromeHeadless'],
//or
browsers: ['PhantomJS']

The former requires installing chrome with a version number higher than 59, while the latter requires installing the following two components in the first step:

npm i -D phantomjs-prebuilt –phantomjs_cdnurl=https://bitbucket.org/ariya/phantomjs/downloads
npm i -Dkarma-phantomjs-launcher

At present, the maintenance of phantom JS version is facing difficulties. It is recommended to choose the version after chrome 59.

5)frameworks
Because step one chooses mocha+chai+sinon, fill in frameworks: ['mocha','chai']
If you choose to use jasmine, just fill in jasmine here.

Add UT

Add xx.test.js to the test specified directory of the root directory, and the path needs to be included in the above files configuration item.

Running test cases

Configure package.json file

"scripts":{
"unittest":"karma start karma.config.js –single-run"
},

Then you can use NPM run unit test to run test cases
Run from the command line in the project root directory

karma start karma.config.js

perhaps

Karma runkarma. config. JS (singleRun = true case)

Or:

npm run unittest

Potential problems:

1)Can not load"coverage", it is not registered!
If karma-coverage does exist under the project directory node_modules, install karma and karma-coverage again using the-g option

2) can't initiate module XXXX (angular js), indicating that the JS sequence of files may be problematic or less registered JS files.

Posted by bouwob on Tue, 11 Dec 2018 04:45:05 -0800