使用异步填充的子组件测试 Angular 2 组件答案

【问题标题】：Testing an Angular 2 component with async-populated child components使用异步填充的子组件测试 Angular 2 组件
【发布时间】：2016-10-28 16:28:39
【问题描述】：

我正在尝试为一个复合组件编写测试，其中填充了一个 observable，但因为这是我正在编写的第一个 Angular2 测试之一。

我有一个名为 ListContainerComponent 的组件，它使用 Observable list$ 和 ListItemComponent 的子实例填充。

ListContainerComponent的模板如下：

<list-item
    *ngFor="let listItem of (list$ | async)" [item]="listItem"></list-item>

在浏览器中效果很好。然而，测试打破了[item] 据称不是ListItemComponent 的已知属性，这并不完全正确，因为它确实包含@Input() item。

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { ListContainerComponent } from './list-container.component';
import { Store, StoreModule } from '@ngrx/store';

import * as fromRoot from '../../../reducers';
import { Observable } from 'rxjs';
import { reducer } from '../../../reducers/list.reducer';

describe('Component: ListContainer', () => {
    let storeStub;
    let component: ListContainerComponent;
    let fixture: ComponentFixture<ListContainerComponent>;
    let element: HTMLElement;

    beforeEach(() => {
        storeStub = {
            items: []
        };

        TestBed.configureTestingModule({
            declarations: [
                ListContainerComponent
            ],
            providers: [
                {provide: Store, useValue: storeStub}
            ],
            imports: [
                StoreModule.provideStore(reducer),
            ]
        })
        .compileComponents();

        fixture = TestBed.createComponent(ListContainerComponent);
        component = fixture.componentInstance;
        element = fixture.nativeElement;
    });

    it('should populate list', async(() => {
        component.list$ = Observable.of([
            {name: 'abc', value: 'content of abc'},
        ]};

        fixture.detectChanges();
        expect(element.querySelectorAll('h4').length).toBeGreaterThan(0);

    }));
});

对不起，我没有提供一个可以工作的 plunker，但我还不知道如何在 plunker 中创建测试。我相信我所犯的错误很明显，可能表明我的方法错误，并且很容易被知情人士发现。

【问题讨论】：

标签： testing angular

【解决方案1】：

您需要将ListItemComponent 添加到declarations，就像在实际应用程序中一样。 TestBed 是从头配置一个模块，只是为了测试环境。因此，无论您需要什么组件才能在实际应用中工作，您都需要将它（或它的模拟）添加到测试配置中。

declarations: [
  ListContainerComponent,
  ListItemComponent
],

【讨论】：

谢谢，很好，当我修复它时，我得到了关于 $list 属性未定义的compaints：undefined is not a constructor (evaluating 'store.let(...)')
我的异步填充，子组件输入也显示为 null，尽管在父组件中正确设置了值。我仍在寻找解决方案。