Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

168
Vistas
Prueba de enlace bidireccional con ngModel en Angular2

He leído la documentación para probar el enlace bidireccional en Angular2. Todos los ejemplos son simples, demasiado simples, en realidad.

Parece que solo prueban el out-binding...

Voy a publicar un código para ilustrar:

 import { Component, Input } from "@angular/core"; import { ComponentFixture, async, TestBed, tick, fakeAsync } from "@angular/core/testing"; import { FormsModule } from "@angular/forms"; import { By } from "@angular/platform-browser"; @Component({ selector: 'test', template: ` <input type="text" [(ngModel)]="myValue" /> <div>{{ myValue }}</div> ` }) class TestComponent { @Input() myValue: string } describe('Example', () => { let component: TestComponent let fixture: ComponentFixture<TestComponent> beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [TestComponent], providers: [], imports: [FormsModule] }) .compileComponents() })) beforeEach(() => { fixture = TestBed.createComponent(TestComponent) component = fixture.componentInstance fixture.detectChanges() }) it('should test two-way binding by setting the component member', fakeAsync(() => { const testValue = 'Component member test' component.myValue = testValue // Should be the correct way to test ngModel tick(); fixture.detectChanges(); // Assertion error: Expected '' to equal 'Component member test' // Why wasn't the value set in the textbox? expect(fixture.debugElement.query(By.css('input')) .nativeElement.value).toEqual(testValue) //Yeah, the bananas are working. We have out-binding expect(fixture.debugElement .query(By.css('div')) .nativeElement .textContent ).toEqual(testValue); })) it('should test two-way binding by setting value directly on the native element. But that just tests the out-binding', fakeAsync(() => { const testValue = 'NativeElement test' let element = fixture.debugElement.query(By.css('input')).nativeElement; element.value = testValue // this tests only the out-binding element.dispatchEvent(new Event('input')); tick(); fixture.detectChanges(); //of course this is Ok, we just set it directly expect(fixture.debugElement.query(By.css('input')) .nativeElement.value).toEqual(testValue) //Yeah, the bananas are working. We have out-binding expect(fixture.debugElement .query(By.css('div')) .nativeElement .textContent ).toEqual(testValue); })) })

Entonces, ¿hay alguna manera de probar el componente configurando myValue? Creo que me estoy perdiendo algo...

about 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Intenta intercambiar dos líneas:

 tick(); fixture.detectChanges();

así debería ser

 fixture.detectChanges(); tick();

Significa que primero debe establecer el valor y luego esperar mientras angular actualiza el valor de control porque sucederá dentro Promise.then

https://github.com/angular/angular/blob/4.1.0-rc.0/packages/forms/src/directives/ng_model.ts#L213-L214

Ejemplo de Plunker

about 4 years ago · Santiago Trujillo Denunciar

0

debe agregar el atributo de nombre en su etiqueta de entrada html

 <input type="text" [(ngModel)]="myValue" name="myValue"/>
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda