javascript - 如何测试@Input() 项:Angular 中的任何项?
问题描述
我有一个 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
解决方案
您可能必须item
在beforeEach
块中安排对象:
beforeEach(() => {
component.item = {
status: true
}
}
当您的组件被注入TestBed
模块时,就会发生这种情况,它在项目对象中没有值。
另一种方法是模拟父组件并item
在绑定之前设置它的值。
推荐阅读
- parsing - Haskell & Language Design: Design Struggle in implementation for 命令式语言的 Do-While 循环
- reactjs - 根据应用顶部的状态更改样式组件样式
- django - DRF:使我的网关使用 InMemoryUploadedFile 将传入请求转发到下一个服务
- javascript - 未知选项 eventDrop 错误
- reactjs - 重新渲染 GoogleMapReact
- javascript - 返回原始页面并成功消息。Boostramp + PHPMailer
- java - 即使存在主类,Java 也找不到主类
- wordpress - 重建媒体库 db - 我错过了什么?
- objective-c - 如何获得最前面的流程序列?- Applescript / Swift / Objetive-C
- android - 图像未显示在回收站视图中