Angular 7 单元测试依赖注入在 ngOnInit 中不起作用
Angular 7 unit testing dependency injection not working in ngOnInit
我正在使用 Angular 7 和 Angular CLI 版本 7.3.4。我正在对具有 2 个服务注入的组件进行单元测试,所有重要代码都包含在下面。我包含了导致错误的存根、规范文件和相关组件的重要部分。尽管如此,我仍然收到此错误 "TypeError: this.spreading.getSpreadingDays is not a function" 我知道 fixture.detectchanges() 是导致调用 ngOnInit 的原因,但是自从我注入服务后就应该定义该函数。我确信这是一个愚蠢的错误,但我已经看过很多教程,但我无法弄清楚我的代码有什么问题。如有任何建议,我们将不胜感激。
规格文件
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SpreadSignUpComponent } from './spread-sign-up.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { AuthService } from 'src/app/core/services/auth.service';
import { SpreadingService } from 'src/app/core/services/spreading.service';
import { AuthServiceStub } from 'src/app/core/testing/auth.service.stub';
import { SpreadingServiceStub } from 'src/app/core/testing/spreading.service.stub';
describe('SpreadSignUpComponent', () => {
let component: SpreadSignUpComponent;
let fixture: ComponentFixture<SpreadSignUpComponent>;
let authService: AuthService;
let spreadingService: SpreadingService;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
{ provide: AuthService, useValue: AuthServiceStub },
{ provide: SpreadingService, useValue: SpreadingServiceStub }
],
declarations: [ SpreadSignUpComponent ],
schemas: [ NO_ERRORS_SCHEMA ],
})
.compileComponents();
authService = TestBed.get(AuthService);
spreadingService = TestBed.get(SpreadingService);
}));
beforeEach(() => {
fixture = TestBed.createComponent(SpreadSignUpComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
存根 class:
import { SpreadingService } from '../services/spreading.service';
import { of } from 'rxjs';
import { SpreadingDay } from 'src/app/shared/models/spreadingDay';
import { I } from 'src/app/shared/testing/interfaceBuilder';
export class SpreadingServiceStub implements I<SpreadingService> {
getSpreadingDays() {
return of([]);
}
getSpreadingDaysForUser() {
return of([]);
}
setSpreadingDay(
spreadingDay: SpreadingDay
) {
return <Promise<void>>{};
}
addVolunteerToDay(
spreadingDay: SpreadingDay,
userID: string,
) {
return <Promise<void>>{};
}
removeVolunteerFromDay(
spreadingDay: SpreadingDay,
userID: string,
) {
return <Promise<void>>{};
}
addRequestToDay(
spreadingDay: SpreadingDay,
userID: string,
first: string,
last: string,
) {
return <Promise<void>>{};
}
}
组件:
import { Component, OnInit } from '@angular/core';
import { SpreadingService } from 'src/app/core/services/spreading.service';
import { SpreadingDayReturn, SpreadingDay } from 'src/app/shared/models/spreadingDay';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/core/services/auth.service';
@Component({
selector: 'app-spread-sign-up',
templateUrl: './spread-sign-up.component.html',
styleUrls: ['./spread-sign-up.component.scss']
})
export class SpreadSignUpComponent implements OnInit {
spreadingDays$: Observable<SpreadingDayReturn[]>;
constructor(
private auth: AuthService,
private spreading: SpreadingService,
) { }
ngOnInit() {
this.spreadingDays$ = this.spreading.getSpreadingDays();
}
您的代码 { provide: SpreadingService, useValue: SpreadingServiceStub }
应该是 { provide: SpreadingService, useClass: SpreadingServiceStub }
。很难注意到错误。我假设同样适用于第二个服务存根
我正在使用 Angular 7 和 Angular CLI 版本 7.3.4。我正在对具有 2 个服务注入的组件进行单元测试,所有重要代码都包含在下面。我包含了导致错误的存根、规范文件和相关组件的重要部分。尽管如此,我仍然收到此错误 "TypeError: this.spreading.getSpreadingDays is not a function" 我知道 fixture.detectchanges() 是导致调用 ngOnInit 的原因,但是自从我注入服务后就应该定义该函数。我确信这是一个愚蠢的错误,但我已经看过很多教程,但我无法弄清楚我的代码有什么问题。如有任何建议,我们将不胜感激。
规格文件
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SpreadSignUpComponent } from './spread-sign-up.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { AuthService } from 'src/app/core/services/auth.service';
import { SpreadingService } from 'src/app/core/services/spreading.service';
import { AuthServiceStub } from 'src/app/core/testing/auth.service.stub';
import { SpreadingServiceStub } from 'src/app/core/testing/spreading.service.stub';
describe('SpreadSignUpComponent', () => {
let component: SpreadSignUpComponent;
let fixture: ComponentFixture<SpreadSignUpComponent>;
let authService: AuthService;
let spreadingService: SpreadingService;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
{ provide: AuthService, useValue: AuthServiceStub },
{ provide: SpreadingService, useValue: SpreadingServiceStub }
],
declarations: [ SpreadSignUpComponent ],
schemas: [ NO_ERRORS_SCHEMA ],
})
.compileComponents();
authService = TestBed.get(AuthService);
spreadingService = TestBed.get(SpreadingService);
}));
beforeEach(() => {
fixture = TestBed.createComponent(SpreadSignUpComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
存根 class:
import { SpreadingService } from '../services/spreading.service';
import { of } from 'rxjs';
import { SpreadingDay } from 'src/app/shared/models/spreadingDay';
import { I } from 'src/app/shared/testing/interfaceBuilder';
export class SpreadingServiceStub implements I<SpreadingService> {
getSpreadingDays() {
return of([]);
}
getSpreadingDaysForUser() {
return of([]);
}
setSpreadingDay(
spreadingDay: SpreadingDay
) {
return <Promise<void>>{};
}
addVolunteerToDay(
spreadingDay: SpreadingDay,
userID: string,
) {
return <Promise<void>>{};
}
removeVolunteerFromDay(
spreadingDay: SpreadingDay,
userID: string,
) {
return <Promise<void>>{};
}
addRequestToDay(
spreadingDay: SpreadingDay,
userID: string,
first: string,
last: string,
) {
return <Promise<void>>{};
}
}
组件:
import { Component, OnInit } from '@angular/core';
import { SpreadingService } from 'src/app/core/services/spreading.service';
import { SpreadingDayReturn, SpreadingDay } from 'src/app/shared/models/spreadingDay';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/core/services/auth.service';
@Component({
selector: 'app-spread-sign-up',
templateUrl: './spread-sign-up.component.html',
styleUrls: ['./spread-sign-up.component.scss']
})
export class SpreadSignUpComponent implements OnInit {
spreadingDays$: Observable<SpreadingDayReturn[]>;
constructor(
private auth: AuthService,
private spreading: SpreadingService,
) { }
ngOnInit() {
this.spreadingDays$ = this.spreading.getSpreadingDays();
}
您的代码 { provide: SpreadingService, useValue: SpreadingServiceStub }
应该是 { provide: SpreadingService, useClass: SpreadingServiceStub }
。很难注意到错误。我假设同样适用于第二个服务存根