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

在使用angular 2进行单元测试时，我遇到了一个问题。我只想测试一个输入，检查我的模型是否不能超过16个字符。（我确实在html中使用了maxlength）。因此，我在输入中输入一个新值，并使用dispatchEvent在模型中设置输入，但该模型为nether update

这是我的测试：

/* 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);
  }));

});

您还可以看到我使用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

未捕获的语法错误：意外的令牌导入
在webpack:///~/@angular/platform browser/testing/browser_util.js:8:0中，您是否尝试在第一个beforeach（）中添加一个async（）？您不需要在it（）块中打钩，只需将expect（）放在fixture.whenStable（）中即可。。这至少对我有用——希望有帮助：）
 Uncaught SyntaxError: Unexpected token import
  at webpack:///~/@angular/platform-browser/testing/browser_util.js:8:0 <- karma.entry.js:49907