Угловое тестирование: значение FormControlChanges Observable
У меня есть ввод текста, и я прислушиваюсь к изменениям.
компонент
name = new FormControl('',Validators.required);
ngOnInit() {
this.data = 'oldvalue';
this.checkName();
}
checkName() {
this.name.valueChanges.subscribe(val=>{
console.info(val);
this.data= "newvalue"; // updating Value
});
}
HTML
<input name = "name" formControlName = "name">
Моя попытка до сих пор:
component.spec.ts
it('should test data field ', () => {
const fixture = TestBed.createComponent(UserComponent);
const app=fixture.debugElement.componentInstance;
const el = fixture.nativeElement.querySelector('input');
el.value ='something';
dispatchEvent(new Event(el));
fixture.detectChanges();
fixture.whenStable().then(()=>{expect(app.data).toBe('newvalue');
});
Проблема: Несмотря на то, что поле ввода заполнено, код внутри обратного вызова подписки никогда не выполняется.
Всегда показывает:
Expected 'oldvalue' to be 'newvalue'.
Я тоже попробовал метод setValue(), но он не сработал. он никогда не попадает в обратный вызов подписки
app.name.setValue('vikas');
fixture.detectChanges();
fixture.whenStable().then(()=>{expect(app.data).toBe('newvalue');
Я сослался на Обновление поля ввода html из теста Angular 2 и Компонент Angular2: изменение входного значения формы тестирования, но не повезло :(
Что мне не хватает?
Ответы 1
На первый взгляд мне кажется, вы упустили тот факт, что ваш FormControl не подключен к вводу, потому что вы используете директиву FormControlName, которая принимает имя элемента управления как @Input.
Если вы хотите протестировать FormControl, вы можете рассмотреть FormControlDirective, который принимает FormControl как @Input:
<input name = "name" [formControl] = "name">
^^^^^
`name` is FormControl instance here not string
Теперь мы можем быть уверены, что всякий раз, когда мы меняем текст во вводе, ваш FormControl запускает изменения. Но как только вы напишете такой шаблон, angular спросит у вас зависимость ReactiveFormsModule в вашем тесте:
import { ReactiveFormsModule } from '@angular/forms';
....
TestBed.configureTestingModule({
imports: [
ReactiveFormsModule <=== add this
],
declarations: [TestComponent],
});
Теперь по поводу вашего теста.
1) Вы должны указать TestBed выполнить привязку данных, вызвав fixture.detectChanges():
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges(); <== add this
2) Вы должны правильно запустить изменение при вводе:
el.dispatchEvent(new Event('input'));
Вот весь код:
it('should display original title', () => {
const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();
const app = fixture.debugElement.componentInstance;
const el = fixture.nativeElement.querySelector('input');
el.value = 'something';
el.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(app.data).toBe('newvalue');
});
});
Привет, у меня проблема с этим подходом, пожалуйста, видите ли вы этот вопрос stackoverflow.com/questions/58355726/…
Я использую последнюю версию Angular и Jest, мне пришлось дождаться fixture.whenStable (), затем выполнить assert
Большое спасибо, это действительно помогло.
Thanx Mate Работал как шарм :)