TDD Angular component with Jasmine using @angular/cli

1-math.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MathService {

  constructor() { }

  subtract(a: number, b: number): number {
    return a + b;
  }
  multiply(a: number, b: number): Observable<any> {
    // you'll do this while doing TDD got this service
    // return this.http.post('you-multiplication-api-url', {a: a, b: b});

    // as of now, be happy with TDD for component, and return below :)
    return Observable.of(50);
  }
}

2-calculator.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { CalculatorComponent } from './calculator.component';
import { MathService } from './math.service';
import { Observable } from 'rxjs/Rx';

class mockMathService{
  subtract(a: number, b: number) { return 0; }
  multiply(a: number, b: number) { return Observable.of(0); }
}
describe('CalculatorComponent', () => { 
  let component: CalculatorComponent;
  let fixture: ComponentFixture<CalculatorComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CalculatorComponent ],
      providers: [
        { provide: MathService, useClass: mockMathService }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CalculatorComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should do addition', () => {
    component.param1 = 5;
    component.param2 = 7;

    component.add();

    expect(component.result).toBe(12);
  });

  it('should call mathService to do subtraction', () => {
    const mathSvcInstance = TestBed.get(MathService);
    spyOn(mathSvcInstance, 'subtract').and.returnValue(500);
    component.param1 = 5;
    component.param2 = 7;

    component.subtract();

    expect(mathSvcInstance.subtract).toHaveBeenCalledWith(component.param1, component.param2);
    expect(component.result).toBe(500);
  });

  it('should call mathService to do multiplication', () => {
    const mathSvcInstance = TestBed.get(MathService);
    spyOn(mathSvcInstance, 'multiply').and.returnValue(Observable.of(35));
    component.param1 = 5;
    component.param2 = 7;

    component.multiply();
    fixture.detectChanges();

    expect(mathSvcInstance.multiply).toHaveBeenCalledWith(component.param1, component.param2);
    expect(component.result).toBe(35);
  });
});

3-calculator.component.ts

import { Component, OnInit } from '@angular/core';
import { MathService } from './math.service';

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

  param1: number;
  param2: number;
  result: number;
  
  constructor(private mathSvc: MathService) { }
  
  add() {
    this.result = this.param1 + this.param2;
  }

  subtract() {
    this.result = this.mathSvc.subtract(this.param1, this.param2);
  }

  multiply() {
    this.mathSvc.multiply(this.param1, this.param2)
      .subscribe(data => this.result = data);
  }

  ngOnInit() {
  }
}