Angular 2/4 component unit test click event does not trigger change

Question

I am trying to unit test an angular 2/4 component and want to see if the click on a button element will cause the wanted changes. However I can not get the click event triggered.

The component

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

The test

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) input-filter.component should clear on click FAILED Expected 'test1234' to be ''.

Raj Bahadur Singh · Accepted Answer · 2017-07-11 12:18:40Z

Try below code. You can do it without adding fakeAsync As well. Just add fixture.detectChanges(); before your test code

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

  });
});

Collectives™ on Stack Overflow

Angular 2/4 component unit test click event does not trigger change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related