Jasmine - 无法读取未定义的 属性 'controls' - Angular 6
Jasmine - Cannot read property 'controls' of undefined - Angular 6
我是 Angular 的初学者，我正在用 Jasmine 为我的 Angular6 EmployeeComponent 编写测试。我收到一个错误
Cannot read property 'controls' of undefined
我想我没有在 employee.component.spec.ts 文件中正确设置所有依赖项。我已经研究了几天但没有结果。任何帮助将不胜感激。
这是我代码中的基本流程。员工组件包含一个注册表单。当用户点击 Submit 时，员工服务将 insert/update 数据发送到 firebase。
下面是employee.component.html
<div class="row">
<div class="col-md-5">
<form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
<input type="hidden" formControlName="$key">
<div class="form-group" *ngIf="page1">
<label>Full Name</label>
<input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
This field is required.
</div>
</div>
<div class="form-group" *ngIf="page1">
<label>Email</label>
<input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
Invalid Email Address.
</div>
</div>
<div class="form-group" *ngIf="page1">
<label>Mobile</label>
<input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.mobile.errors">
<label *ngIf="formControls.mobile.errors.required">This field is required.</label>
<label *ngIf="formControls.mobile.errors.minLength">At least 8 characters</label>
</div>
</div>
<div style="text-align: right" *ngIf="page1">
<button class="btn btn-primary" (click)="part1Next()">Next</button>
</div>
<div class="form-group" *ngIf="page2">
<label>School</label>
<input formControlName="school" class="form-control">
</div>
<!-- <div class="form-group" *ngIf="page2">
<label>Degree</label>
<input formControlName="degree" class="form-control">
</div> -->
<div class="form-group" *ngIf="page2">
<label>Degree</label>
<select class="form-control" formControlName="degree">
<option value="bachelor">Bachelor</option>
<option value="master">Master</option>
</select>
</div>
<div class="form-group" *ngIf="page2">
<label>Location</label>
<input formControlName="location" class="form-control">
</div>
<div class="row">
<div class="col-md-6" style="text-align: center" *ngIf="page2">
<button class="btn btn-primary" (click)="part2Back()">Back</button>
</div>
<div class="col-md-6" style="text-align: center" *ngIf="page2">
<button class="btn btn-primary" (click)="part2Next()">Next</button>
</div>
</div>
<div *ngIf="page3">
<div>
<h2>Please Check all of the information below</h2>
<p>Full Name: {{formControls.fullName.value}}</p>
<p>Email: {{formControls.email.value}}</p>
<p>Mobile: {{formControls.mobile.value}}</p>
<p>School: {{formControls.school.value}}</p>
<p>Degree: {{formControls.degree.value}}</p>
<p>Location: {{formControls.location.value}}</p>
</div>
<div class="row">
<div class="col-md-6" style="text-align: center">
<button class="btn btn-primary" (click)="part3Back()">Back</button>
</div>
<div class="col-md-6" style="text-align: center" class="form-group">
<input type="submit" class = "btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
<div class="alert alert-info" *ngIf="showSuccessMessage">
Submitted Successfully
</div>
</div>
<div class="col-md-7">
<!-- <app-employee-list></app-employee-list> -->
</div>
</div>
下面是employee.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
constructor(private employeeService: EmployeeService) { }
page1: boolean = true;
page2: boolean = false;
page3: boolean = false;
part1Next() {
this.page1 = false;
this.page2 = true;
}
part2Back() {
this.page1 = true;
this.page2 = false;
}
part2Next() {
this.page2 = false;
this.page3 = true;
}
part3Back() {
this.page2 = true;
this.page3 = false;
}
submitted: boolean;
showSuccessMessage: boolean;
formControls = this.employeeService.form.controls;
ngOnInit() {
}
onSubmit() {
this.submitted = true;
if (this.employeeService.form.valid) {
if (this.employeeService.form.get('$key').value == null) {
// insert
this.employeeService.insertEmployee(this.employeeService.form.value);
} else {
// update
this.employeeService.updateEmployee(this.employeeService.form.value);
}
this.showSuccessMessage = true;
setTimeout(() => this.showSuccessMessage = false, 2000);
this.submitted = false;
this.employeeService.form.reset();
}
this.page1 = true;
this.page2 = false;
this.page3 = false;
}
}
下面是employee.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { EmployeeComponent } from './employee.component';
import { FormsModule } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
class MockEmpService {
employeeList: AngularFireList<any>;
form = new FormGroup({
$key: new FormControl(null),
fullName: new FormControl('', Validators.required),
email: new FormControl('', Validators.email),
mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
school: new FormControl(''),
degree: new FormControl(''),
location: new FormControl('')
});
insertEmployee() {
return true;
}
updateEmployee() {
return true;
}
}
fdescribe('EmployeeComponent', () => {
let component: EmployeeComponent;
let fixture: ComponentFixture<EmployeeComponent>;
let empService: MockEmpService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmployeeComponent ],
imports: [ ReactiveFormsModule, FormsModule ],
providers: [
{provide: EmployeeService, useValue: MockEmpService},
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EmployeeComponent);
component = fixture.componentInstance;
empService = TestBed.get(MockEmpService);
fixture.detectChanges();
});
// first test
// when onSubmit() from component is called, insert() or update() from service is called
it('calling insert or update from service when onSubmit is called', () => {
spyOn(component, 'onSubmit');
expect(empService.insertEmployee).toHaveBeenCalled();
});
// Test created automatically
// it('should create', () => {
// expect(component).toBeTruthy();
// });
});
下面是employee.service.ts
import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
employeeList: AngularFireList<any>;
constructor(private firebase: AngularFireDatabase) { }
form = new FormGroup({
$key: new FormControl(null),
fullName: new FormControl('', Validators.required),
email: new FormControl('', Validators.email),
mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
school: new FormControl(''),
degree: new FormControl(''),
location: new FormControl('')
});
getCustomers() {
this.employeeList = this.firebase.list('employees');
console.log(this.employeeList);
return this.employeeList.snapshotChanges();
}
insertEmployee(employee) {
this.employeeList.push({
fullName: employee.fullName,
email: employee.email,
mobile: employee.mobile,
school: employee.school,
degree: employee.degree,
location: employee.location
});
}
updateEmployee(employee) {
this.employeeList.update(employee.$key,
{
fullName: employee.fullName,
email: employee.email,
mobile: employee.mobile,
school: employee.school,
degree: employee.degree,
location: employee.location
});
}
populateForm(employee) {
this.form.setValue(employee);
}
deleteEmployee($key: string) {
this.employeeList.remove($key);
}
}
Anh，欢迎来到 Whosebug。 :) 首先，这是您第一次写一个非常详尽的问题。做得好！
因为它是如此彻底，所以我能够组织一个 stackblitz 来测试你是什么 运行。您可以在这里找到它：Jasmine - Cannot read property 'controls' of undefined - Angular 6
正如您在 stackblitz 中看到的那样，您的测试现已通过。这是我为完成这项工作所做的工作：
- 将 EmployeeService 的提供程序行更改为 useClass 而不是 useValue - 您正在用一个 class 替换另一个。
- 在 'let' 声明和 'TestBed.get(EmployeeService)' 调用中将 empService 的类型更改为 EmployeeService。这样做的原因是您正在使用不同的 class 模拟 EmployeeService，但就组件而言，它仍然使用原始名称。
- 注释掉以下行：
spyOn(component, 'onSubmit'); 因为那样会破坏您要测试的函数。
- 创建了 insertSpy 以监视 empService.insertEmployee() 函数
- 添加行
let formValidSpy = spyOnProperty(empService.form, 'valid', 'get').and.returnValue(true); 因为您需要模拟设置为有效或无效的表单以控制执行 onSubmit() 的哪些部分。
- 最后用
component.onSubmit(); 实际调用函数进行测试
有关所有详细信息，请参阅 stackblitz。希望对您有所帮助。
我是 Angular 的初学者，我正在用 Jasmine 为我的 Angular6 EmployeeComponent 编写测试。我收到一个错误
Cannot read property 'controls' of undefined
我想我没有在 employee.component.spec.ts 文件中正确设置所有依赖项。我已经研究了几天但没有结果。任何帮助将不胜感激。
这是我代码中的基本流程。员工组件包含一个注册表单。当用户点击 Submit 时，员工服务将 insert/update 数据发送到 firebase。
下面是employee.component.html
<div class="row">
<div class="col-md-5">
<form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
<input type="hidden" formControlName="$key">
<div class="form-group" *ngIf="page1">
<label>Full Name</label>
<input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
This field is required.
</div>
</div>
<div class="form-group" *ngIf="page1">
<label>Email</label>
<input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
Invalid Email Address.
</div>
</div>
<div class="form-group" *ngIf="page1">
<label>Mobile</label>
<input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
<div class="invalid-feedback" *ngIf="submitted && formControls.mobile.errors">
<label *ngIf="formControls.mobile.errors.required">This field is required.</label>
<label *ngIf="formControls.mobile.errors.minLength">At least 8 characters</label>
</div>
</div>
<div style="text-align: right" *ngIf="page1">
<button class="btn btn-primary" (click)="part1Next()">Next</button>
</div>
<div class="form-group" *ngIf="page2">
<label>School</label>
<input formControlName="school" class="form-control">
</div>
<!-- <div class="form-group" *ngIf="page2">
<label>Degree</label>
<input formControlName="degree" class="form-control">
</div> -->
<div class="form-group" *ngIf="page2">
<label>Degree</label>
<select class="form-control" formControlName="degree">
<option value="bachelor">Bachelor</option>
<option value="master">Master</option>
</select>
</div>
<div class="form-group" *ngIf="page2">
<label>Location</label>
<input formControlName="location" class="form-control">
</div>
<div class="row">
<div class="col-md-6" style="text-align: center" *ngIf="page2">
<button class="btn btn-primary" (click)="part2Back()">Back</button>
</div>
<div class="col-md-6" style="text-align: center" *ngIf="page2">
<button class="btn btn-primary" (click)="part2Next()">Next</button>
</div>
</div>
<div *ngIf="page3">
<div>
<h2>Please Check all of the information below</h2>
<p>Full Name: {{formControls.fullName.value}}</p>
<p>Email: {{formControls.email.value}}</p>
<p>Mobile: {{formControls.mobile.value}}</p>
<p>School: {{formControls.school.value}}</p>
<p>Degree: {{formControls.degree.value}}</p>
<p>Location: {{formControls.location.value}}</p>
</div>
<div class="row">
<div class="col-md-6" style="text-align: center">
<button class="btn btn-primary" (click)="part3Back()">Back</button>
</div>
<div class="col-md-6" style="text-align: center" class="form-group">
<input type="submit" class = "btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
<div class="alert alert-info" *ngIf="showSuccessMessage">
Submitted Successfully
</div>
</div>
<div class="col-md-7">
<!-- <app-employee-list></app-employee-list> -->
</div>
</div>
下面是employee.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {
constructor(private employeeService: EmployeeService) { }
page1: boolean = true;
page2: boolean = false;
page3: boolean = false;
part1Next() {
this.page1 = false;
this.page2 = true;
}
part2Back() {
this.page1 = true;
this.page2 = false;
}
part2Next() {
this.page2 = false;
this.page3 = true;
}
part3Back() {
this.page2 = true;
this.page3 = false;
}
submitted: boolean;
showSuccessMessage: boolean;
formControls = this.employeeService.form.controls;
ngOnInit() {
}
onSubmit() {
this.submitted = true;
if (this.employeeService.form.valid) {
if (this.employeeService.form.get('$key').value == null) {
// insert
this.employeeService.insertEmployee(this.employeeService.form.value);
} else {
// update
this.employeeService.updateEmployee(this.employeeService.form.value);
}
this.showSuccessMessage = true;
setTimeout(() => this.showSuccessMessage = false, 2000);
this.submitted = false;
this.employeeService.form.reset();
}
this.page1 = true;
this.page2 = false;
this.page3 = false;
}
}
下面是employee.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { EmployeeComponent } from './employee.component';
import { FormsModule } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
class MockEmpService {
employeeList: AngularFireList<any>;
form = new FormGroup({
$key: new FormControl(null),
fullName: new FormControl('', Validators.required),
email: new FormControl('', Validators.email),
mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
school: new FormControl(''),
degree: new FormControl(''),
location: new FormControl('')
});
insertEmployee() {
return true;
}
updateEmployee() {
return true;
}
}
fdescribe('EmployeeComponent', () => {
let component: EmployeeComponent;
let fixture: ComponentFixture<EmployeeComponent>;
let empService: MockEmpService;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmployeeComponent ],
imports: [ ReactiveFormsModule, FormsModule ],
providers: [
{provide: EmployeeService, useValue: MockEmpService},
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EmployeeComponent);
component = fixture.componentInstance;
empService = TestBed.get(MockEmpService);
fixture.detectChanges();
});
// first test
// when onSubmit() from component is called, insert() or update() from service is called
it('calling insert or update from service when onSubmit is called', () => {
spyOn(component, 'onSubmit');
expect(empService.insertEmployee).toHaveBeenCalled();
});
// Test created automatically
// it('should create', () => {
// expect(component).toBeTruthy();
// });
});
下面是employee.service.ts
import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
employeeList: AngularFireList<any>;
constructor(private firebase: AngularFireDatabase) { }
form = new FormGroup({
$key: new FormControl(null),
fullName: new FormControl('', Validators.required),
email: new FormControl('', Validators.email),
mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
school: new FormControl(''),
degree: new FormControl(''),
location: new FormControl('')
});
getCustomers() {
this.employeeList = this.firebase.list('employees');
console.log(this.employeeList);
return this.employeeList.snapshotChanges();
}
insertEmployee(employee) {
this.employeeList.push({
fullName: employee.fullName,
email: employee.email,
mobile: employee.mobile,
school: employee.school,
degree: employee.degree,
location: employee.location
});
}
updateEmployee(employee) {
this.employeeList.update(employee.$key,
{
fullName: employee.fullName,
email: employee.email,
mobile: employee.mobile,
school: employee.school,
degree: employee.degree,
location: employee.location
});
}
populateForm(employee) {
this.form.setValue(employee);
}
deleteEmployee($key: string) {
this.employeeList.remove($key);
}
}
Anh，欢迎来到 Whosebug。 :) 首先，这是您第一次写一个非常详尽的问题。做得好！
因为它是如此彻底，所以我能够组织一个 stackblitz 来测试你是什么 运行。您可以在这里找到它：Jasmine - Cannot read property 'controls' of undefined - Angular 6
正如您在 stackblitz 中看到的那样，您的测试现已通过。这是我为完成这项工作所做的工作：
- 将 EmployeeService 的提供程序行更改为 useClass 而不是 useValue - 您正在用一个 class 替换另一个。
- 在 'let' 声明和 'TestBed.get(EmployeeService)' 调用中将 empService 的类型更改为 EmployeeService。这样做的原因是您正在使用不同的 class 模拟 EmployeeService，但就组件而言，它仍然使用原始名称。
- 注释掉以下行：
spyOn(component, 'onSubmit');因为那样会破坏您要测试的函数。 - 创建了 insertSpy 以监视 empService.insertEmployee() 函数
- 添加行
let formValidSpy = spyOnProperty(empService.form, 'valid', 'get').and.returnValue(true);因为您需要模拟设置为有效或无效的表单以控制执行 onSubmit() 的哪些部分。 - 最后用
component.onSubmit();实际调用函数进行测试
有关所有详细信息，请参阅 stackblitz。希望对您有所帮助。