Front-end development--the test framework of the actual combat article

If you do not understand the front-end development environment, refer to building a front-end development environment

If you do not know the actual project configuration, please refer to the front-end development-the actual combat chapter

Step One: Stand by

Inside CMD, go to the public folder and stand by.

Step Two: Initialize the Karma configuration file Karma.conf.js

To execute a command that initializes the configuration file:

Karma Init

Depending on the wizard, most of the default configurations are available. See details:

Step Three: According to the current directory structure, modifyconfiguration fileKarma.conf.js

Add the JS file you want to test:

Files: [' app/dist/lib/angular/*.js ', ' app/dist/lib/**/*.js ', ' app/js/**/*.js ', ' test/**/*.js '],

Note: You must first introduce the JS file under angular.

Step four: Write a test case try it

Create a new file in the test directory testhello.js, content:

Describe ("A suite of Test", function () {It ("always true", function () {Expect ("1"). Toequal ("1"); });});    Describe ("A suite of Test", function () {It ("always false", function () {Expect ("1"). Toequal ("2"); });});

Two test cases were written. If you want to learn more, please refer to the Jasmine documentation.

Can't wait to run one, execute the command:

Karma Start

You will find that the Chrome browser opens and executes the test case automatically, with the following results:

Chrome 45.0.2454 (Windows 0.0.0) A suite of test always false FAILED expected ' 1 ' to equal ' 2 '. At Object.<anonymous> (f:/workspace1/public/test/testhello.js:9:21) Chrome 45.0.2454 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0.02 secs/0.007 secs)

Step Five: Code Coverage

Edit the configuration file karma.conf.js, modify or append the content:

Preprocessors: {' app/js/**/*.js ': ' Coverage '}

Coveragereporter: {type: ' html ', dir: ' coverage/'}

Reporters: [' progress ', ' coverage ']

Run Karma start again, find the public directory to generate a coverage folder, open index.html, look like this:

Front-end development--the test framework of the actual combat article