Question

我有一个简单的Angular组件，带有ngModel绑定的文本输入。该组件可以正常工作，但不能进行单元测试。

helloworld.component.html：

<div>
  <input [(ngModel)]="name" >
  <p>{{msg}} {{name}}</p>
</div>

helloworld.component.ts：

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'hello-world',
  templateUrl: './helloworld.component.html',
  styleUrls: ['./helloworld.component.css']
})
export class HelloWorldComponent {
  @Input() name: string = "World";
  @Input() msg: string = "Hello";
}

helloworld.component.spec.ts：

import { async, ComponentFixture, TestBed, fakeAsync, tick } from 
'@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HelloWorldComponent } from './helloworld.component';

describe('HelloWorldComponent', () => {
  let component: HelloWorldComponent;
  let fixture: ComponentFixture<HelloWorldComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HelloWorldComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
  });

  it('should print the name on input', ()=>{
    component.msg = "Hi";
    fixture.detectChanges();

    var nameInput: HTMLInputElement = fixture.nativeElement.querySelector('input');
    var label: HTMLElement = fixture.nativeElement.querySelector('p');

    nameInput.value = 'John';
    nameInput.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.msg).toBe('Hi');
    expect(component.name).toBe('John');
    expect(label.textContent).toBe('Hi John');
  });
});

测试失败，因为名称未设置为“ John”，但仍具有默认值“ World”。在我看来，所提供的代码等效于Angular文档（https://angular.io/guide/testing#component-binding）中的示例

有些文章介绍了如何在async（）中执行测试并在更改输入值后使用Fixture.whenStable（）。then（）。

我还发现了在fakeAsync（）中运行测试并使用tick（）等待输入值绑定到名称的提示。两者都没有帮助。

我想念什么？

在单元测试中绑定输入值

0 个答案: