角度测试:FormControl的值可观察到的变化 [英] Angular Testing: FormControl valueChanges Observable

问题描述

我有文本输入，我正在听更改.

I have a text input and I'm listening for the changes.

组件

name = new FormControl('',Validators.required);

ngOnInit() {
  this.data = 'oldvalue';
  this.checkName();
}

checkName() {
  this.name.valueChanges.subscribe(val=>{
     console.log(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');
});

问题: 即使填充了输入字段，也不会执行subscribe回调中的代码.

Problem: Even though input field is populated the code inside subscribe callback is never executed.

它始终显示:

预计旧值"为新值".

Expected 'oldvalue' to be 'newvalue'.

我也尝试了setValue()方法，但是没有用.它永远不会进入订阅回调

I tried setValue() method too but it did not work. it never goes inside subscribe callback

app.name.setValue('vikas');
fixture.detectChanges();
fixture.whenStable().then(()=>{expect(app.data).toBe('newvalue');

我引用了从Angular 2测试 和 Angular2组件:测试表单输入值的更改，没有运气:(

I referred Updating input html field from within an Angular 2 test and Angular2 Component: Testing form input value change but no luck :(

我想念什么?

推荐答案

乍一看，我认为您错过了FormControl未连接到输入的事实，因为您正在使用将控件名称作为FormControlName指令>.

At first glance I think you missed the fact that your FormControl is not connected to input because you're using FormControlName directive that takes control name as @Input.

如果要测试FormControl，则可以考虑将FormControl用作@Input的FormControlDirective:

If you want to test FormControl then you can consider FormControlDirective that takes FormControl as @Input:

<input name="name" [formControl]="name">
                                  ^^^^^
                      `name` is FormControl instance here not string

现在，我们可以确定，每当我们更改输入中的文本时，您的FormControl都会触发更改.但是，一旦编写了这样的模板angular，就会在测试中要求您提供ReactiveFormsModule依赖项:

Now we can be sure that whenever we change text in input your FormControl will fire changes. But as soon as you write such template angular will ask you for ReactiveFormsModule dependency in your test:

import { ReactiveFormsModule } from '@angular/forms';
....

TestBed.configureTestingModule({
   imports: [
     ReactiveFormsModule  <=== add this
   ],
   declarations: [TestComponent],
});

现在关于您的考试.

1)您必须通过调用fixture.detectChanges()告诉TestBed进行数据绑定:

1) You must tell the TestBed to perform data binding by calling fixture.detectChanges():

const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges(); <== add this

2)您应该正确触发输入的更改:

2) You should fire change on input correctly:

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');
  });
});

柱塞示例

Plunker Example

这篇关于角度测试:FormControl的值可观察到的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！