如何对角度 2 组件是否包含另一个组件进行单元测试

Question

我对 Angular 2 很陌生。

我有一个组件，它的模板中又包含一些其他组件。

如何编写单元测试来检查我的父组件是否包含其他组件。

提及示例或将我引导至资源将非常有帮助。

MyComponent.ts：

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: `<div>
<other-component></other-component>
</div>`
})
export class MyComponent{

}

其他组件.ts：

import { Component } from '@angular/core';
@Component({
selector: 'other-component',
templateUrl: `<div>
<h1>Other Component</h1>
</div>`
})
export class OtherComponent{

}

Answer 1

测试一个组件在编译时是否包含其他组件：

• 注入您正在测试的组件
• 注入子组件
• 创建父组件
• 检测更改
• 使用querySelector 或querySelectorAll 查找子组件

我通常只检查元素是否存在，然后在规范中对单个子组件进行进一步测试。

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        OtherComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it('should have the other component', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('app-other')).not.toBe(null);
  }));
});

使用 querySelector 检查 null 将确定您的组件是否存在。来自querySelector MDN：

如果没有找到匹配项，则返回 null；否则，它返回第一个 匹配元素。

---

如果您想检查同一个子组件是否有多个实例，可以使用querySelectorAll 并检查length 属性：

expect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4);

Answer 2

在大多数情况下，您只是在测试外部组件。如果您只想 Angular 忽略内部组件，最简单的方法是将 NO_ERRORS_SCHEMA 添加到您的规范中。

从“@angular/core”导入 { NO_ERRORS_SCHEMA }

然后在您的 TestBed.configureTestingModule 中添加以下行：

架构：[NO_ERRORS_SCHEMA]

测试将忽略您尚未在组件 HTML 中导入内部组件这一事实。

如果你想用你的外部组件测试内部组件，如果你使用 angular-cli，你会看到他们自动为你生成的 component.spec 文件包含一个 declarations 数组，它是一部分TestBed 配置对象。因此，您所要做的就是导入文件并将组件添加到您的声明中。

所以你上面的例子：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MyComponent } from './my-component.component';
import { OtherComponent } from './other-component.component';

然后在您的describe 块中，您将有一个beforeEach

beforeEach(async(() =>{
  TestBed.configureTestingModule({
    declarations: [ MyComponent,
                    OtherComponent ]
  })
  .compileComponent();
})

那么您的组件现在应该可以正确编译而不会出现错误。如果您想查看整个设置，只需在 angular-cli 中生成一个新项目并查看它生成的规范文档。