Angular 测角仪试验台的正确使用
在一个基于Angular 8.1.2和Ionic 4的应用程序项目中,我用typescript为一个简单的类编写了单元测试。“npm测试”很好。为了准备更复杂的类和所需的模拟,我改变了代码,以这种方式使用beforeach方法和TestBed对象:Angular 测角仪试验台的正确使用,angular,testbed,Angular,Testbed,在一个基于Angular 8.1.2和Ionic 4的应用程序项目中,我用typescript为一个简单的类编写了单元测试。“npm测试”很好。为了准备更复杂的类和所需的模拟,我改变了代码,以这种方式使用beforeach方法和TestBed对象: import { CryptHelper, CryptCodeTyp, CryptIOStringTyp } from './cryptHelper'; import { TestBed } from '@angular/core/testing';
import { CryptHelper, CryptCodeTyp, CryptIOStringTyp } from './cryptHelper';
import { TestBed } from '@angular/core/testing';
describe('CryptHelper', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ CryptHelper ],
imports: [ ],
providers: [ CryptHelper ],
}).compileComponents();
});
it('should be created', () => {
let fixture = TestBed.createComponent(CryptHelper);
let app = fixture.debugElement.componentInstance;
expect(app).toBeDefined();
});
});
这样,我就可以在测试输出中得到错误消息
error properties: Object({ ngSyntaxError: true })
Error: Unexpected value 'CryptHelper' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.
at syntaxError (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:19889:1
at <Jasmine>
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:19871:1)
at JitCompiler._loadModules (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25582:1)
at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25571:1)
at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25533:1)
at CompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.js:237:1)
at TestingCompilerImpl.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.js:140:1)
at TestBedViewEngine.compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:3118:1)
但这让我想到了这个错误信息:
error properties: Object({ ngSyntaxError: true })
Error: Illegal state: Could not load the summary for directive CryptHelper.
at syntaxError (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
at CompileMetadataResolver.getDirectiveSummary (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:19729:1)
at JitCompiler.getComponentFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25536:1)
at CompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser-dynamic/fesm2015/platform-browser-dynamic.js:263:30)
at TestingCompilerImpl.getComponentFactory (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser-dynamic/fesm2015/testing.js:148:1)
at TestBedViewEngine.createComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:3418:1)
at Function.createComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/testing.js:3000:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/core/services/cryptHelper.spec.ts:15:27)
at <Jasmine>
错误属性:对象({ngSyntaxError:true})
错误:非法状态:无法加载指令CryptHelper的摘要。
在syntaxError(http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2175:1)
在CompileMetadataResolver.getDirectiveSummary(http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:19729:1)
在JitCompiler.getComponentFactory(http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25536:1)
在CompilerImpl.getComponentFactory(http://localhost:9876/_karma_webpack_/node_modules/@angular/platform browser dynamic/fesm2015/platform browser dynamic.js:263:30)
在TestingCompilerImpl.getComponentFactory中(http://localhost:9876/_karma_webpack_/node_modules/@angular/platform browser dynamic/fesm2015/testing.js:148:1)
在TestBedViewEngine.createComponent上(http://localhost:9876/_karma_webpack_/node_modules/@角度/核心/fesm2015/testing.js:3418:1)
在Function.createComponent(http://localhost:9876/_karma_webpack_/node_modules/@角度/核心/fesm2015/testing.js:3000:1)
在UserContext。(http://localhost:9876/_karma_webpack_/src/app/core/services/cryptHelper.spec.ts:15:27)
在
我找到了在声明中写类名的建议。但这让我想到了上面的错误消息。那我错了什么?欢迎提供任何帮助。假设CryptHelper是一个组件:
TestBed.configureTestingModule({
declarations: [ CryptHelper], // Your testing component goes here
providers: [ // Your component's providers goes here, for example a mocked service
{
provide: MyService, useValue: mockMyService
}
],
imports: [
// imports from your component, for example MatDialogModule, MatInputModule, MyComponentModule, ...
]
})
.compileComponents();
假设CryptHelper是一个服务:
let cryptHelper: CryptHelper;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [CryptHelper],
imports: []
});
cryptHelper = TestBed.get(CryptHelper);
});
describe('CryptHelper Service creation', () => {
it('should be created', inject([CryptHelper], (service: CryptHelper) => {
expect(service).toBeTruthy();
}));
});
正如您的日志所说,CryptHelper不是一个组件。所以正确的测试方法是将其作为服务使用(如果您希望将其作为DI元素使用)。 下面是一个工作示例:
describe('CryptHelper', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ CryptHelper ],
});
});
it('should be created', () => {
let fixture = TestBed.get(CryptHelper);
let app = fixture.debugElement.componentInstance;
expect(app).toBeDefined();
});
});
你可以注意到,
TestBed.get
被用来代替TestBed.createComponent
是一个角度@组件({…})
?是的,它是一个服务。所以你的第二个建议是有效的。:-)还有一个问题。什么时候使用inject有用或需要?由于直接使用it('应该创建',()=>{…})代码>也可以。很好:)。关于你的问题,嗯。。。这是我在测试服务时使用的语法,但是您可以这样做('should be created',()=>{const service:MyService=TestBed.get(MyService);expect(service.toBeTruthy()});我想可能还有其他方法。。。希望有帮助^^^谢谢,我明白了,但与Pedro B的另一个答案相比。测试后,对象夹具已经包含对象。因此,let app=…
不起作用,因此我将另一个解决方案标记为正确的解决方案。
describe('CryptHelper', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ CryptHelper ],
});
});
it('should be created', () => {
let fixture = TestBed.get(CryptHelper);
let app = fixture.debugElement.componentInstance;
expect(app).toBeDefined();
});
});