模拟子组件-Angular 2 [英] Mocking Child Components - Angular 2

问题描述

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

How do you mock a child component when testing? I have a parent component called product-selected whose template looks like this:

<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 {}

该组件实际上只是其他组件存在的地方，并且可能不包含任何其他功能.

This component is really just a place for the other components to live in and probably won't contain any other functions.

但是，当我设置测试时，出现以下模板错误，对所有三个组件都重复该错误:

But when I set up the testing I get the following template error, repeated for all three components:

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>

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

I've tried to load a mocked version of the child components but don't know how to do - the examples that I've seen just override the parent and don't even mention the child components. So how do I go about doing it?

推荐答案

注意NO_ERRORS_SCHEMA.让我们引用同一文档的另一部分:

Careful about the NO_ERRORS_SCHEMA. Let's quote another part of the same the docs:

使用NO_ERRORS_SCHEMA进行浅层组件测试可大大简化复杂模板的单元测试.但是，编译器不再警告您错误，例如拼写错误或错误使用的组件和指令.

Shallow component tests with NO_ERRORS_SCHEMA greatly simplify unit testing of complex templates. However, the compiler no longer alerts you to mistakes such as misspelled or misused components and directives.

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

I find that drawback quite contrary to the purposes of writing a test. Even more so that it's not that hard to mock a basic component.

这里尚未提及的一种方法只是在配置时声明它们:

An approach not yet mentioned here is simply to declare them at config time:

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

这篇关于模拟子组件-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！