ngModel未使用输入值angular 2 test karma更新

我在使用角度2进行单位测试时遇到问题 . 我只想测试输入以检查我的模型是否不能超过16个字符 . （我确实在我的html中使用了maxlength） . 所以我在输入中输入一个新值，并使用dispatchEvent设置模型中的输入，但模型是更新的...

这是我的测试：

/* tslint:disable:no-unused-variable */
import { EditRequestComponent } from './edit-request.component';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { By }           from '@angular/platform-browser';

import { __platform_browser_private__ as _ } from '@angular/platform-browser';

import { DebugElement } from '@angular/core';
import { MvpSelector } from './mvpSelector/mvpSelector.component';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { HttpModule, Http, BaseRequestOptions, Response } from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryWebApiService } from '../../services/in-memory.service';
import { MyDatePickerModule } from 'mydatepicker/dist/my-date-picker.module';
import { ReferentialService, RequestService, ConfigurationService } from '../../services';
import { MvpRequestClass } from '../../models';

////////  SPECS  /////////////
describe('EditRequestComponent', function () {
  let comp: EditRequestComponent;
  let fixture: ComponentFixture<EditRequestComponent>;

  beforeEach(() => {
   TestBed.configureTestingModule({
      providers: [ 
        ReferentialService, 
        ConfigurationService,
        RequestService, 
        MockBackend,
        BaseRequestOptions,
        {
          provide: Http,
          useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
              return new Http(backend, options);
          },
          deps: [ MockBackend, BaseRequestOptions ]
        },
        {
          provide: ActivatedRoute,
          useValue: {
            snapshot: {
              params: {id: 1},
              data: {request: new MvpRequestClass()}
            }
          }
        }
      ],
      declarations: [ MvpSelector, EditRequestComponent ],
      imports: [ FormsModule, FormsModule, MyDatePickerModule,
                  HttpModule ]
    }).compileComponents();
      fixture = TestBed.createComponent(EditRequestComponent);
      comp = fixture.componentInstance;
  });

  it('should create component', () => expect(comp).toBeDefined() );

  it('should have a mvpRequestComponent', () =>
  {
    fixture.detectChanges();
    expect(comp.mvpReq).toBeDefined();
  });

  it('should not have more than 16 char in moInCharge input', fakeAsync(() => {
    comp.mvpReq.moInCharge = "oldValue";
    fixture.detectChanges();

    var field = fixture.debugElement.query(By.css('.input-moInCharge')).nativeElement;
    field.value = "aaaaaaaaaaaaaaaaaaaaaa";
    _.getDOM().dispatchEvent(field, _.getDOM().createEvent("input"));

    tick();
    console.log(field.value);
    expect(comp.mvpReq.moInCharge.length).toBeLessThanOrEqual(16);
  }));

});

以下是我的控制台中的日志打印：

LOG LOG: 'oldValue'

您还可以看到我有一种奇怪的方式来使用dispatchEvent . 那是因为当我从'@ angular / platform-browser / testing / browser_util'导入并直接使用它时，我有一条错误消息：

Uncaught SyntaxError: Unexpected token import
  at webpack:///~/@angular/platform-browser/testing/browser_util.js:8:0 <- karma.entry.js:49907

似乎直接在browser_util.d.ts文件中导入我们的webpack不欣赏 . 但dispatchEvent函数以相同的方式合理使用 . 所以我不明白为什么模型不更新 .

以下是我为使其工作而进行的一些测试：

• 使用async（）函数而不是fakeAsync

• 使用MDN的dispatchEvent函数

• 使用fixture.whenStable（）和then（）

• 更改'a'的数量以检查值是否因为太多而未更新

• 所有这一点的组合

就这样 . 我必须承认，我不知道如何以不同的方式使其发挥作用 . 如果您能帮助我或想要了解更多细节，请不要犹豫 .

提前致谢 .