How To Check Function Is Called Or Not In Angular?

I am trying to test component in angular .following thing I need to test service function is called or not how to mock the response here is my code https://stackblitz.com/edit/a

Solution 1:

you can mock the service that way:

const mockPosts: Posts = {
   userId: 10,
   id: 10,
   title: "post",
   body: "post"};

classMockAppServiceextendsAppService{

   publicgetData() {
      return Observable.of(mockPosts)
   }
  }

and use that mock class in your providers instead of the service

 { provide:AppService, useClass:MockAppService },

and add this:

fixture = TestBed.createComponent(AppComponent);component = fixture.componentInstance;appservice = TestBed.get(AppService); // this line

you can spyOn that service and return a value like this

spyOn(appservice , 'getData').and.returnValue("your value")

final file

import { ComponentFixture,TestBed, async,getTestBed } from'@angular/core/testing';
  import { HttpClientTestingModule, HttpTestingController } from'@angular/common/http/testing';
  import { HttpClientModule, HttpClient } from'@angular/common/http';

  import { AppComponent } from'./app.component';
  import { AppService } from'./app.service';
  import { Observable } from'rxjs/Observable';
  import { Posts } from'./post.interface';
  import'rxjs/add/observable/of';

  constmockPosts: Posts = 
  {userId: 10,
  id: 10,
  title: "post",
  body: "post",};
 classMockAppServiceextendsAppService {
 publicgetData(){
    returnObservable.of(mockPosts)
   }
 }

 describe('AppComponent', () => {
  letfixture:ComponentFixture<AppComponent>,
  component:AppComponent,
  injector:TestBed,
  service:AppService,
  httpMock:HttpTestingController,
  el:HTMLElement;
 beforeEach(async(() => {
 TestBed.configureTestingModule({
   imports: [HttpClientTestingModule],
  declarations: [
    AppComponent
   ],
   providers: [ 
    { provide: AppService, useClass: MockAppService }
   ]

   }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    service = TestBed.get(AppService)
    // injector = getTestBed();// service = injector.get(AppService);// httpMock = injector.get(HttpTestingController);spyOn(service,'getData');
  }));

  afterEach(() => {
  //httpMock.verify();
  });
  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;
  service = TestBed.get(AppService)
  // injector = getTestBed();// service = injector.get(AppService);// httpMock = injector.get(HttpTestingController);spyOn(service,'getData');


  describe('AppComponent onit test', () => {
  it('should create the app', async(() => {
    expect(true).toBe(true);
  }));
  it('should called appService getData method', async(() => {
      fixture.detectChanges(); 
     expect(service.getData).toHaveBeenCalled();
  }));
  })
 });