Unit testing 单元测试angular2@input'；传递数据

我已经声明了这样一个组件

export class Component {

  private selectedFieldType: string;
  private enableAddCheck: boolean = false;

  @Input('itemX') item;
}

Field : <input [(ngModel)]="item.fieldLabel" type="text" class="input-bars">

beforeEach(async(() => {


    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [Component , DND_DIRECTIVES],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true },
         DND_PROVIDERS ]
    })

    // create component and test fixture
    fixture = TestBed.createComponent(Component );

    // get test component from the fixture
    comp = fixture.componentInstance;



  }));

  it('To check fieldLabel to way binding from inputbox to data', () => {

    comp.item = {
      fieldLabel: 'text'
    };

    comp.ngOnInit();

    fixture.detectChanges();

    let fieldTypeInput: HTMLInputElement;

    const input = fixture.debugElement.query(By.css('input'));

    fieldTypeInput = input[0].nativeElement;
    fieldTypeInput.value = 'field';

    fixture.detectChanges();

    expect(comp.item.fieldLabel).toBe('field');

  });

我有一个用于两个绑定的html，如下所示

export class Component {

  private selectedFieldType: string;
  private enableAddCheck: boolean = false;

  @Input('itemX') item;
}

Field : <input [(ngModel)]="item.fieldLabel" type="text" class="input-bars">

beforeEach(async(() => {


    // refine the test module by declaring the test component
    TestBed.configureTestingModule({
      imports: [ FormsModule ],
      declarations: [Component , DND_DIRECTIVES],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
      providers: [
        { provide: ComponentFixtureAutoDetect, useValue: true },
         DND_PROVIDERS ]
    })

    // create component and test fixture
    fixture = TestBed.createComponent(Component );

    // get test component from the fixture
    comp = fixture.componentInstance;



  }));

  it('To check fieldLabel to way binding from inputbox to data', () => {

    comp.item = {
      fieldLabel: 'text'
    };

    comp.ngOnInit();

    fixture.detectChanges();

    let fieldTypeInput: HTMLInputElement;

    const input = fixture.debugElement.query(By.css('input'));

    fieldTypeInput = input[0].nativeElement;
    fieldTypeInput.value = 'field';

    fixture.detectChanges();

    expect(comp.item.fieldLabel).toBe('field');

  });

但它给了我“fieldLabel”一个未定义的错误

---

如何通过单元测试将数据传递到我的组件中的@input？？？

手动更改输入值后

fieldTypeInput.value = 'field';

您仍然需要分派输入事件。它不会仅仅因为您更改了值而发生。事件是Angular为了获得要处理的新值而侦听的事件

import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';

fieldTypeInput.value = 'field';
dispatchEvent(fieldTypeInput, 'input');

此外，由于事件处理是异步的，因此需要等待事件稳定。要做到这一点，您可以使用fixture.whenStable，但是您还需要使测试

async

import { async } from '@angular/core/testing'

it('..', async(() => {
  ...

  fieldTypeInput.value = 'field';
  dispatchEvent(fieldTypeInput, 'input');

  fixture.whenStable().then(() => {
    // do expectations here
  })
})

---

首先，您给定的组件没有实现NgOnInit接口。那么如何将数据传递给@input Item呢？我说，您提供的示例有一个错误，NgOnInit在哪里？我的组件中没有使用它。为什么要调用comp.NgOnInit（）；明确地说？我认为angular 2组件生命周期应该自动调用它（如果按照Fals指出的那样正确使用），而不是由您调用它。它不起作用。错误来了，因为我传递的数据像comp.item={fieldLabel:'text'}；没有通过它