角茉莉花形式控制单元测试值更改 [英] Angular Jasmine FormControl Unit Test valueChanges

问题描述

我想对以下方法进行单元测试:

  this.boxValue = '';

  subscribeToFilterChanges(): void {
    this.filterBox.valueChanges
      .subscribe(
        data => {
          if (data) {
            this.boxValue = data.trim().toLowerCase();
          }
        }
      );
   }

filterBox是一个FormControl:

filterBox = new FormControl('');

HTML是:

    <mat-form-field appearance="standard">
      <input matInput [formControl]="filterBox"
            id="filterBox-input">
    </mat-form-field>

我将单元测试写为:

it('verify filter changes', () => {

    let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
    filterBoxInput.nativeElement.value = 'dummy';
    filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component.boxValue).toBe('dummy1');
    });
  });

该测试应该会失败，但是即使.toBe()中指定了错误的值，该测试仍会显示为通过状态

可能是什么问题?

我提到了 Angular Testing:FormControl valueChanges Observable ，并在我的产品中使用了它上面显示的代码，但是并不能解决问题.

解决方案

我认为这里的问题是，在操作input时，您的组件未正确初始化.

您必须在创建组件之后立即通过调用fixture.detectChanges();来告诉Angular执行数据连接:

const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();

此外，如评论中所述，此处不需要whenStable.

完成的测试如下:

it('verify filter changes', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const component = fixture.debugElement.componentInstance;
  let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
  filterBoxInput.nativeElement.value = 'dummy';
  filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
  fixture.detectChanges();
  expect(component.boxValue).toBe('dummy'); // should pass
});

NG运行示例

I want to unit test my following method:

  this.boxValue = '';

  subscribeToFilterChanges(): void {
    this.filterBox.valueChanges
      .subscribe(
        data => {
          if (data) {
            this.boxValue = data.trim().toLowerCase();
          }
        }
      );
   }

filterBox is a FormControl:

filterBox = new FormControl('');

HTML is:

    <mat-form-field appearance="standard">
      <input matInput [formControl]="filterBox"
            id="filterBox-input">
    </mat-form-field>

I've written the unit test as:

it('verify filter changes', () => {

    let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
    filterBoxInput.nativeElement.value = 'dummy';
    filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component.boxValue).toBe('dummy1');
    });
  });

This test should fail, but still it is showing as passed, even though incorrect value is specified in .toBe()

What could be the issue?

I referred to Angular Testing: FormControl valueChanges Observable, and used it in my code as shown above, but that has not solved the problem.

解决方案

I think that the issue here is that your component is not initialized properly at the time you're manipulating your input.

You must tell Angular to perform databing by calling fixture.detectChanges(); right after creating component:

const fixture = TestBed.createComponent(TestComponent);
fixture.detectChanges();

Also, as was mentioned in comments, whenStable is not needed here.

The completed test could look like:

it('verify filter changes', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const component = fixture.debugElement.componentInstance;
  let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
  filterBoxInput.nativeElement.value = 'dummy';
  filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
  fixture.detectChanges();
  expect(component.boxValue).toBe('dummy'); // should pass
});

Ng-run Example

这篇关于角茉莉花形式控制单元测试值更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！