角度单位测试输入值 [英] Angular unit test input value

问题描述

我一直在阅读有关单元测试的Angular2官方文档（ https：// angular .io / docs / ts / latest / guide / testing.html ），但我正在努力设置组件的输入字段值，以使其反映在组件属性中（通过ngModel绑定）。屏幕在浏览器中工作正常，但是在单元测试中，我似乎无法设置字段值。

I have been reading official Angular2 documentation for unit testing (https://angular.io/docs/ts/latest/guide/testing.html) but I am struggling with setting a component's input field value so that its reflected in the component property (bound via ngModel). The screen works fine in the browser, but in the unit test I cannot seem to be able to set the fields value.

我正在使用以下代码。随着其他测试的正常进行，夹具已正确初始化。 comp是我组件的实例，输入字段通过ngModel绑定到 user.username。

I am using below code. "fixture" is properly initialized as other tests are working fine. "comp" is instance of my component, and the input field is bound to "user.username" via ngModel.

it('should update model...', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement;
    field.value = 'someValue'
    field.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(field.textContent).toBe('someValue');
    expect(comp.user.username).toBe('someValue');
  }));

我的Angular2版本： @ angular / core： 2.0。 0

My version of Angular2: "@angular/core": "2.0.0"

推荐答案

输入没有textContent，只有一个值。因此 expect（field.textContent）.toBe（‘someValue’）; 是没有用的。这可能是失败的原因。第二个期望应该过去了。这是一个完整的测试。

Inputs don't have textContent, only a value. So expect(field.textContent).toBe('someValue'); is useless. That's probably what's failing. The second expectation should pass though. Here's a complete test.

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: 'peeskillet' };
}

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

  it('should be ok', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css('input'));
      let el = input.nativeElement;

      expect(el.value).toBe('peeskillet');

      el.value = 'someValue';
      el.dispatchEvent(new Event('input'));

      expect(fixture.componentInstance.user.username).toBe('someValue');
    });
  }));
});

重要的部分是第一个 fixture.whenStable（）。发生了一些异步的表单设置，因此我们需要等待 fixture.detectChanges（）完成。如果您使用的是 fakeAsync（）而不是 async（），那么您只需调用在 fixture.detectChanges（）之后的tick（）。

The important part is the first fixture.whenStable(). There is some asynchronous setup with the forms that occurs, so we need to wait for that to finish after we do fixture.detectChanges(). If you are using fakeAsync() instead of async(), then you would just call tick() after fixture.detectChanges().

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