我正在尝试编写一个复合组件的测试，填充了一个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中创建测试。 我相信我所犯的错误是显而易见的，可能显示我的错误方法，很容易被知情人员发现。
I am trying to write tests for a compound component, populated with an observable, but as this is one of the first Angular2 tests I am writing.
I have a component named ListContainerComponent which is populated using Observable list$ with children instances of ListItemComponent.
ListContainerComponent's template follows:
<list-item *ngFor="let listItem of (list$ | async)" [item]="listItem"></list-item>Works great in the browser. The tests however break on that the [item] is allegedly not a known property of ListItemComponent which is not exactly true, as it does have @Input() item in it.
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); })); });Sorry I am not providing a working plunker, but I don't know yet how to create tests in plunker. I believe the mistaking I am making is an obvious one, probably showing my wrong approach, and easy to spot by those in the know.
最满意答案
您需要将ListItemComponent添加到declarations ，就像在实际应用程序中一样。 TestBed是从头开始配置模块，仅用于测试环境。 因此，无论您需要组件在真实应用程序中工作，您都需要将它（或模拟它）添加到测试配置中。
declarations: [ ListContainerComponent, ListItemComponent ],You need to add the ListItemComponent to the declarations, just like you would in the real application. The TestBed is to configure a module from scratch, just for the test environment. So whatever you would need for the component to work in the real app, you need to add it (or a mock of it) to the test configuration.
declarations: [ ListContainerComponent, ListItemComponent ],更多推荐
发布评论