テスト環境をセットアップするにはどうすればよいですか? Angular テスト ツールセットの概要

この記事では、テスト環境と Angular テスト ツール セットを構築する方法について説明します。

テスト環境

ほとんどのプロジェクトは Angular Cli を使用して作成されているため、必要な npm パッケージはデフォルトで統合されています。 ; もちろん、自作または公式 Web サイトのクイックスタートを使用する場合は、自分でインストールする必要がありますが、コア データはすべて同じです。 [関連チュートリアルの推奨事項: angular チュートリアル]

Angular 単体テストは、独立した個別のテストと Angular テスト ツールセットの 2 つのカテゴリに分類できます。

Pipe と Service は、new インスタンス クラスのみが必要であり、いかなる方法でも Angular コンポーネントと対話できないため、独立したテスト に適しています。

その反対は、Angular テスト ツールセットです。

テスト フレームワークの紹介

Jasmine

Jasmine テスト フレームワークは、テスト スクリプト セットを作成するためのツールを提供します、非常に優れたセマンティクスにより、テスト コードが段落を読んでいるように見えます。

Karma

テスト スクリプトがあり、ブラウザで実行できるようにこれらのスクリプトを管理するには Karma が必要です。

Npm パッケージ

いじる必要がある場合、最も簡単な方法は、Angular Cli を使用して新しいプロジェクトを作成し、次のように、Npm パッケージを作業中のプロジェクトにコピーします。

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

次に、私たちにとって最も重要なことは、構成スクリプト部分に注目することです。

設定スクリプト

私たちの中心はカルマ ランナーを実行させることであり、Jasmine の場合はテスト スクリプトを書くときに使用されるため、当面は過度に心配する必要はありません。

ルート ディレクトリに karma.conf.js ファイルを作成する必要があります。これは、いくつかの規則と同等です。ファイルの目的は、どのプラグインを有効にする必要があるか、どのテスト スクリプトをロードするか、どのテスト ブラウザ環境が必要か、テスト レポートの通知方法、ログなどを Karma に通知することです。

karma.conf.js

以下は、Angular Cli によってデフォルトで提供される Karma 設定ファイルです:

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

上記の設定は基本的に満たすことができます。私たちのニーズ ; Karma は市場のすべてのブラウザをサポートしているため、通常、変更する必要があるのはテスト ブラウザのリストです。さらに、Travis CI 継続的インテグレーションを使用する場合、Chrome ブラウザーで無効なサンドボックス環境を開始すると、多くのことが節約されます。

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

karma 構成ファイルに関するすべての情報については、公式 Web サイトのドキュメントに参加してください。 。

test.ts

karma.conf.js を作成するとき、ブラウザによってロードされるファイルが を指すように構成しました。 /src/test.ts ファイル。この関数は Karma の開始をガイドするもので、コードは非常に単純です:

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

すべての準備ができたら、karma を開始してみます。テスト コードがなくても実行できます。

Angular Cl の場合は、ng test。 node "./node_modules/karma-cli/bin/karma" start

最後に、ブラウザを開きます:

http://localhost : 9876 では、テストレポートを表示できます。

簡単な例

環境がセットアップされたので、簡単な例を書いて試してみましょう。

./src/demo.spec.ts ファイルを作成します。接尾辞 .spec.ts は規則なので、それに従ってください。

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

ng test を実行すると、コンソール:

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

またはブラウザ:

1 spec, 0 failures
demo test
  true is true

が表示されます。すべて、私たちは Angular 単体テストの世界に入りました。

Angular Testing Toolset

Pipe や Service などの通常のクラスは、単純な

new を通じてインスタンスを作成するだけで済みます。命令やコンポーネントを使用するには、特定の環境が必要です。これは Angular のモジュール概念によるもので、コンポーネントを実行するには、まず @NgModule 定義が必要です。

このツール セットには多くの情報が含まれていないため、簡単に使いこなすことができます。以下に、最も一般的に使用されるもののいくつかを簡単に説明します。

TestBed

TestBed は、 @NgModule テスト環境モジュール。もちろん、このモジュールでは、TestBed.createComponent を使用して、ターゲット コンポーネントをテストするためのテスト コンポーネントを作成する必要もあります。

非同期

非同期は Angular のどこにでもあり、非同期テストではツールセット

async、fakeAsync を使用してエレガントな記述が可能です。テスト コードは同期しているように見えます。

ツール セットにはさらに多くのツールがあり、そのすべてについては [Angular 単体テスト - コンポーネントおよび命令単体テスト]() で 1 つずつ説明します。

コーディングを楽しんでください!

以上がテスト環境をセットアップするにはどうすればよいですか? Angular テスト ツールセットの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。