javascript - tr html 标签的属性组件上的 Angular @Input() 绑定(bind)失败单元测试

Question

我在 tr 标签上使用名为 app-product-row 的属性选择器组件，并在 @Input( )如下；

类别

@Component({
  selector: '[app-product-row]',
  templateUrl: './product-row.component.html',
  styleUrls: ['./product-row.component.scss']
})
export class ProductRowComponent {
  @Input() public product = null;
}

测试床

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { ProductRowComponent } from './product-row.component';

describe('ProductRowComponent', () => {
  let component: ProductRowComponent;
  let fixture: ComponentFixture<ProductRowComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductRowComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProductRowComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

标记

<tr *ngFor="let product of searchResults"
    [product]="product"
    (showPipelineModalChange)="onShowPipelineModalChange($event)"
    app-product-row>
</tr>

代码在ng服务上成功编译，并且一切都在浏览器上按预期工作，但单元测试抛出

Chrome 63.0.3239 (Mac OS X 10.13.3)
Can't bind to 'product' since it isn't a known property of 'tr'

我的实现灵感来自 Angular2 table rows as component然而，在该示例中，@Input() 似乎没有被使用，也没有提及单元测试。

有人可以给我指出正确的方向吗？

Answer 1

当您尚未在 TestBed 中声明组件时，通常会发生此错误。本质上，Angular 不会将 app-product-row 识别为任何特殊的东西，就好像您在应用程序中使用了它而没有将其包含在 @NgModule 中一样。尝试在您的测试中添加:

TestBed.configureTestingModule({
   declarations: [ProductRowComponent]
})

每个 TestBed 都有点像一个迷你模块，因为您需要声明要测试的组件/指令。

在此处了解有关设置的更多信息:https://angular.io/guide/testing#test-a-component