title: Angular Mock Service is not getting Called in Component Spec (Karma)
body: <p>Trying to write test cases for mainchat.component.ts but i am not able to figure it out.(New to Karma). Sample Code below   </p>
  
  <pre><code> getActiveUsers(): void {    
      this._ChatService.getActiveUserInfo().subscribe(data =&gt; {
        this.Users = data;          
      }, err =&gt; {
        console.log(err);
      });
    }
  </code></pre>
  
  <p>And the ChatService is as below:   </p>
  
  <pre><code>@Injectable()
  export class ChatService {
    constructor(private _http: HttpClient) { }
    getActiveUserInfo(): any {        
      return this._http
          .get&lt;any&gt;(Globaldata.API_ENDPOINT_LOCAL + '/api/getActiveUsers')
          .do(data =&gt; console.log('All this : ' + JSON.stringify(data)))
  }
  getActiveGroupInfo(): any {      
    return this._http
        .get&lt;any&gt;(Globaldata.API_ENDPOINT_LOCAL + '/api/getActiveGroups')
        .do(data =&gt; console.log('All this : ' + JSON.stringify(data)))
    }
  }
  </code></pre>
  
  <p>I am trying to write the test cases for the above Component but not able to figure out how to stub the services   </p>
  
  <pre><code>  class MockChatService extends ChatService {    
    constructor() {
        super(null);
    }    
    testActiveUser: Array &lt; USER &gt; = [
        new USER(),
        new USER()
    ];    
    testActiveGroup: Array &lt; GROUP &gt; = [
        new GROUP()
    ];    
  
    public getActiveUserInfo(): Observable &lt; USER[] &gt; {
      return Observable.of(this.testActiveUser);
    }
  
    public getActiveGroupInfo(): Observable &lt; GROUP[] &gt; {
      return Observable.of(this.testActiveGroup);
    }
  }
  
  describe('InstantMessangerComponent (inline template)', () =&gt; {
  
    let chatService: MockChatService;
    let component: InstantMessangerComponent;
    let fixture: ComponentFixture &lt; InstantMessangerComponent &gt; ;
  
    beforeEach(async (() =&gt; {
        TestBed.configureTestingModule({
                imports: [FormsModule, HttpClientModule, HttpModule],
                declarations: [InstantMessangerComponent, MessagewindowComponent, SearchuserPipe],
                providers: [{
                    provide: ChatService,
                    useClass: MockChatService
                }]
            }).overrideComponent(ChatService, {
                set: {
                    providers: [{
                        provide: ChatService,
                        useClass: MockChatService
                    }]
                }
            }).compileComponents() // compile template and css
            .then(() =&gt; {
                fixture = TestBed.createComponent(InstantMessangerComponent);
                component = fixture.componentInstance; // InstantMessangerComponent test instance
                chatService = TestBed.get(ChatService);
            });
    }));
  
    it('expects getActiveUsers() to have been called', function() {
  
        spyOn(component, 'getActiveUsers').and.callThrough();
  
        component.getActiveUsers();
  
        expect(component.getActiveUsers).toHaveBeenCalled();
    });
   });
  </code></pre>
  
  <p>The Test Suite is calling the Main ChatService rather than MockChatService.</p>