테스트 환경을 설정하는 방법은 무엇입니까? Angular 테스트 도구 세트 소개-JS 튜토리얼-php.cn

테스트 환경을 설정하는 방법은 무엇입니까? Angular 테스트 도구 세트 소개

이 기사에서는 테스트 환경과 Angular 테스트 도구 세트를 구축하는 방법에 대해 설명합니다.

테스트 환경

대부분은 Angular Cli를 사용하여 프로젝트를 생성하므로 필요한 npm 패키지와 스크립트는 기본적으로 통합되어 있습니다. 물론 자체 구축 또는 공식 웹사이트 빠른 시작을 사용하는 경우에는 다음이 필요합니다. 자체 설치이지만 모든 핵심 데이터는 동일합니다. [관련 튜토리얼 추천: angular 튜토리얼]

Angular 단위 테스트는 독립적인 개별 테스트와 Angular 테스트 도구 세트의 두 가지 범주로 나눌 수 있습니다.

Pipe 및 Service는 새 인스턴스 클래스만 필요하므로 어떤 방식으로든 Angular 구성 요소와 상호 작용할 수 없기 때문에 독립적인 테스트에 적합합니다. 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"

로그인 후 복사

那么，我们重要还是看配置脚本部分。

配置脚本

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

로그인 후 복사

以上配置基本上可以满足我们的需求；一般需要变动的，我想是测试浏览器列表了，因为karma支持所有市面上的浏览器。另外，当你使用 Travis CI 持续集成时，启动一个禁用沙箱环境Chrome浏览器会让我们少了很多事：

        customLaunchers: {
            Chrome_travis_ci: {
                base: &#39;Chrome&#39;,
                flags: [&#39;--no-sandbox&#39;]
            }
        }

로그인 후 복사

有关karma config文件的所有信息，请参与官网文档。

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 &#39;zone.js/dist/long-stack-trace-zone&#39;;
import &#39;zone.js/dist/proxy.js&#39;;
import &#39;zone.js/dist/sync-test&#39;;
import &#39;zone.js/dist/jasmine-patch&#39;;
import &#39;zone.js/dist/async-test&#39;;
import &#39;zone.js/dist/fake-async-test&#39;;
import { getTestBed } from &#39;@angular/core/testing&#39;;
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from &#39;@angular/platform-browser-dynamic/testing&#39;;

// Unfortunately there&#39;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(&#39;./&#39;, true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
// Finally, start Karma to run the tests.
__karma__.start();

로그인 후 복사

一切就绪后，我们可以尝试启动 karma 试一下，哪怕无任何测试代码，也是可以运行的。

如果是Angular Cli那么 ng test。折腾的用 node "./node_modules/karma-cli/bin/karma" start

最后，打开浏览器：http://localhost:9876，可以查看测试报告。

简单示例

既然环境搭好，那么我们来写个简单示例试一下。

创建 ./src/demo.spec.ts 文件。.spec.ts为后缀这是一个约定，遵守它。

describe(&#39;demo test&#39;, () => {
    it(&#39;should be true&#39;, () => {
        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测试工具集

普通类诸如Pipe或Service，只需要通过简单的 new 创建实例。而对于指令、组件而言，需要一定的环境。这是因为Angular的模块概念，要想组件能运行，首先得有一个 @NgModule 定义。

工具集的信息量并不很多，你很容易可以掌握它。下面我简略说明几个最常用的：

TestBed

TestBed 就是Angular测试工具集提供的用于构建一个 @NgModule 测试环境模块。当然有了模块，还需要利用 TestBed.createComponent 创建一个用于测试目标组件的测试组件。

异步

Angular到处都是异步，而异步测试可以利用工具集中 async、fakeAsync그 반대는 Angular 테스트 도구 세트입니다.

테스트 프레임워크 소개

🎜🎜🎜🎜Jasmine🎜🎜🎜Jasmine 테스트 프레임워크는 테스트 스크립트 작성을 위한 도구 세트를 제공하며, 뛰어난 의미 체계로 인해 테스트 코드가 단락을 읽는 것처럼 보입니다. 🎜🎜🎜Karma🎜🎜🎜테스트 스크립트가 있으며, 이러한 스크립트가 브라우저에서 실행될 수 있도록 관리하는 데 Karma가 필요합니다. 🎜🎜🎜🎜Npm 패키지🎜🎜🎜🎜만들어야 한다면 가장 쉬운 방법은 Angular Cli를 통해 새 프로젝트를 생성한 후 다음 Npm 패키지를 해당 프로젝트에 복사하는 것입니다. 🎜rrreee🎜그럼 우리에게 가장 중요한 것은 구성 스크립트 부분을 살펴보는 것입니다. 🎜