Angular 错误：预期已调用spy Updates

我一直收到以下错误：

每当我运行以下测试时，都会调用预期的spy Updates。是什么引起的？我试图测试在“From”货币字段中输入值时是否调用了方法
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');
      });
    }));
  });
});

description（'App component'，（）=>{
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule，HttpClientTestingModule]，
声明：[AppComponent]
}).compileComponents（）；
}));
描述（“：”，（）=>{
让夹具，应用程序；
在每个之前（（）=>{
fixture=TestBed.createComponent（AppComponent）；
app=fixture.debugElement.componentInstance；
});
之后（（）=>{
fixture.destroy（）；
app=null；
});
它（'应该成功地将GBP转换为GBP'，fakeAsync（（）=>{
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
让fromAmountValueEl=fixture.debugElement.query（By.css（'#fromAmountValue'））.nativeElement；
让toAmountValueEl=fixture.debugElement.query（By.css（'#toAmountValue'））.nativeElement；
expect（fromAmountValuel.value）.toEqual（'0'）；
expect（toAmountValueEl.value）.toEqual（'0'）；
fromAmountValuel.value='2'；
FromAmountValuel.dispatchEvent（新事件（“输入”）；
FromAmountValuel.dispatchEvent（新键盘事件（'keyup'）{
“键”：“回车”
}));
spyOn（应用程序'updateRates'）。和.callThrough（）；
spyOn（app，'post'）。和.returnValue（新的可观察到的，这并不是说不包括测试，而是应该给你一个指示，说明所有东西是如何组合在一起的。
由.css（'#'）
引用的HTML元素需要有一个同名的
id
。例如
id=“fromAmountValue”
您应该这样更改测试：

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');

description（'AppComponent'，（）=>{
let组件：AppComponent；
let fixture:ComponentFixture
它们在我的本地分支上已经有了相同的名称，而且没有什么区别。另外，我在
expect（app.updateRates）.TohaveBeenCall（）；
上收到了错误消息，这多少证明了这不一定是真的。谢谢，你能告诉我为什么
expect（toAmountValueEl.nativeElement.value）toEqual（'2'）如果调用updateRates，则
不起作用？我得到错误
错误：预期0等于2。
当我在的stackblitz上测试它时，如果从/到GBP相同，它将返回2。@methuselah这是因为
toAmount
在测试用例中不会更改。您需要以某种方式更改
toAmount
。一个选项是更改
toAmount
通过假装post方法[您可以根据您的测试逻辑将
更改为mount
]。请参阅我编辑的答案。希望能有所帮助。谢谢，最后一件事，如果我想实际测试toAmount的变化，即目标货币需要由API响应触发的情况下，该怎么办。使用上述方法是不可能的。如果我伪造post方法，我将如何实现这一点？@methuselah我添加了一个测试用例的应成功将英镑转换为欧元。请参阅我编辑的答案。您只需返回假数据并设置目标货币。希望有帮助。