web-dev-qa-db-ja.com

Angular 2ユニットテスト（Jasmine）でキー押下イベントをシミュレートできません

フィルターテキストとして使用される入力からデータを取得するディレクティブを使用しています。

ここにディレクティブの私のホストリスナーがあります：

@HostListener('input', ['$event.target.value'])
  public onChangeFilter(event: any): void {
    console.log('input event fired, value: ' + event);
    this.columnFiltering.filterString = event;
    this.filterChanged.emit({filtering: this.columnFiltering});
  }

このコードは完全に機能しているので、同じコードを単体テストすることはできません。

値を確認する単体テストで、filterChanged EventEmitterをサブスクライブしました。

Keypressイベントをシミュレートして値を変更し、値属性の設定も試みました。これらのどれも私のために働いていません。

ここに私のスペックファイルがあります：

describe('Table View', () => {
  let fixture: ComponentFixture<any>;
    let context: TableComponent;
   beforeEach(() => {
     TestBed.configureTestingModule({
          providers: [
            TableComponent,
          ],
          imports: [TableModule],
      });
      fixture = TestBed.createComponent(TableComponent);
      context = fixture.componentInstance;
    });
it('should allow filter', () => {
      const element = fixture.nativeElement;
      context.config = config;
      fixture.detectChanges();

      let tableChangeCount = 0;
      let tableEvent: any;
      context.tableChanged.subscribe((event: any) => {
        tableChangeCount++;
        tableEvent = event;
      });
      // Check if table exists
      let inputElement = element.querySelectorAll('tr')[1].querySelector('input');
    let e = new KeyboardEvent("keypress", {
            key: "a",
            bubbles: true,
            cancelable: true,
          });
          inputElement.dispatchEvent(e);
 });

});

値を設定してみました：

let attrs = inputElement.attributes;
      inputElement.setAttribute('value', 'abc');
       for (let i = attrs.length - 1; i >= 0; i--) {
         // Attribute value is set correctly
         if (attrs[i].name === 'value') {
         console.log(attrs[i].name + "->" + attrs[i].value);
         }
       }

誰でも私を助けてくれますか、どのように同じを単体テストできますか？

unit-testingangularinputjasminekeypress
16
Akanksha Gaur

ユニットテストでもキー入力をシミュレートするのに苦労しました。しかし、Seyed Jalal Hosseiniが答えを見つけました。それはあなたが求めているものかもしれません。

キー押下をシミュレートしようとしている場合は、要素に対してdispatchEvent(new Event('keypress'));を呼び出すことでイベントをトリガーできます。

ここで私が言及している答えがより詳細になります： https://stackoverflow.com/a/37956877/40817

押されたキーを設定する場合は、これも実行できます。

const event = new KeyboardEvent("keypress",{
    "key": "Enter"
});
el.dispatchEvent(event);

私が出会ったばかりの詳細情報： https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

30
bmd

キーコード（または "which"）を使用する場合は、次の操作を実行できます。

// @HostListener('document:keypress')

const escapeEvent: any = document.createEvent('CustomEvent');
escapeEvent.which = 27;
escapeEvent.initEvent('keypress', true, true);
document.dispatchEvent(escapeEvent);
3
Steve Brush