idea2020.2中@test是怎么测试的_[翻译]Angular Schematics: 单元测试

原文链接[Angular Schematics: Unit Testing]( https:// blog.angular.io/angular -schematics-unit-testing-3a0a9aaab186 )

构建 Schematics 是很神奇的。只需很少的代码，您就可以重复在多个项目中生成大型结构。与任何编码一样，您将希望创建单元测试，以确保您所做的每个更改都是准确的，并且可以轻松地测试许多情况。在开始使用 Schematics 时，如何为您创建的工具创建测试可能并不十分明显。

在这篇文章中，我们将会看到一种为 Angular Schematics 创建单元测试的方法，它是基于之前发布的另一篇关于创建简单 Schematics 的文章。

基础的单元测试代码

当您第一次开始使用一个新的单元测试文件时，不需要做太多的工作。只需要确定起始入口，那就是 index_spec.ts 文件，内容是 Schematics 生成输出的代码。

import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
import * as path from 'path';

const collectionPath = path.join(__dirname, '../collection.json');

describe('simple-schematic', () => {
  it('works', () => {
    const runner = new SchematicTestRunner('schematics', collectionPath);
    const tree = runner.runSchematic('simple-schematic', {}, Tree.empty());


    expect(tree.files).toEqual([]);
  });
});

现在，除了在筒仓中运行 Schematics 并断言输出是一个空文件树之外，它什么也不做。我们需要进一步准确地测试您的代码。

模拟应用程序环境

生成器提供的基本单元测试只是… 基础的。我们需要扩展单元测试，以更准确地反映代码将运行的实际环境。这意味着我们需要运行一些 Angular Schematics 来构建 Angular 项目工作区。

为此，我们将向单元测试中添加一些代码。首先，我们需要设置 Angular Schematics 的运行选项。

import {Schema as WorkspaceOptions} from '@schematics/angular/workspace/schema';
import {Schema as ApplicationOptions} from '@schematics/angular/application/schema';

...

const workspaceOptions: WorkspaceOptions = {
    name: 'workspace',
    newProjectRoot: 'projects',
    version: '6.0.0',
};

const appOptions: ApplicationOptions = {
    name: 'bar',
    inlineStyle: false,
    inlineTemplate: false,
    routing: false,
    style: 'css',
    skipTests: false,
    skipPackageJson: false,
};

然后，我们需要在运行任何测试之前创建应用程序文件树。它使用实例化的 runExternalSchematic 来访问 Angular Schematic， 并通过它生成工作区和应用程序树。

let appTree: UnitTestTree;
beforeEach(() => {
    appTree = testRunner.runExternalSchematic(
        '@schematics/angular', 'workspace', workspaceOptions);
    appTree = testRunner.runExternalSchematic(
        '@schematics/angular', 'application', appOptions, appTree);
});

现在，在每次测试之前，我们通过运行这个代码来创建 Angular 项目工作区。

附注:使用随机代码块并不总是容易的。我建议查看最终的单元测试文件，看看它实际上是什么样子的。
福利！有两种方法可以设置 Angular 工作区，一种是单个项目，另一种是多个项目。在最后的单元测试文件中，我展示了如何设置和测试这两种格式。再来看看吧!

增加测试

在我们的测试环境设置中，我们只需要开始创建一些测试。我将创建三个不同的测试。

首先，如果你在没有Angular项目树设置的情况下运行这个 Schematic 会发生什么。在本例中，我只是测试是否抛出了错误。这是您的测试的良好开端，但是在下一个示例中，我们将看到如何进一步进行更详细的测试。

it('fails with missing tree', () => {
    expect(() => testRunner.runSchematic(
        'simple-schematic', 
        {name: "test"}, 
        Tree.empty())).toThrow();
});

第二，如果在没有必要参数的情况下运行此 Schematic 会发生什么。在这个示例中，我进一步展示了如何测试特定的错误类型和消息。

it('fails with missing params', () => {
    expect(() => testRunner.runSchematic(
        'simple-schematic', 
        {}, 
        appTree)).toThrowError(InvalidInputOptions,
           'Schematic input does not validate against the Schema: {"spec":true,"flat":false}n'+
            'Errors:nn'+
            '  Data path "" should have required property 'name'.');
});

最后，如果一切设置正确会发生什么。

it('works', () => {
    const tree = testRunner.runSchematic('simple-schematic', {
        name: "test"
    }, appTree);

    //[see assertions below]
});

有了这些测试，我们只需要专注于特定的值符合我们的测试中的断言。

对创建的文件进行断言

您可以编写的第一个断言是断言在应用程序树中创建特定的文件。我们可以通过断言比对使用数组格式文件列表准确的实现这一点。

expect(tree.files).toEqual([
    "/README.md",
    "/angular.json",
    "/package.json",
    "/tsconfig.json",
    "/tslint.json",
    "/.editorconfig",
    "/.gitignore",
    ...
    "/projects/bar/src/app/test/test.spec.ts",
    "/projects/bar/src/app/test/test.ts",
    ...
]);

或者我们可以检查生成的文件是否在 tree.files 数组中。因此，您不必匹配确切的 内容(例如，它会在 Angular Schematics 的不同版本之间改变)。

expect(tree.files).toContain("/projects/bar/src/app/test/test.spec.ts");
expect(tree.files).toContain("/projects/bar/src/app/test/test.ts");

两种选择都可以，这取决于您的需要。但是，如果您特别需要查看输出的内容并确保它确实是您所需要的，该怎么办呢？这要对创建的内容的断言。

对创建的内容断言

如果您需要确保生成的内容满足特定的规范，那么您还可以逐个文件读取内容，并断言是你期望的内容或包含必要的文本。这很容易做到，如下面的代码段所示。

expect(tree.readContent("/projects/bar/src/app/test/test.ts"))
  .toContain(
    "export class Test {n" +
    "n" +
    "}"
  );

很容易！现在，我已经确保文件的输出完全符合我的意图。

结论

您应该看到，为 Schematics 编写单元测试是相当容易的，并且可以确保内容以您想要的方式输出。对我来说，最困难的事情是如何建立包含 Angular 项目工作区的文件结构，在那之后就轻而易举了。

同样，如果您想查看最终文件，请查看以下链接。

https://github.com/jonbcampos/schematics/blob/master/simple-schematic/src/simple-schematic/index_spec.ts