unitarias - Valor de entrada de prueba de unidad angular

test service angular 4

Question

He estado leyendo la documentación oficial de Angular2 para pruebas de unidad ( https://angular.io/docs/ts/latest/guide/testing.html ) pero me cuesta configurar el valor del campo de entrada de un componente para que se refleje en la propiedad del componente (enlazado a través de ngModel). La pantalla funciona bien en el navegador, pero en la prueba de la unidad parece que no puedo establecer el valor de los campos.

Estoy usando el código de abajo. El "accesorio" se inicializa correctamente ya que otras pruebas funcionan bien. "comp" es una instancia de mi componente, y el campo de entrada está vinculado a "user.username" a través de ngModel.

it(''should update model...'', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css(''#user'')).nativeElement;
    field.value = ''someValue''
    field.dispatchEvent(new Event(''input''));
    fixture.detectChanges();

    expect(field.textContent).toBe(''someValue'');
    expect(comp.user.username).toBe(''someValue'');
  }));

Mi versión de Angular2: "@angular/core": "2.0.0"

Answer 1

Las entradas no tienen contenido de texto, solo un valor. Así que expect(field.textContent).toBe(''someValue''); es inútil Eso es probablemente lo que está fallando. La segunda expectativa debería pasar sin embargo. Aquí hay una prueba completa.

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: ''peeskillet'' };
}

describe(''component: TestComponent'', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [ TestComponent ]
    });
  });

  it(''should be ok'', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css(''input''));
      let el = input.nativeElement;

      expect(el.value).toBe(''peeskillet'');

      el.value = ''someValue'';
      el.dispatchEvent(new Event(''input''));

      expect(fixture.componentInstance.user.username).toBe(''someValue'');
    });
  }));
});

Answer 2

Solo agrega

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})

Answer 3

Use su expectativa / whenStable.then dentro de la función whenStable.then esta manera:

    component.label = ''blah'';
    fixture.detectChanges();

    fixture.whenStable().then(() => {
             expect(component.label).toBe(''blah'');
        }