模拟子组件 - Angular 2

Question

在测试时如何模拟子组件？我有一个名为product-selected 的父组件，其模板如下所示：

<section id="selected-container" class="container-fluid">
    <hr/>
  <product-settings></product-settings>
  <product-editor></product-editor>
  <product-options></product-options>
</section>

组件声明如下所示：

import { Component, Input }               from '@angular/core'; 

import { ProductSettingsComponent } from '../settings/product-settings.component';                                      
import { ProductEditorComponent }   from '../editor/product-editor.component';                                      
import { ProductOptionsComponent }  from '../options/product-options.component';                                        

@Component({
    selector: 'product-selected',
    templateUrl: './product-selected.component.html',
    styleUrls: ['./product-selected.component.scss']
})
export class ProductSelectedComponent {}

这个组件实际上只是其他组件的一个地方，可能不会包含任何其他功能。

但是当我设置测试时，我收到以下模板错误，对所有三个组件重复：

Error: Template parse errors:
    'product-editor' is not a known element:
    1. If 'product-editor' is an Angular component, then verify that it is part of this module.
    2. If 'product-editor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        <hr/>
      <product-settings></product-settings>
      [ERROR ->]<product-editor></product-editor>

我尝试加载子组件的模拟版本，但不知道该怎么做 - 我看到的示例只是覆盖了父组件，甚至没有提及子组件。那我该怎么做呢？

Answer 1

小心NO_ERRORS_SCHEMA。让我们引用同一文档的另一部分：

使用 NO_ERRORS_SCHEMA 的浅层组件测试极大地简化了复杂模板的单元测试。但是，编译器不再提醒您注意拼写错误或滥用组件和指令等错误。

我发现这个缺点与编写测试的目的完全相反。更重要的是，模拟一个基本组件并不难。

这里还没有提到的一种方法是在配置时简单地声明它们：

@Component({
  selector: 'product-settings',
  template: '<p>Mock Product Settings Component</p>'
})
class MockProductSettingsComponent {}

@Component({
  selector: 'product-editor',
  template: '<p>Mock Product Editor Component</p>'
})
class MockProductEditorComponent {}

...  // third one

beforeEach(() => {
  TestBed.configureTestingModule({
      declarations: [
        ProductSelectedComponent,
        MockProductSettingsComponent,
        MockProductEditorComponent,
        // ... third one
      ],
      providers: [/* your providers */]
  });
  // ... carry on
});

Answer 2

找到了一个近乎完美的解决方案，如果有人重构组件，它也会正确抛出错误：https://www.npmjs.com/package/ng-mocks

npm install ng-mocks --save-dev

现在你可以在你的 .spec.ts 中做

import { MockComponent } from 'ng-mocks';
import { ChildComponent } from './child.component.ts';
// ...
beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [FormsModule, ReactiveFormsModule, RouterTestingModule],
    declarations: [
      ComponentUnderTest,
      MockComponent(ChildComponent), // <- here is the thing
      // ...
    ],
  });
});

这将创建一个新的匿名组件，它具有与 ChildComponent 相同的选择器、@Input() 和 @Output() 属性，但没有附加代码。

假设您的ChildComponent 有一个@Input() childValue: number，它绑定在您的被测组件中，<app-child-component [childValue]="inputValue" />

虽然它已被模拟，但您可以在测试中使用By.directive(ChildComponent)，也可以像这样使用By.css('app-child-component')

it('sets the right value on the child component', ()=> {
  component.inputValue=5;
  fixture.detectChanges();
  const element = fixture.debugElement.query(By.directive(ChildComponent));
  expect(element).toBeTruthy();

  const child: ChildComponent = element.componentInstance;
  expect(child.childValue).toBe(5);
});

Answer 3

一般来说，如果您在正在测试的组件的视图中使用了一个组件，并且您不一定要声明这些组件，因为它们可能有自己的依赖关系，以避免 "某些东西不是已知元素” 错误，您应该使用 NO_ERRORS_SCHEMA。

import { NO_ERRORS_SCHEMA }          from '@angular/core';

TestBed.configureTestingModule({
        declarations: declarations,
        providers: providers
        schemas:      [ NO_ERRORS_SCHEMA ]
  })

根据文档：

将 NO_ERRORS_SCHEMA 添加到测试模块的架构元数据中，以告诉编译器忽略无法识别的元素和属性。您不再需要声明不相关的组件和指令。

更多信息：https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

Answer 4

我发布了这个问题，以便在我为此苦苦挣扎一两天时发布答案。以下是你的做法：

let declarations = [
  ProductSelectedComponent,
  ProductSettingsComponent,
  ProductEditorComponent,
  ProductOptionsComponent
];

beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: declarations,
            providers: providers
        })
        .overrideComponent(ProductSettingsComponent, {
            set: {
                selector: 'product-settings',
                template: `<h6>Product Settings</h6>`
            }
        })
        .overrideComponent(ProductEditorComponent, {
            set: {
                selector: 'product-editor',
                template: `<h6>Product Editor</h6>`
            }
        })
        .overrideComponent(ProductOptionsComponent, {
            set: {
                selector: 'product-options',
                template: `<h6>Product Options</h6>`
            }
        });

        fixture = TestBed.createComponent(ProductSelectedComponent);
        cmp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('section'));
        el = de.nativeElement;
    });

您必须为每个子组件链接overrideComponent 函数。