title: angular: How to mock extends class in unit test
body: <p>I've a injectable service (EntityApi) which extends a class (BaseApi). In my spec I like to mock the BaseApi with BaseApiStub. But it vain. Always calling the EntityApi.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// class
  export class BaseApi { // want to mock BaseApi
      constructor(injector: Injector) {
         console.log("Should not be here...");
      }
  }
  
  // service
  @Injectable()
  export class EntityApi extends BaseApi {
      constructor(injector: Injector) {
         super(injector, "entity");
      }
  }
  
  // component
  @Component({
    selector: 'rt-entity-list',
    templateUrl: './entity-list.component.html',
  })
  export class EntityListComponent {
    api: any;
    constructor(public entityApi: EntityApi) { 
      this.api = entityApi;
    }
  }
  
  // mock api
  export class BaseApiStub { //mocked api
      constructor() {
        console.log("You are on track!!")
      }
      get() { }
  }
  
  // spec
  describe('EntityListComponent', () =&gt; {
    let component: EntityListComponent;
    let fixture: ComponentFixture&lt;EntityListComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [EntityListComponent],
        providers: [ { provide: BaseApi, useClass: BaseApiStub }, // mocked class.
        ],
        schemas: [NO_ERRORS_SCHEMA]
      }).compileComponents();
      
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(EntityListComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Expected Behavior is, while compile component in spec. It should call the BaseApiStub, instead it is calling BaseApi. I've seen a solution as below. But no luck.</p>
  
  <pre><code>export class BaseApiStub extends BaseApi { }
  </code></pre>
  
  <blockquote>
    <p>Test Code: <a href="https://stackblitz.com/edit/angular-testing-template-zaulhn" rel="noreferrer">stackblitz</a> Check the console. I expect the <strong>You are
    on track!!</strong> log but received as <strong>Should not be here...</strong></p>
  </blockquote>
  
  <p>Not able to progress further. Can someone correct my mistake please. </p>