angular - 进行 Angular 单元测试时出错
问题描述
我在进行 Angular 单元测试时遇到错误。我正在尝试测试创建组件请查看文件下方的错误并让我知道为什么我会遇到这种情况,我还导入了与提供程序相关的服务和模块的导入。
Karma 在单元测试时显示以下错误。我想我错过了什么
TypeError: Cannot read property 'userName' of undefined
at Object.eval [as updateRenderer] (ng:///DynamicTestModule/ProfilePersonalInformationComponent.ngfactory.js:72:38)
at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/esm5/core.js?:14909:21)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14023:14)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
at execEmbeddedViewsAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14327:17)
at checkAndUpdateView (webpack:///./node_modules/@angular/core/esm5/core.js?:14019:5)
at callViewAction (webpack:///./node_modules/@angular/core/esm5/core.js?:14369:21)
为了解决上述错误,我创建了 PerosnalInfoStub 类,但它没有用。
组件.spec.ts 文件
describe('ProfilePersonalInformationComponent', () => {
let component: ProfilePersonalInformationComponent;
let fixture: ComponentFixture<ProfilePersonalInformationComponent>;
let personalInfo : PersonalInfo;
class PersonalInfoStub{
personalInfo: Subject<any[]> = new Subject<any[]>();
}
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [FormsModule, SharedModule, HttpModule, BrowserModule],
declarations: [ ProfilePersonalInformationComponent ],
providers: [
{
provide: PersonalInfo, useClass: PersonalInfo
},
{
provide: NotificationService, useClass: NotificationService
},
{
provide: LoginService, useClass: LoginService
},
{
provide: ConfigService, useClass: ConfigService
}
],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
个人信息.ts
export class PersonalInfo {
userName: string;
}
组件类文件
ProfilePersonalInformationComponent implements OnInit {
@Input() personalInfo: PersonalInfo;
@Input() loadingData;
savingData: boolean;
passwordHelpTextArray: string[];
passwordHelpText: string;
formErrors: any = {
username: {
error: '',
errorMessage: ''
},
currentPassword: {
error: '',
errorMessage: ''
},
newPassword: {
error: '',
errorMessage: ''
},
verifyNewPassword: {
error: '',
errorMessage: ''
}
};
updatedUsername: string = '';
existingPassword: string = '';
newPassword: string = '';
reEnterNewPassword: string = '';
constructor(private personalInfoService: PersonalInformationService,
private notificationService: NotificationService) { }
ngOnInit(): void {
this.populateInfo();
}
populateInfo() {
setTimeout(() => {
if (this.loadingData === false) {
this.updatedUsername = this.personalInfo.userName;
} else {
this.populateInfo();
}
}, 500);
}
用户名的 HTML 代码
<div class="col-sm-2">
<h3>Username</h3>
<p>{{personalInfo.userName}}</p>
</div>
<div class="col-sm-2">
<h3>Password</h3>
<p>********</p>
</div>
解决方案
您应该在测试时模拟组件数据,尤其是@Input
通常会从父组件获取值的属性。但是在单元测试中,您将不得不自己模拟它,因为不涉及父组件。
beforeEach(() => {
fixture = TestBed.createComponent(ProfilePersonalInformationComponent);
component = fixture.componentInstance;
// mock input data
component.personalInfo = {"userName" : "XYZ"};
fixture.detectChanges();
});
推荐阅读
- python - 在后台运行多行子进程命令
- c# - Xunit - Parameterized Tests - Class Properties - C#
- c# - 如何使 `Func<>` 的一些参数可选?
- wordpress - 检查页面标题是否已存在于自定义分类类别(WordPress)中
- salt-stack - Minion 在 master 上找不到文件
- tensorflow - 如何在没有 IPython 笔记本的情况下播放 tensorflow `decode_wav()` 波形?
- javascript - 将数据正确导出到 CSV 文件
- go - 调用方法时如何更改包类型?
- scala - Scala 中的随机生成器是线程安全的吗
- apache - 我需要使用 htaccess 从 URL 中删除语言代码