Angular Mock field/property with Jasmine / Karma

user_4744829 0
Viewed 4663

I'm trying to test a component which uses a Service with a property called inside a method's component. I need to mock and change that property depending on the test.

I have this:

export class XService{
  xProperty:boolean;
}

export class XComponent{

   ctor(private xService:XService){
   }

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

I tried it creating a mock and adding the property in beforeEach method

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

That works well until I have to change the value in one of the tests. When I do it, the value is not refreshed.

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);
  });

Do you know if I can mock that property with Jasmine? Is it possible?

karma-runner karma-jasmine jasmine angular unit-testing
3 Answers

you can use a mock for your service

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

add the service to providers this way 

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

})

and your test

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

Using TestBed for testing Angular services makes overload in most cases. Check my answer here

user_26772920
Related