ngx-translate 单元测试问题
ngx-translate Problems with unit testing
0
我正在使用 ngx-translate 库并且在单元测试方面遇到了一些问题,因为它找不到某些提供。问题是即使我放置了一个提供者,它也一直要求另一个提供者并且它永远无法解决问题。
所以基本上我对 mi auth 组件进行了单元测试,它在其构造函数中使用了翻译服务。
测试问我(就像我在下一张图片中显示的那样)他们需要“TraslateService”作为提供者,所以我添加了他们。
providers:[
TranslateService
]
但是一旦我添加了这个,它就会要求翻译提供另一件事,并且它会继续下去。我相信解决方案应该是另一种方式。
错误图片
app.module
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
defaultLanguage: 'en'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Quiero destacar que el sharedModule, ya exporta el translateModule que se usa otros lugares de la app.
我想说的是,在 sharedModule、TranslateModule 上,它已经被导出,用于应用程序的其他地方。
共享模块
@NgModule({
imports: [
...,
TranslateModule,
],
exports: [
...,
TranslateModule
],
providers:[
]
})
export class SharedModule { }
** 此外,auth 也是一个惰性模块。
auth.module**
@NgModule({
declarations: [
AuthComponent
],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule
]
})
export class AuthModule { }
auth.component.ts
export class AuthComponent implements OnInit {
constructor(public translate: TranslateService)
}
Spect.ts
describe('AuthComponent', () => {
let component: AuthComponent;
let fixture: ComponentFixture<AuthComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
SharedModule,
],
providers:[
TranslateService,
],
declarations: [ AuthComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
知道如何解决这个问题吗?
我会模拟 TranslateService
并模拟它所需的方法和属性。
这样做:
describe('AuthComponent', () => {
let component: AuthComponent;
let fixture: ComponentFixture<AuthComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
SharedModule,
],
providers:[
// !! provide a mock for it
{ provide: TranslateService, useValue: { /* mock it however you wish */} }
],
declarations: [ AuthComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
在此处了解有关模拟外部依赖项的更多信息:https://testing-angular.com/testing-components-depending-on-services/#testing-components-depending-on-services
0
我正在使用 ngx-translate 库并且在单元测试方面遇到了一些问题,因为它找不到某些提供。问题是即使我放置了一个提供者,它也一直要求另一个提供者并且它永远无法解决问题。
所以基本上我对 mi auth 组件进行了单元测试,它在其构造函数中使用了翻译服务。
测试问我(就像我在下一张图片中显示的那样)他们需要“TraslateService”作为提供者,所以我添加了他们。
providers:[
TranslateService
]
但是一旦我添加了这个,它就会要求翻译提供另一件事,并且它会继续下去。我相信解决方案应该是另一种方式。
错误图片
app.module
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [
AppComponent
],
imports: [
...
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
},
defaultLanguage: 'en'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Quiero destacar que el sharedModule, ya exporta el translateModule que se usa otros lugares de la app.
我想说的是,在 sharedModule、TranslateModule 上,它已经被导出,用于应用程序的其他地方。
共享模块
@NgModule({
imports: [
...,
TranslateModule,
],
exports: [
...,
TranslateModule
],
providers:[
]
})
export class SharedModule { }
** 此外,auth 也是一个惰性模块。
auth.module**
@NgModule({
declarations: [
AuthComponent
],
imports: [
CommonModule,
AuthRoutingModule,
SharedModule
]
})
export class AuthModule { }
auth.component.ts
export class AuthComponent implements OnInit {
constructor(public translate: TranslateService)
}
Spect.ts
describe('AuthComponent', () => {
let component: AuthComponent;
let fixture: ComponentFixture<AuthComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
SharedModule,
],
providers:[
TranslateService,
],
declarations: [ AuthComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
知道如何解决这个问题吗?
我会模拟 TranslateService
并模拟它所需的方法和属性。
这样做:
describe('AuthComponent', () => {
let component: AuthComponent;
let fixture: ComponentFixture<AuthComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports:[
HttpClientTestingModule,
SharedModule,
],
providers:[
// !! provide a mock for it
{ provide: TranslateService, useValue: { /* mock it however you wish */} }
],
declarations: [ AuthComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AuthComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
在此处了解有关模拟外部依赖项的更多信息:https://testing-angular.com/testing-components-depending-on-services/#testing-components-depending-on-services