Jasmine / Karma 的 Angular Mock 字段/属性答案

【问题标题】：Angular Mock field/property with Jasmine / KarmaJasmine / Karma 的 Angular Mock 字段/属性
【发布时间】：2018-10-20 16:10:13
【问题描述】：

我正在尝试测试一个使用 Service 的组件，该组件具有在方法组件内调用的属性。我需要根据测试模拟和更改该属性。

我有这个：

export class XService{
  xProperty:boolean;
}

export class XComponent{

   ctor(private xService:XService){
   }

   xMethod():void{
     if(xService.xProperty){
         //some code
     }
   }
}

我尝试创建一个模拟并在 beforeEach 方法中添加属性

beforeEach(() => {
    /**more code**/
    xServiceMock = jasmine.createSpyObj(['xMethodService']);
    xServiceMock ['xProperty'] = false;
});

在我必须更改其中一项测试中的值之前，这很有效。当我这样做时，值不会刷新。

it('x validation', () => {
    xServiceMock.xProperty = true;
    fixture.detectChanges();
    component.xMethod();<<<-- When it calls the method the change to TRUE is not refreshed
    expect(/****/).toBe(false);
  });

你知道我是否可以用 Jasmine 模拟该属性吗？有可能吗？

【问题讨论】：

标签： angular unit-testing jasmine karma-jasmine karma-runner

【解决方案1】：

您可以为您的服务使用模拟

class MockXService extends XService{
   xProperty = false; // set a fake value here    
}

以这种方式将服务添加到提供者

beforeEach(async(() => {
TestBed.configureTestingModule({
  ...,
   declarations: [XComponent],
  providers: [
    { provide: XService, useClass: MockXService },
  ],

})

和你的测试

it('x validation', () => {
fixture.detectChanges();
component.xMethod();<<<-- When it calls the method the change to TRUE is not refreshed
expect(/****/).toBe(false);
});

【讨论】：

【解决方案2】：

这可以帮助您： https://next.angular.io/guide/testing#always-get-the-service-from-an-injector

基本上，当您在configureTestingModule 中提供模拟/间谍/存根而不是真实服务时，您需要在之后使用TestBed.get() 获取它。

【讨论】：

【解决方案3】：

在大多数情况下，使用 TestBed 测试 Angular 服务会导致过载。检查我的答案here

【讨论】：