Angular单元测试输入值

Question

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

我正在使用以下代码。 "fixture" 已正确初始化，因为其他测试工作正常。 "comp" 是我的组件的实例，输入字段通过 ngModel 绑定到 "user.username"。

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"

Answer 1

输入没有文本内容，只有一个值。所以 expect(field.textContent).toBe('someValue'); 是没有用的。这可能就是失败的原因。第二个期望应该通过。这是一个完整的测试。

@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()。

Answer 2

只需添加

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})

Answer 3

像这样在 whenStable.then 函数中使用您的 expect/assert：

component.label = 'blah';
fixture.detectChanges();

fixture.whenStable().then(() => {
    expect(component.label).toBe('blah');
}

Answer 4

如果您想使用@Input 内容实施单元测试，请执行以下代码。

testing.component.ts

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-testing',
      templateUrl: `<app-input [message]='text'></app-input>`,
      styleUrls: ['./testing.component.css']
    })
    export class TestingComponent implements OnInit {
    public text = 'input message';
      constructor() { }
    
      ngOnInit() {
      }
    
    }

input.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
      selector: 'app-input',
      templateUrl: `<div *ngIf="message">{{message}}</div>`,
      styleUrls: ['./input.component.css']
    })
    export class InputComponent implements OnInit {
    @Input() public message: string;
      constructor() { }
    
      ngOnInit() {
        console.log(this.message);
      }
    
    }

input.component.spec.ts

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    
    import { InputComponent } from './input.component';
    import { TestingComponent } from '../testing/testing.component';
    
    describe('InputComponent', () => {
      let component: InputComponent;
      let fixture: ComponentFixture<InputComponent>;
    
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ InputComponent, TestingComponent ]
        })
        .compileComponents();
      }));
    
      beforeEach(() => {
        fixture = TestBed.createComponent(InputComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create', () => {
        expect(component).toBeTruthy();
      });
    
      it('should correctly render the passed @Input value', () => {
        component.message = 'test input';
        fixture.detectChanges();
        expect(fixture.nativeElement.innerText).toBe('test input');
      });
    
    });

Angular单元测试输入值

Angular unit test input value

angular

unit-testing

angular2-testing