MV * browser unit test + code coverage, unit test coverage

MV * browser unit test + code coverage, unit test coverage

I haven't written a BLOG for a long time. Recently I got a front-end unit test and code coverage test framework, which is very simple to use. The specific usage and introduction are as follows. First, the results are as follows:

Github address: https://github.com/wf123537200/FeTestAndCov

FrontEnd-test-and-cov

This is a convenient, fast, and browser-friendly unit test framework.

Provides the following functions:

1. provides real-time front-end unit test results.

2. provides real-time display of unit test coverage.

Why does this framework exist?

As the front-end has always wanted to implement tdd development, it was previously subject to several restrictions:

1. In the jq era, dom operations cannot perform unit tests according to logic, because the dom structure has changed too much.

2. tdd is difficult to achieve when the mv * framework is used but there is no front-end intuitive front-end testing.

3. Front-end code is not tested and cannot be reconstructed or quality guaranteed.

What technology is the framework based on?

1. mocha. The mocha browser is supported here.

2. coverjs: Code plug-in using coverjs for coverage rate statistics

3. reporter fixed the BUG by using a coverage report plug-in written by a foreign senior.

How to use the framework?

Simplified Version:

1. Copy beiall.jsand all.css to the directory that can be referenced, and click test/runner.html and test/spec.jsto write the test code, and click New runner.html to see the effect.

2. Coverage rate statistics. converjs or grunt version is required.

Grunt version, automatic pin coverage

1. Download the code from github.

2. Add the following code to your Package. json (if you do not know what this is, I can only say that you are not a front-end ..)

The specific code is as follows. It is mainly to install grunt and two plug-ins. If your code already exists, congratulations, you can leave it blank:

    "grunt": "~0.4.0",    "grunt-coverjs": "*",    "grunt-contrib-watch": "~0.5.3",    "load-grunt-tasks": "~0.3.0",

3. Execute npm code npm install

4. Create GruntFile. js (For details, refer to www.gruntjs.net). if it already exists, skip

5. Add the following code to GruntFile. js (the directory structure can be changed according to the current directory structure ):

// Prefix the preprocessing part, because grunt-cover has an error, therefore, you need to use the built-in file to copy it // You can also directly copy the project vender/js/grunt-coverjs/coverjs file to node_modules/grunt-coverjs/tasks, overwrite file copy: {main: {files: [{expand: true, flatten: true, src: ['vendor/js/grunt-coverjs/* '], dest: 'node _ modules/grunt-coverjs/tasks ', filter: 'isfile'}] }}, // automatic pin merge and monitoring code cover: {compile: {files: [{// test code storage address: 'test/dist/test. js': // address for storing the original project code ['src /*. js']}] }}, watch: {js: {files: [// code to monitor changes "src /*. js "], tasks: ['cover']} // because grunt-coverjs has a bug, you need to fix it. here you need to fix grunt. registerTask ('prefix', ['copy']); // register the grunt task, or modify the default name grunt. registerTask ('default', ['cover', 'watch']);

6. If everything is OK, execute grunt pre in the root directory of the current project (only required for the first time) and grunt, and you can start to write the test code.

7. test code samples, such as the project directory test/runner.html(only allow access to all.jsand all.css), and test/spec. js. You must understand nb at first glance.

The test result is displayed only after you open runner.html directly.