Test angular for observable

I'm trying to test only the function calculateExchangeCurrency

@Input() referenceText;
@Input() exchangeText = 55; // ONLY TO CHECK IF TEST COMMANDS READ CORRECTLY
// More data...
public calculateExchangeCurrency() {

  let referenceNumber = parseFloat(this.referenceText.replace(/,/g,''))
  return Observable
    .interval(this.timeToOtherRequest)
    .startWith(0)
    .flatMap(() => this.exchangeService.getExchange('USD', 'EUR'))
    .subscribe(response => {
        console.log('here');
        this.exchangeText = response.rates['EUR'] * referenceNumber;
        console.log(this.exchangeText);
    });

}

This function only needs the parameter referenceText and Its purpose is to calculate the variable exchangeText, this variable is inserted in html via ngModel:

<input type = "text" class = "form-control result-exchange" [ngModel]="exchangeText | number" placeholder = "EUR" disabled>

TEST

• The function consumes a service and I know that I need to create a fake response for this service exchangeService, for that with spyOn I created a fake response

• I'm going to test if the variable exchangeText calculated in the function is on the html, for that motive I read from result-exchange class

code:

// Fake data for service
let testExchange = {
  rates: {
    EUR: 0.851256
  }
};

describe('HomeComponent', () => {

  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let exchangeService: ExchangeService;
  let el: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, TextMaskModule, HttpModule],
      declarations: [ HomeComponent ],
      providers: [ ExchangeService ]
    })

    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    exchangeService = TestBed.get(ExchangeService);

  });

  it('should calculate number', () => {
    fixture.detectChanges();

    //  Unique input that needs the function
    component.referenceText = '456.5';

    // Create fake response of service
    let spy = spyOn(exchangeService, 'getExchange').and.returnValue(of(testExchange));
    component.calculateExchangeCurrency();

    // Wait the page is loaded
    fixture.whenStable().then(() => {
      fixture.detectChanges();

      // Get result from html
      el = fixture.debugElement.query(By.css('.result-exchange'));

      // Test
      expect(el.nativeElement.value).toBe('396.259');
    })

  });

});

RESULT

Problems:

• In console I realize the test enter to the function but no replace the service for the fake response, It consumes from my real service because 0.851256*456.5 = 388.598 != 371.259

• Expected '55' to be '396.259'. It means the input with class exchangeText never is updated. Because it needs to be 371.259 in theory, but if the fake service works well then It needs to be 388.598

I'm learning test in angular, sorry if I made mistakes. Will be ok If also there are suggestions.