Угловые тесты не обнаруживают изменения входного значения

У меня есть приложение, в котором я меняю значение input, и оно должно немедленно изменить значение h1. Он хорошо работает при проверке вручную (изменение input изменяет h1), но не работает в тесте (изменение input не влияет на содержимое h1).

Я дважды проверил, вызываю ли я detectChanges и whenStable, когда должен я думаю, но мне все равно не повезло.

Может кто-нибудь заметить, что я делаю неправильно?

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <form>
      <input type = "text" name = "query-input" [(ngModel)] = "myText" />
    </form>
    <h1>H1 content is "{{myText}}"</h1>
  `
})
export class AppComponent implements OnInit {
  public myText = 'Default value';

  ngOnInit(): void {
    this.myText = 'Value from ngOnInit';
  }
}

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

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

  it('should work', () => {
    const fixture = TestBed.createComponent(AppComponent);
    console.info(fixture.componentInstance.myText); // VALUE IS OK: "Default value"
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      console.info(fixture.componentInstance.myText); // VALUE IS OK: "Value from ngOnInit"
      const compiled = fixture.debugElement.nativeElement;
      compiled.querySelector('input').value = 'Value from test';
      fixture.detectChanges();
      fixture.whenStable().then(() => {
        console.info(compiled.querySelector('input').value); // VALUE IS OK: 'Value from test'
        console.info(fixture.componentInstance.myText); // VALUE IS UNEXPECTED: 'Value from ngOnInit'
        console.info(compiled.querySelector('h1').textContent); // VALUE IS UNEXPECTED: 'H1 content is "Value from ngOnInit"'
      });
    });
  });
});

Итак, в этих двух последних console.info я получаю Value from ngOnInit, но я ожидал получить Value from test

Используемая угловая версия: 7.2.0

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
879
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нашел проблему, недостаточно изменить value из input, после этого нужно вызвать dispatchEvent.

Итак, этот код:

  ...
  compiled.querySelector('input').value = 'Value from test';
  fixture.detectChanges();
  ...

Необходимо изменить на:

  ...
  compiled.querySelector('input').value = 'Value from test';
  compiled.querySelector('input').dispatchEvent(new Event('input'));
  fixture.detectChanges();
  ...

Примечание:

Если предыдущее решение вам не подходит, попробуйте отправить событие blur после input. Я наткнулся на один случай, когда input было недостаточно.

Другие вопросы по теме