如何测试@Input() 项：Angular 中的任何项？

Question

我有一个 Angular 项目，想测试一些组件。

所以我想测试 @Input() 项目：任何。因为这是组件：

export class EcheqViewItemComponent implements OnInit {
  @Input() item: any;

  constructor() {}

模板看起来像这样：

<div class="echeq-view-item">
  <mat-card>
    <mat-card-header>
       <mat-icon
        *ngIf="item.status === 'Submitted'"
        color="primary"
        mat-card-avatar
      >
        done_outline
      </mat-icon> -->
      <mat-icon *ngIf="item.status === 'Active'" color="warn" mat-card-avatar>
        highlight_off
      </mat-icon>
      <mat-card-title>{{ item.title }}</mat-card-title>
      <mat-card-subtitle>{{
        item.assignedOnUtc | date: 'dd MMM'
      }}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content> </mat-card-content>
    <mat-card-footer class="echeq-view-item-footer">
      {{ item.progress }} %
    </mat-card-footer>
  </mat-card>
</div>

我有这样的测试：

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


  beforeEach(async(() => {
    TestBed.configureTestingModule({

      imports:[ParticipantEcheqModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EcheqViewItemComponent);
    component = fixture.componentInstance;


    fixture.detectChanges();
  });

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

但目前，如果我运行测试，我会收到此错误：

EcheqViewItemComponent should create
TypeError: Cannot read property 'status' of undefined
TypeError: Cannot read property 'status' of undefined
    at Object.eval [as updateDirectives] (ng:///ParticipantEcheqModule/EcheqViewItemComponent.ngfactory.js:62:31)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20432:1)
    at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19828:1)
    at callViewAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20069:1)
    at execComponentViewsAction (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20011:1)
    at checkAndUpdateView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:19834:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20722:1)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:20400:1)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/core.js:18209:1)
    at ComponentFixture.push../node_modules/@angular/core/fesm5/testing.js.ComponentFixture._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm5/testing.js:227:1)

所以我的问题是，如何解决这个问题？

谢谢

如果我这样做：

beforeEach(() => {
    component.item = {
      status: true
  }
    fixture = TestBed.createComponent(EcheqViewItemComponent);
    component = fixture.componentInstance;


    fixture.detectChanges();
  });

仍然出现此错误：

TypeError: Cannot set property 'item' of undefined

Answer 1

您可能必须在beforeEach 块中安排item 对象：

beforeEach(() => {
   component.item = {
       status: true
   }
}

当您的组件被注入到 TestBed 模块时，会发生这种情况，它在项目对象中没有值。

另一种方法是模拟父组件并在绑定之前设置item 的值。

Answer 2

您可以使用 $any 类型转换函数来消除错误：

<div class="echeq-view-item">
  <mat-card>
    <mat-card-header>
       <mat-icon
        *ngIf="$any(item).status === 'Submitted'"
        color="primary"
        mat-card-avatar
      >
        done_outline
      </mat-icon> -->
      <mat-icon *ngIf="$any(item).status === 'Active'" color="warn" mat-card-avatar>
        highlight_off
      </mat-icon>
      <mat-card-title>{{ $any(item).title }}</mat-card-title>
      <mat-card-subtitle>{{
        item.assignedOnUtc | date: 'dd MMM'
      }}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content> </mat-card-content>
    <mat-card-footer class="echeq-view-item-footer">
      {{ item.progress }} %
    </mat-card-footer>
  </mat-card>
</div>