无法使用调度事件测试离子输入

Question

我有一个带有输入字段的简单反应式表单。

HTML如下

<ion-input type="string" formControlName="email" name="email" id="email"></ion-input>

我正在尝试与我的组件一起测试上述内容。

ngOnInit() {
  this.registrationForm = this.formBuilder.group({
    email: [undefined, Validators.required],
    password: ['', Validators.required],
    confirmPassword: ['', Validators.required],
    countryCode: ['', Validators.required],
    mobileNumber: [null, Validators.required, Validators.pattern('[0-9]+'), Validators.minLength(10), Validators.maxLength(10)]
  });
}

下面的规格测试

describe('SignupPage', () => {
  let component: SignupPage;
  let fixture: ComponentFixture<SignupPage>;
  let countryCodes: Countrycode[];
  let countryCodeService: CountrycodeService;
  let userService: UserService;
  let toastController: MockToastController;
  let debugElement: DebugElement;
  let emailElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SignupPage],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [TranslateModule.forRoot(), RouterTestingModule, IonicModule,
      NgxWebstorageModule.forRoot(), HttpClientTestingModule, ReactiveFormsModule],
      providers: [
        { provide: ToastController, useClass: MockToastController }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SignupPage);
    component = fixture.componentInstance;
    countryCodeService = fixture.debugElement.injector.get(CountrycodeService);
    toastController = TestBed.get(ToastController);
    userService = fixture.debugElement.injector.get(UserService);
    debugElement = fixture.debugElement;
    emailElement = fixture.debugElement.query(By.css('#email'));
    // set country codes data
    this.countryCodes = [{ id: 0, name: 'India', code: '+91' }, { id: 1, name: 'Indonesia', code: '+92' }];
  });

  it('should not unblur the register text on button if only email is filled rest all empty ', fakeAsync(() => {
    // Given
    const headers = new HttpHeaders().append('link', 'link;link');
    spyOn(countryCodeService, 'query').and.returnValue(of(
      new HttpResponse({
        body: this.countryCodes,
        headers
      })
    ))
    // When
    component.ngOnInit();
    tick();
    fixture.detectChanges();
    //Given
    const emailNativeElement = emailElement.nativeElement;
    emailNativeElement.value = 'abhinav@abhinav.com';
    console.log('EMAIL ELEMENT IS ------------ ' + emailElement.nativeElement.value);
    const inputEvent = new Event('input');
    emailNativeElement.dispatchEvent(inputEvent);
    fixture.detectChanges();
    console.log('----contrlls are ----'+ JSON.stringify(component.registrationForm.touched));
    console.log(' - the control value is ' + component.registrationForm.controls['email'].value);
    // then
    expect(component.registrationForm.controls['email'].hasError('required')).toBe(false);
  }));

dispatchEvent 不会更新组件。但是，当我使用 html 输入而不是 ion-input 时，测试有效。

<input type="string" formControlName="email" name="email" id="email"/>

以上 HTML 的测试通过，但在我使用 ion-input 时没有通过

任何人都知道如何为基于离子的标签发送调度事件

Answer 1

终于搞定了。事件类型应该是ionChange not input。

const inputEvent = new Event('input');

应该是

const inputEvent = new Event('ionChange');