Wie richte ich eine Testumgebung ein? Einführung in das Angular-Testtoolset

In diesem Artikel wird erläutert, wie man eine Testumgebung und das Angular-Testtool-Set erstellt.

Testumgebung

Die meisten von ihnen verwenden Angular Cli, um Projekte zu erstellen. Daher sind die von uns benötigten NPM-Pakete und Skripte standardmäßig integriert. Wenn Sie einen selbst erstellten oder offiziellen Website-Schnellstart verwenden, benötigen Sie dies natürlich Selbstinstallation; alle Kerndaten sind jedoch gleich. [Verwandte Tutorial-Empfehlungen: Angular-Tutorial]

Angular-Unit-Tests können in zwei Kategorien unterteilt werden: unabhängige Einzeltests und Angular-Test-Toolset.

Pipe und Service eignen sich für unabhängige Tests, da sie nur new Instanzklassen erfordern und auch nicht in der Lage sind, mit Angular-Komponenten zu interagieren.

Das Gegenteil ist das Angular-Testtoolset.

Einführung in das Testing Framework

Jasmine

Das Jasmine Test Framework bietet einen Werkzeugsatz zum Schreiben von Testskripten und seine hervorragende Semantik lässt den Testcode so aussehen, als würde er einen Absatz lesen.

Karma

Es gibt Testskripte, und Karma wird benötigt, um bei der Verwaltung dieser Skripte zu helfen, damit sie im Browser ausgeführt werden können.

Npm-Paket

Wenn Sie damit herumspielen müssen, ist es am einfachsten, ein neues Projekt über Angular Cli zu erstellen und dann das folgende Npm-Paket in das Projekt zu kopieren, mit dem Sie herumspielen.

    "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"

Dann ist es für uns am wichtigsten, uns den Teil mit dem Konfigurationsskript anzusehen.

Konfigurationsskript

Unser Kern besteht darin, den Karma-Läufer zum Laufen zu bringen, und für Jasmine wird es verwendet, wenn wir Testskripte schreiben, sodass wir uns vorerst keine allzu großen Sorgen machen müssen.

Wir müssen karma.conf.js Dateien im Stammverzeichnis erstellen, was einigen Konventionen entspricht. Die Datei soll Karma darüber informieren, welche Plug-Ins aktiviert werden müssen, welche Testskripte geladen werden müssen, welche Testbrowserumgebungen erforderlich sind, welche Methoden zur Benachrichtigung von Testberichten, Protokolle usw. erforderlich sind.

karma.conf.js

Das Folgende ist die standardmäßig von Angular Cli bereitgestellte Karma-Konfigurationsdatei:

// 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
    });
};

Die obige Konfiguration kann grundsätzlich unsere Anforderungen erfüllen. Im Allgemeinen muss die Liste der Testbrowser geändert werden. denn Karma unterstützt alle Browser auf dem Markt. Wenn Sie die kontinuierliche Integration von Travis CI verwenden, erspart uns außerdem das Starten eines Chrome-Browsers mit einer deaktivierten Sandbox-Umgebung eine Menge Dinge:

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

Alle Informationen zu Karma-Konfigurationsdateien finden Sie in der offiziellen Website-Dokumentation.

test.ts

Beim Schreiben von karma.conf.js haben wir die vom Browser geladene Datei so konfiguriert, dass sie auf die ./src/test.ts-Datei verweist. Die Funktion besteht darin, Karma zum Starten zu führen, und der Code ist viel einfacher:

// 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();

Nachdem alles fertig ist, können wir versuchen, Karma zu starten und es auszuprobieren. Auch ohne Testcode kann es noch ausgeführt werden.

Wenn es Angular Cli ist, dann ng test. Es ist einfach zu bedienen node "./node_modules/karma-cli/bin/karma" start

Öffnen Sie abschließend den Browser: http://localhost:9876, um den Testbericht anzuzeigen.

Einfaches Beispiel

Nachdem die Umgebung eingerichtet ist, schreiben wir zum Ausprobieren ein einfaches Beispiel.

Erstellen Sie ./src/demo.spec.tsDateien. .spec.ts ist ein Suffix. Dies ist eine Konvention, befolgen Sie sie.

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

Nach dem Ausführen von ng test können wir in der Konsole sehen:

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

oder im Browser:

1 spec, 0 failures
demo test
  true is true

Egal was passiert, schließlich sind wir in die Welt des Angular-Unit-Tests eingetreten.

Angular-Testtool-Set

Gewöhnliche Klassen wie Pipe oder Service müssen nur Instanzen über ein einfaches new erstellen. Für Anweisungen und Komponenten ist eine bestimmte Umgebung erforderlich. Dies liegt am Modulkonzept von Angular. Wenn Sie möchten, dass eine Komponente ausgeführt wird, müssen Sie zunächst eine @NgModule-Definition haben.

Das Werkzeugset enthält nicht viele Informationen und Sie können es leicht beherrschen. Im Folgenden werde ich einige der am häufigsten verwendeten kurz erläutern:

TestBed

TestBed wird vom Angular-Testtoolset zum Erstellen eines @NgModule Testumgebungsmoduls bereitgestellt. Natürlich müssen Sie mit dem Modul auch TestBed.createComponent verwenden, um eine Testkomponente zum Testen der Zielkomponente zu erstellen.

Asynchronous

Asynchronous ist überall in Angular, und beim asynchronen Testen können die Tools async, fakeAsync verwendet werden, um eleganten Testcode zu schreiben, der synchron aussieht.

Es gibt weitere Tools im Tool-Set, die wir alle einzeln in [Angular Unit Testing – Component and Instruction Unit Testing]() erklären.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonWie richte ich eine Testumgebung ein? Einführung in das Angular-Testtoolset. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!