角度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(''); 

    }); 
});