角度测试:FormControl valueChanges Observable [英] 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');
});

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

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

我提到了 从内部更新输入 html 字段角度 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 指令控件名称为 @Input.

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 示例

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