Как удалить символ из поля ввода в модульном тесте - PullRequest
Новая
       15

Как удалить символ из поля ввода в модульном тесте

0 голосов
/ 11 октября 2019

Я пытаюсь сделать очень простой модульный тест, чтобы проверить, что нажатие на клавишу backspace в текстовом поле удалит символ. Тем не менее, я пробовал всевозможные способы запуска событий, но это, похоже, на самом деле ничего не удаляет. То, что я пока имею, это ниже, оно основано на спецификациях из этой библиотеки https://github.com/JsDaddy/ngx-mask/blob/develop/src/app/ngx-mask/test/delete.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { DebugElement, Component } from '@angular/core';

@Component({
  template: `
  <input type="text" (keydown)="keydown()"
    (focus)="focus()"
    (blur)="blur()"
    (input)="input()" id="testField" [formControl]="formField" />`,
})
class TestInputComponent {

  public formField: FormControl;

  constructor() {
    this.formField = new FormControl('ABCDE');
  }

  keydown() { console.error('keydown called'); }
  input() { console.error('input called'); }
  focus() { console.error('focus called'); }
  blur() { console.error('blur called'); }
}

describe('Delete Characters', () => {

  let fixture: ComponentFixture<TestInputComponent>;
  let component: TestInputComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestInputComponent],
      imports: [
        ReactiveFormsModule,
      ],
    });
    fixture = TestBed.createComponent(TestInputComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should delete a character and move cursor back', () => {
    const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
    const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
    spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
    fixture.detectChanges();

    inputTarget.value = 'ABCDE';
    inputTarget.selectionStart = 3;
    inputTarget.selectionEnd = 3;
    debugElement.triggerEventHandler('keydown', { code: 'Backspace', keyCode: 8, target: inputTarget });
    debugElement.triggerEventHandler('input', { target: inputTarget });

    expect(inputTarget.selectionStart).toEqual(2); // Fails, is still 3
    expect(inputTarget.value).toEqual('ABDE'); // Fails, is still ABCDE
  });

});

1 Ответ

1 голос
/ 11 октября 2019

Ваш triggerEventHandler не вызывает событие. Пожалуйста, замените triggerEventHandler на dispatchEvent и попробуйте. 

   debugElement.nativeElement.dispatchEvent(new Event('keydown'), { code: 'Backspace', keyCode: 8, target: inputTarget });
    debugElement.nativeElement.dispatchEvent(new Event('input'), { target: inputTarget });

Пожалуйста, обратитесь к этому комментарию .

...