角度2/4コンポーネントユニットテストのクリックイベントが変更をトリガしない

Question

角度2/4コンポーネントを単体テストしようとしていて、ボタン要素をクリックして変更が必要になるかどうかを確認したい。しかし、私はクリックイベントを引き起こすことができません。

コンポーネント

import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } 
from '@angular/core'; 
@Component({ 
    selector: 'input-filter', 
    template: ` 
<div class="input-widget"> 
    <div class="icon-filter"></div> 
    <input 
     type="text" 
     [value]="value" 
     (input)="filter.emit($event.target.value)" 
     placeholder="... filter"/> 
    <span (click)="clear()" class="clear icon-clear-field_S"></span> 
</div> 
    `, 
    changeDetection: ChangeDetectionStrategy.OnPush, 
}) 
export class InputFilterComponent { 
    @Input() value; 
    @Output() filter = new EventEmitter(false); 
    clear() { 
     this.value = ''; 
     this.filterBoxes = []; 
     this.filter.emit(this.value); 
    } 
} 

テスト

import { TestBed } from '@angular/core/testing'; 
import { FormsModule } from '@angular/forms'; 
import { InputFilterComponent } from './input-filter.component'; 
import { Component} from '@angular/core'; 
const testValue = 'test1234'; 
@Component({ 
selector : 'test-cmp', 
template : `<input-filter [value]="testValueC"></input-filter>`, 
}) 
class TestCmpWrapper { 
    testValueC = testValue; // mock input 
} 
describe('input-filter.component',() => { 
    let fixture; 
    beforeEach(() => { 
     TestBed.configureTestingModule({ 
      imports: [FormsModule], 
      declarations: [TestCmpWrapper, InputFilterComponent], 
     }); 
     fixture = TestBed.createComponent(TestCmpWrapper); 
    }); 
    it('should clear on click',() => { 
     let testHostComponent = fixture.componentInstance; 
     const el = fixture.debugElement.nativeElement; 

     // both methods to trigger click do not work 
     el.querySelector('.clear').click(); 
     el.querySelector('.clear').dispatchEvent(new Event('click')); 

     fixture.detectChanges(); 
     fixture.whenStable().then(() => { 
      expect(el.querySelector('input').value).toBe(''); 
     }) 
    }); 
}); 

HeadlessChromeクリックで をクリアする必要があります0.0.0（Linuxでは0.0.0）入力-filter.componentが期待FAILED 'test1234' へ""。

Answer 1

下記のコードを試してください。 fakeAsyncを追加しなくてもそれを行うことができます。 fixture.detectChanges（）を追加するだけです。テストコードの前に

import { TestBed } from '@angular/core/testing'; 
import { FormsModule } from '@angular/forms'; 
import { InputFilterComponent } from './input-filter.component'; 
import { Component } from '@angular/core'; 
const testValue = 'test1234'; 
@Component({ 
    selector: 'test-cmp', 
    template: `<input-filter [value]="testValueC"></input-filter>`, 
}) 
class TestCmpWrapper { 
    testValueC = testValue; // mock input 
} 
fdescribe('input-filter.component',() => { 
    let fixture; 
    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [FormsModule], 
     declarations: [TestCmpWrapper, InputFilterComponent], 
    }); 
    fixture = TestBed.createComponent(TestCmpWrapper); 
    }); 
    it('should clear on click',() => { 
    fixture.detectChanges(); 
    const testHostComponent = fixture.componentInstance; 
    const el = fixture.debugElement.nativeElement; 

    // both methods to trigger click do not work 
    el.querySelector('.clear').click(); 
    el.querySelector('.clear').dispatchEvent(new Event('click')); 

    fixture.detectChanges(); 

    expect(el.querySelector('input').value).toBe(''); 

    }); 
});