Angular指令返回失败的单元测试

Question

我有一个适用于输入类型文本框的指令numbersOnly.以下是我的组件HTML。

 <input type="text" class="form-control" id="productIndex"
               required
               numbersOnly
               name="productId"
               placeholder="Enter Product Index"
               #postProduct
               (keyup)="onProductAdd(postProduct)"
                />

一个非常简单的指令，限制输入任何字母。

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this._el.nativeElement.value) {
      event.preventDefault();
    }
  }
}

现在，当使用jasmine编写单元测试用例时，它总是显示错误。下面是我的UT文件。(注意：Keydown事件正在被触发)

import {ComponentFixture, TestBed} from '@angular/core/testing';
import { NumbersOnlyDirective } from './numbers-only.directive';
import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component({
  template: `<input numbersOnly type="text" name="productId"  />`
})
// tslint:disable-next-line:no-unnecessary-class
class TestAllowOnlyNumbersComponent {
 //  allowNumbers = true;
}
fdescribe('Directive: numbersOnly', () => {
  let component: TestAllowOnlyNumbersComponent;
  let fixture: ComponentFixture<TestAllowOnlyNumbersComponent>;
  let inputEl: DebugElement;


  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestAllowOnlyNumbersComponent, NumbersOnlyDirective],
      schemas:      [ NO_ERRORS_SCHEMA ],
    });
    fixture = TestBed.createComponent(TestAllowOnlyNumbersComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.css('input[name="productId"]'));
    fixture.detectChanges();   
  });

  it('keydown input', () => {
    const event = new KeyboardEvent('keydown', { key: 'F' });
    inputEl.nativeElement.dispatchEvent(event);
    expect(event.defaultPrevented).toBe(true);
  });

});