Web front end automation unit test

There are many unit tests, such as auxiliary development, predictive development, improving module reliability and so on.

It can also improve the project development ideas.

Precondition requirement

Based on nodejs environment, jasmine and Karma are required.

nodejs: not much, very prominent.

https://nodejs.org

jasmine: the old js test framework is responsible for unit testing, and test scripts are written according to its specifications.

https://github.com/jasmine/jasmine.github.io

Karma: responsible for automatic execution of test scripts and batch processing of scripts.

http://karma-runner.github.io

Installation environment

  1. Initialize npm
npm init
  1. angularJS is installed in the project. If script files already exist in the project, there is no need to install them
npm install angular --save-dev
  1. Install Karma
npm install karma --save-dev
  1. Global installation of karma cli, easy to call karma
npm install karma-cli -g
  1. Install jasmine framework support
npm install karma-jasmine --save-dev
  1. Install Jasmine core framework core
npm install jasmine-core --save-dev
  1. Install the chrome browser controller
npm install karma-chrome-launcher --save-dev
  1. Install the execution result plug-in karma Jasmine HTML reporter. There are many plug-ins. It is not necessary to install the plug-in
npm install karma-mocha-reporter --save-dev
npm install karma-jasmine-html-reporter --save-dev

Parameter configuration

  1. Initialize karma and generate the karma.conf.js file, which is the karma configuration file
karma init
  1. After execution, the terminal will prompt some information, just press enter all the way to confirm.

  2. Configure the karma parameter and modify the karma.conf.js file

module.exports = function (config) {
    config.set({

        // Basic path, used on files, exclude attribute
        basePath: './VC',


        // Test framework
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha','jasmine'],


        // List of files that need to be loaded into the browser
        // Such as framework files, dependency files, plug-ins
        // Tested script file and corresponding test script
        files: [
            'PC/Public/Common/JS/AngularJS/1.7.6/angular.min.js',
            'PC/Public/Common/JS/AngularJS/1.7.6/angular-mocks.js',
            'PC/Public/Common/JS/AngularJS/1.7.6/angular-route.js',
            'PC/Public/Common/JS/AngularJS/1.7.6/angular-sanitize.js',
            'PC/Public/Common/JS/ocLazyLoad/1.1.0/ocLazyLoad.min.js',
            'PC/Public/Common/JS/CommonJS.js',
            'PC/Main/login/login.js',
            'PC/Main/login/login.spec.js'
        ],


        // Excluded files list
        exclude: [],


        // Process matching files before browser use
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {},


        // Use test result reporter
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['kjhtml'],


        // web server port
        port: 9876,


        // Enable or disable colors in output reports or 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 or disable automatic detection of file changes for testing
        autoWatch: true,


        // Test launched browser
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // Enable or disable continuous integration mode
        // When set to true, Karma will open the browser, perform the test, and finally exit
        singleRun: false,

        // Concurrency level (number of browsers started)
        // how many browser should be started simultaneous
        concurrency: Infinity,

        // Dependent plug-in configuration
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-mocha-reporter',
            'karma-jasmine-html-reporter'
        ]
    })
}

Execution testing

  1. Execution code
karma start karma.conf.js

Tags: Front-end npm AngularJS angular github

Posted on Mon, 02 Dec 2019 19:31:11 -0500 by elgoog