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

  });
});