This article documents the steps for unit testing in Angular and the implications for jasmine and Karma configuration

Jasmine and karma

Karma: a Node.js-based JavaScript Test execution process management tool (Test Runner). Can be used to test all major Web browsers, can be integrated into CI tools, and can be used with other code editors. It can monitor (Watch) file changes and then perform them on its own, displaying test results through console.log. Jasmine: A framework for writing Javascript tests that does not rely on any other Javascript framework and does not require DOM. The grammar is neat and clear.

Create an Angular project using the Angular CLI


1. npm install -g @angular/cli
2. ng new project-agular-unit-test

Copy the code

Karma. Conf. Js:

// Karma configuration file, see link forMore information / / https://karma-runner.github.io/0.13/config/configuration-file.html. The module exports =function(config) {
    config.set({
        // 基础路径（适用file、exclude属性）
        basePath: ' '@angular/cli refers to the Angular test set frameworks: ['jasmine'.'@angular/cli'], // load plugins: [require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')], client: {// Clear clearContext when the test runs:false // leave Jasmine Spec Runner output visible in'test.ts' files: [{pattern:'./src/test.ts', watched: false}], / / allow the file to the browser before for some preprocessing operations / / very rich preprocessor: https://www.npmjs.com/browse/keyword/karma-preprocessor preprocessors: {'./src/test.ts': ['@angular/cli']}, // specify the request file MIME type MIME: {'text/x-typescript': ['ts'.'tsx']}, / / plug-in 【 karma - coverage - Istanbul - reporter 】 the configuration items coverageIstanbulReporter: {/ reports/coverage report way:'html'.'lcovonly'],
            fixWebpackSourcePaths: true}, // Specify the Angular CLI environment angularCli: {environment:'dev'}, / / test results report way reporters: config. AngularCli && config. AngularCli. CodeCoverage? ['progress'.'coverage-istanbul'] :
            ['progress'.'kjhtml'],
        port: 9876,
        colors: true// Log levellogLevel: config.LOG_INFO, // Whether to listen on test file autoWatch:true, // Test browser list Browsers are: ['Chrome'], // Continuous integration pattern,true: indicates that the browser exits singleRun after executing the test:false
    });
};
module.exports = function (config) {
  config.set({
    basePath: ' ',
    frameworks: ['jasmine'.'@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/project-unitTest'),
      reports: ['html'.'lcovonly'.'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress'.'kjhtml'],
    port: 9876,
    colors: true.logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Copy the code
  • Frameworks: Set Jasmine to the frameworks under test. If you want to use another framework, change here.
  • Reporters: Responsible for informing developers of the test results. The results are usually printed to the console or stored in a file.
  • AutoWatch: If set to true, the test will run in Watch mode. Change any tests and save the file, and the tests will be rebuilt and re-run.
  • Browsers are set up to run the test. The default is Chrome.