Comment mettre en place un environnement de test ? Introduction à l'ensemble d'outils de test angulaire

Cet article explique comment créer un environnement de test et l'ensemble d'outils de test Angular.

Environnement de test

La plupart d'entre eux utilisent Angular Cli pour créer des projets. Par conséquent, les packages npm dont nous avons besoin ont été intégrés par défaut. ; bien sûr, si vous utilisez le démarrage rapide d'un site Web auto-construit ou officiel, vous devez l'installer vous-même, mais toutes les données de base sont les mêmes ; [Recommandations de didacticiel associées : tutoriel angulaire]

Les tests unitaires angulaires peuvent être divisés en deux catégories : les tests individuels indépendants et l'ensemble d'outils de tests angulaires.

Pipe et Service conviennent aux tests indépendants, car ils ne nécessitent que des new classes d'instance et ne peuvent pas non plus interagir de quelque manière que ce soit avec les composants angulaires.

Le contraire est l'ensemble d'outils de test angulaire.

Introduction au framework de test

Jasmine

Le framework de test Jasmine fournit des outils pour écrire des scripts de test Ensemble et très bonne sémantique, donnant l'impression que le code de test lit un paragraphe.

Karma

Il existe des scripts de test, et Karma est nécessaire pour aider à gérer ces scripts afin qu'ils puissent être exécutés dans le navigateur.

Package Npm

Si vous devez déconner, le moyen le plus simple est de créer un nouveau projet via Angular Cli, puis d'ajouter le suivant Copiez le package Npm dans le projet sur lequel vous travaillez.

    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0"

Ensuite, le plus important pour nous est de regarder la partie script de configuration.

Script de configuration

Notre cœur est de faire fonctionner le karma runner, et pour Jasmine, il sera utilisé lorsque nous écrirons des scripts de test, donc pour le moment Non il faut s'inquiéter outre mesure.

Nous devons créer un fichier karma.conf.js dans le répertoire racine, ce qui équivaut à certaines conventions. Le but du fichier est d'indiquer à Karma quels plug-ins doivent être activés, quels scripts de test charger, quels environnements de navigateur de test sont requis, les méthodes de notification des rapports de test, les journaux, etc.

karma.conf.js

Ce qui suit est le fichier de configuration karma fourni par Angular Cli par défaut :

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function(config) {
    config.set({
        // 基础路径（适用file、exclude属性）
        basePath: '',
        // 测试框架，@angular/cli 指Angular测试工具集
        frameworks: ['jasmine', '@angular/cli'],
        // 加载插件清单
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        client: {
            // 当测试运行完成后是否清除上文
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        // 哪些文件需要被浏览器加载，后面会专门介绍  `test.ts`
        files: [
            { pattern: './src/test.ts', watched: false }
        ],
        // 允许文件到达浏览器之前进行一些预处理操作
        // 非常丰富的预处理器：https://www.npmjs.com/browse/keyword/karma-preprocessor
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        // 指定请求文件MIME类型
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        },
        // 插件【karma-coverage-istanbul-reporter】的配置项
        coverageIstanbulReporter: {
            // 覆盖率报告方式
            reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        // 指定angular cli环境
        angularCli: {
            environment: 'dev'
        },
        // 测试结果报告方式
        reporters: config.angularCli && config.angularCli.codeCoverage ?
            ['progress', 'coverage-istanbul'] :
            ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        // 日志等级
        logLevel: config.LOG_INFO,
        // 是否监听测试文件
        autoWatch: true,
        // 测试浏览器列表
        browsers: ['Chrome'],
        // 持续集成模式，true：表示浏览器执行测试后退出
        singleRun: false
    });
};

La configuration ci-dessus peut essentiellement répondre nos besoins ; Généralement, ce qui doit être modifié, c'est la liste des navigateurs de test, car karma supporte tous les navigateurs du marché. De plus, lorsque vous utilisez l'intégration continue de Travis CI, démarrer un environnement sandbox désactivé dans le navigateur Chrome nous fera économiser beaucoup de choses :

        customLaunchers: {
            Chrome_travis_ci: {
                base: 'Chrome',
                flags: ['--no-sandbox']
            }
        }

Pour toutes informations sur les fichiers de configuration karma, veuillez participer au site officiel documentation .

test.ts

Lors de l'écriture de karma.conf.js, nous avons configuré le fichier chargé par le navigateur pour pointer vers le fichier ./src/test.ts. La fonction est de guider le karma pour démarrer, et le code est beaucoup plus simple :

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
// 所有.spec.ts文件
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

Une fois que tout est prêt, nous pouvons essayer de démarrer le karma et l'essayer. Même sans aucun code de test, il peut toujours fonctionner. .

S'il s'agit d'Angular Cli alors ng test. Utilisez node "./node_modules/karma-cli/bin/karma" start

Enfin, ouvrez le navigateur : http://localhost:9876 pour afficher le rapport de test.

Exemple simple

Maintenant que l'environnement est configuré, écrivons un exemple simple à essayer.

Créer un fichier ./src/demo.spec.ts. Le suffixe de .spec.ts est une convention, suivez-la.

describe('demo test', () => {
    it('should be true', () => {
        expect(true).toBe(true);
    })
});

Après avoir exécuté ng test, nous pouvons voir dans la console :

Chrome 58.0.3029 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.031 secs / 0.002 secs)

ou dans le navigateur :

1 spec, 0 failures
demo test
  true is true

Peu importe quoi, après tout, nous sont entrés dans le monde des tests unitaires angulaires.

Ensemble d'outils de test angulaire

Les classes courantes telles que Pipe ou Service n'ont besoin que de créer des instances via un simple new. Pour les instructions et les composants, un certain environnement est requis. Cela est dû au concept de module d'Angular. Pour qu'un composant puisse s'exécuter, il doit d'abord avoir une définition @NgModule.

L'ensemble d'outils ne contient pas beaucoup d'informations et vous pouvez facilement le maîtriser. Ci-dessous, j'expliquerai brièvement quelques-uns des plus couramment utilisés :

TestBed

TestBed est fourni par l'ensemble d'outils de test angulaire pour créer un @NgModule module d'environnement de test. Bien entendu, avec le module, vous devez également utiliser TestBed.createComponent pour créer un composant de test permettant de tester le composant cible.

Asynchrone

L'asynchrone est partout dans Angular, et les tests asynchrones peuvent utiliser l'ensemble d'outils async, fakeAsync pour écrire un code de test élégant qui semble synchrone.

Il y a plus d'outils dans l'ensemble d'outils, que nous expliquerons tous un par un dans [Tests unitaires angulaires - Tests unitaires de composants et d'instructions]().

bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!