Question

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

这是我的测试：

.slick-test

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

.slick-test div {
    background: none !important;
  }

您还可以看到我有一种奇怪的方式来使用dispatchEvent。这是因为我直接从＆＃39; @ angular / platform-browser / testing / browser_util＆＃39;导入并使用它。我有一条错误消息：

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

});

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

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

使用async（）函数而不是fakeAsync
使用MDN的dispatchEvent函数
使用fixture.whenStable（）和then（）
更改＆＃39; a＆＃39;检查值是否因为更新而无法更新
所有这些要点的组合

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

提前致谢。

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

0 个答案: