错误：预期的间谍updateRates已被调用

Question

每当我运行以下测试时，我都会不断收到以下错误：Expected spy updateRates to have been called。是什么原因造成的？我试图测试在“发件人”货币字段中输入值时是否调用方法updateRates()。

describe('App component', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, HttpClientTestingModule],
      declarations: [AppComponent]
    }).compileComponents();
  }));
  describe(':', () => {
    let fixture, app;

    beforeEach(() => {
      fixture = TestBed.createComponent(AppComponent);
      app = fixture.debugElement.componentInstance;
    });

    afterEach(() => {
      fixture.destroy();
      app = null;
    });

    it('should successfully convert GBP to GBP', fakeAsync(() => {
      fixture.detectChanges();
      fixture.whenStable().then(() => {
        let fromAmountValueEl = fixture.debugElement.query(By.css('#fromAmountValue')).nativeElement;
        let toAmountValueEl = fixture.debugElement.query(By.css('#toAmountValue')).nativeElement;
        expect(fromAmountValueEl.value).toEqual('0');
        expect(toAmountValueEl.value).toEqual('0');

        fromAmountValueEl.value = '2';
        fromAmountValueEl.dispatchEvent(new Event('input'));
        fromAmountValueEl.dispatchEvent(new KeyboardEvent('keyup', {
          'key': 'Enter'
        }));
        spyOn(app, 'updateRates').and.callThrough();
        spyOn(app, 'post').and.returnValue(new Observable<any>());

        tick();  
        fixture.detectChanges();
        expect(app.updateRates).toHaveBeenCalled();
        expect(app.toCurrency).toEqual('GBP');
        expect(fromAmountValueEl.value).toEqual('2');
        expect(toAmountValueEl.value).toEqual('2');
      });
    }));
  });
});

Stackblitz： https://stackblitz.com/edit/http-get-post-dgcuur，并不是说这不包括测试，但应该指出所有内容如何组合在一起。

Answer 1

您应该这样更改测试：

describe('AppComponent', () => {

  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ]      
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
  });

  it('should successfully convert GBP to GBP', fakeAsync(() => {
fixture.detectChanges();

let fromAmountValueEl = fixture.debugElement.query(By.css('#fromAmountValue'));
let toAmountValueEl = fixture.debugElement.query(By.css('#toAmountValue'));

tick(1000);
expect(fromAmountValueEl.nativeElement.value).toEqual('0');
expect(toAmountValueEl.nativeElement.value).toEqual('0');

component.fromAmount = 2;
fixture.detectChanges();

spyOn(component, 'updateRates').and.callThrough();
spyOn(component, 'post').and.callFake(() => {
  component.toAmount = 2;
  return new Observable<any>();
});

fromAmountValueEl.triggerEventHandler('keyup', null);
fixture.detectChanges();
tick(1000);

expect(component.updateRates).toHaveBeenCalled();
//expect(component.toCurrency).toEqual('GBP');
expect(fromAmountValueEl.nativeElement.value).toEqual('2');
expect(toAmountValueEl.nativeElement.value).toEqual('2');
 }));

it('should successfully convert GBP to EUR', fakeAsync(() => {
    fixture.detectChanges();

let fromAmountValueEl = fixture.debugElement.query(By.css('#fromAmountValue'));
let toAmountValueEl = fixture.debugElement.query(By.css('#toAmountValue'));
component.targetCurrency = "EUR";
tick(1000);
expect(fromAmountValueEl.nativeElement.value).toEqual('0');
expect(toAmountValueEl.nativeElement.value).toEqual('0');

component.fromAmount = 2;
fixture.detectChanges();

spyOn(component, 'updateRates').and.callThrough();
spyOn(component, 'post').and.callFake(() => {
  return of({ "USD": 2.54, "EUR": 2.24 });
});

fromAmountValueEl.triggerEventHandler('keyup', null);
fixture.detectChanges();
tick(1000);

expect(component.updateRates).toHaveBeenCalled();
//expect(component.toCurrency).toEqual('GBP');
expect(fromAmountValueEl.nativeElement.value).toEqual('2');
expect(toAmountValueEl.nativeElement.value).toEqual('2.24');

}））；     }）;

Answer 2

By.css('#<id>')引用的HTML元素必须具有相同名称的id。例如id="fromAmountValue"。