I'm currently working on testing a component in Angular 2/4 to determine if clicking on a button element will result in the desired changes. However, I'm facing an issue with triggering the click event.
Here is the component code:
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);
}
}
And here is the 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
}
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 ''.