gpt4 book ai didi

javascript - 如何测试@Input()项: any in Angular?

转载 作者:行者123 更新时间:2023-11-30 19:07:45 28 4
gpt4 key购买 nike

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

所以我想测试@Input()item: any。因为这是组件:


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

最佳答案

您可能需要在 beforeEach block 中安排 item 对象:

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

当您的组件被注入(inject)到 TestBed 模块时会发生这种情况,它在 item 对象中没有值。

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

关于javascript - 如何测试@Input()项: any in Angular?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58815999/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com