如何将ts-mockito注入Angular 4组件测试

亚当·休斯

类似于这个关于typemoq注入的问题,如何将ts-mockito对象注入angular的对象中TestBed.configureTestingModule()我可以找到的任何示例ts-mockito测试都与角度无关。

考虑下面的最小工作示例进行测试-它包含一个ProgressComponentProgressService在我们要模拟的后端带有一个该服务非常简单:

import { Injectable } from '@angular/core';

@Injectable()
export class ProgressService {
    private currentState: string = '1';

    constructor() {
    }

    setCurrentState(state: string) {
        this.currentState = state;
    }

    getCurrentState(){
        return this.currentState
    }

}

为了模拟不使用ts-mockito,我们只需扩展类。

import {ProgressService} from "../../../progress.service";

export class MockProgressService extends ProgressService{}

然后在进行测试时ProgressComponent,将MockProgressService其传递到TestBed。

import {async, ComponentFixture, getTestBed, TestBed} from '@angular/core/testing'

import { ProgressComponent } from './progress.component'
import {ProgressService} from "../progress.service"
import {MockProgressService} from "../shared/services/progress/progress.mock";

describe('ProgressComponent', () => {
  let injector: TestBed
  let mockService: ProgressService
  let fixture: ComponentFixture<ProgressComponent>
  let component: ProgressComponent

  beforeEach(async() => {
    TestBed.configureTestingModule({
      declarations: [ ProgressComponent ],
      providers: [{provide: ProgressService, useClass: MockProgressService}]
    }).compileComponents()

    injector = getTestBed()
    fixture = TestBed.createComponent(ProgressComponent)
    component = fixture.componentInstance
    mockService = injector.get(ProgressService)

    fixture.detectChanges();
  });
});

角度测试框架通过引入了依赖注入TestBed我们如何在Angle的测试设置中使用Mockito?例如,如何使该片段injector.get(ProgressService)与ts-mockito模拟兼容?

那将是烧瓶

如果应该用另一个对象而不是类来模拟提供程序,则应使用useValueuseFactory

对于茉莉花而言:

providers: [{
  provide: ProgressService,
  useValue: jasmine.createSpyObj('ProgressService', [...])
}]

对于ts​​-mockito,它可以是:

progressServiceMock = mock(ProgressService);
...
providers: [{provide: ProgressService, useValue: instance(progressServiceMock)}]

虽然继承模拟类frim原始类class MockProgressService extends ProgressService通常没有任何好处。如果打算模拟某些方法,则可以jasmine.spy在真实的类实例或类原型上使用它们(或当前测试框架具有的对应方法)进行模拟当一个类不是当前单元测试中要测试的类时,模拟/存根所有方法而不是其中的几种方法对于测试隔离是有益的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何对使用router.paramMap的Angular 4组件进行单元测试

如何将纯JavaScript文件添加到Angular 4组件中?

如何将服务注入Angular 1.5组件(无打字稿)

如何绑定Angular4组件的输入参数

如何从JSP获取值并将其注入Angular 5组件(main.ts)

在测试angular2组件时如何模拟可观察的流?

如何在Angular 1.5组件中对功能进行单元测试

如何对Angular 1.5组件模板进行单元测试?

如何对使用Jquery的Angular 6组件进行单元测试

如何在Angular 9组件单元测试中调用伪函数

如何测试带有嵌套组件并带有其自身依赖项的angular 2组件?(TestBed.configureTestingModule)

Angular 2组件注入服务:“ [ts]该类型不存在属性”

如何使用Angular CLI + ng-packagr + state mgmt构建Angular 4组件库?

如何将``link''函数替换为Angular 2组件中的目标DOM元素

如何将Angular2组件渲染为字符串?

如何将通用HTML传递给Angular 2组件?

如何将JavaScript重新绑定到angular2组件中的元素?

如何将变量从@Input传递到Angular2组件中的服务>

将JavaScript文件添加到Angular 4组件

如何在Leaflet标记的弹出窗口中生成Angular 4组件?

Angular 2/4组件单元测试单击事件不会触发更改

如何在ES5中将升级的Angular 1服务/工厂注入Angular 2组件?

如何在Angular 5组件中注入AngularJS服务?

如何在Angular 1.5组件中对具有不同名称的绑定进行单元测试?

如何将Angular 6+服务变量注入app-routing.module.spec.ts并测试路由器重定向

在Angular中,当组件不是父/子组件时,如何将值从一个组件传递到另一组件?

我应该如何对已导入其他模块(和组件)的Angular2组件和模块进行单元测试

使用构造函数参数测试Angular 2组件

在单元测试中模拟Angular 1.5组件