How to fix 'TypeError: this.productService.getProducts is not a function' error?

I am using the latest version of angular and am trying to write unit test to test Service that gets list of products from Web API in Angular and am new to this. I am able to get the products displayed on the page so the get method seems to work but unable to solve the test error. Any help please?

When running ng test in visual code terminal it fails for the test: "should retrieve products from the API via Get" with error :

should retrieve products from the API via Get

TypeError: mockService.getProducts is not a function
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/services/product.service.spec.ts:45:19)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:391:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:390:1)
    at Zone../node_modules/zone.js/dist/zone.js.Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone.js:150:1)

app.component.ts

import { Component,OnInit } from '@angular/core';
import { ProductService } from './services/product.service';
import { Product } from './models/product.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})  
export class AppComponent implements OnInit{

  title = 'Products App';
  products : Product[];

  constructor(private productService:ProductService)
  {
     console.log('constructor ran');
  }

  ngOnInit()
  {
    console.log('ngOnInit ran...');
    this.productService.getProducts().subscribe(products=> {
      console.log(products);
      this.products = products.map(x => new Product(x));
    })
  }
}

product.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from  'rxjs/operators'
import { Product } from './../models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http:Http) { 
    console.log('Product Service connected...');    
  }

  getProducts(){
      return this.http.get('http://localhost:50324/v1/products')
      .pipe(map(res=> res.json()));
  }  
}

product.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
// import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { ProductService } from './product.service';
import { Product } from '../models/product.model';

import {HttpClientModule} from '@angular/common/http';
import {AbstractMockObservableService} from './../services/AbstractMockObservableService.service';
import { AppComponent } from '../app.component';

class MockService extends AbstractMockObservableService {
  doStuff() {
    return this;
  }
}

let mockService;
beforeEach(() => {
  mockService = new MockService();
  TestBed.configureTestingModule({
    providers: [{provide: ProductService, useValue: ProductService }],
    declarations: [ AppComponent ]
  });
});
it('should retrieve products from the API via Get', () => {
      const testProducts : Product[]= [
        { id: 1, productName: "G1", modelCode: "SM1", serialNumber: "SN1"},
        { id: 2, productName: "G2", modelCode: "SM2", serialNumber: "SN2"},
        { id: 3, productName: "G3", modelCode: "SM3", serialNumber: "SN3"}
      ];
      mockService.getProducts().subscribe(products => {
        expect(products.length).toBe(3);
        expect(products).toEqual(testProducts);
      })