2016-12-14 4 views
6

角度2ユニットテスト(ジャスミン)におけるキー押下イベントをシミュレートすることができません。ここIフィルタテキストとして使用される入力データを取得するためのディレクティブを使用してい

ディレクティブで私hostlistenerです:

@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イベントをシミュレートしてみましたし、また設定値の属性を試してみました。これらのどれも私のために働いていません。ここ

は私のspecファイルである:

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

誰がどのように私はユニット同じことをテストすることができ、私を助けてくださいことはできますか?

+0

を_ "ここに私のスペックファイルです: "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _あなたが間違っていることを試してみるために、_ _ _ _ _ _ _ _ _ _ _ _ –

+0

フルテストテストが追加されました。ボタンをクリックして並べ替えとリフレッシュを行いました。正しく動作しています。ここに貼り付けられました – Akanksha

+0

あなたの期待はどこですか? –

答えて

11

また、私はユニットテストでキー入力をシミュレートするいくつかの問題を持っていました。しかし、Seyed Jalal Hosseiniの答えが出てきました。それはあなたが何をしているのかもしれない。

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

は私が参照してる答えは詳細を与える:あなたは押されたキーを設定したい場合は https://stackoverflow.com/a/37956877/4081730

、これも行うことができます。

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

私が遭遇しましたさらに詳しい情報:https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

1

を使用すると、キーコード(または "これを")を使用したい場合は、あなたがこれを行うことができます:

// @HostListener('document:keypress') 

const escapeEvent: any = document.createEvent('CustomEvent'); 
escapeEvent.which = 27; 
escapeEvent.initEvent('keypress', true, true); 
document.dispatchEvent(escapeEvent); 
関連する問題