Question

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

我有一个名为ListContainerComponent的组件，它使用带有子实例list$的Observable 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中创建测试。我相信我所犯的错误是显而易见的，可能是我的错误做法，很容易被知情人士发现。

Answer 1

您需要将ListItemComponent添加到declarations，就像在实际应用中一样。 TestBed是从头开始配置模块，仅用于测试环境。因此，无论您需要在真实应用程序中使用该组件，您都需要将其添加（或模拟它）到测试配置中。

declarations: [
  ListContainerComponent,
  ListItemComponent
],

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

1 个答案: