Estoy intentando probar la función de enlace bidireccional en Angular 2. También he leído algunas otras respuestas, pero todavía no puedo pasar la prueba.

Cuando se actualice el campo de entrada, me gustaría ejecutar una prueba que garantice que la propiedad searchQuery en la clase AppComponent sea el mismo que el valor del campo de entrada.

Como se mencionó, he leído algunas otras respuestas y, a medida que avanzaba, incluí piezas de código adicionales. Entonces, ¿qué hay actualmente que podría no ser necesario?

Componente

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<input type="text" name="input" [(ngModel)]="searchQuery" (change)="onChange()" id="search">', styles: [''] }) export class AppComponent { public searchQuery: string; onChange() { console.log(this.searchQuery); } }

Prueba de unidad

 import { ComponentFixture, TestBed, async, fakeAsync, tick, ComponentFixtureAutoDetect } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; describe('AppComponent', () => { let comp: AppComponent; let fixture: ComponentFixture<AppComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], providers: [], imports: [ FormsModule ], schemas: [] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); comp = fixture.componentInstance; }); it('should create the app', fakeAsync(() => { const de = fixture.debugElement.query(By.css("#search")); const el = de.nativeElement; el.value = "My string"; var event = new Event('input', { 'bubbles': true, 'cancelable': true }); el.dispatchEvent(event); tick(); fixture.detectChanges(); expect(comp.searchQuery).toEqual("My string"); })); });

Si hay un mejor enfoque, por supuesto, estoy feliz de recibir comentarios al respecto.