Событие отправки клавиатуры для ввода HTML не обновляет значение

Я пытаюсь выполнить модульное тестирование положения курсора в компоненте Angular, который автоматически форматирует пользовательский ввод. Сам компонент использует обычное поле ввода HTML, а затем необходимо вставить пробелы для форматирования текста для лучшей читабельности.

Событие регистрируется, когда я прикрепляю EventHandler к элементу HTML и что-то вывожу из журнала. Но значение в поле ввода не регистрируется, а также атрибуты SelectionStart/SelectionEnd не обновляются.

Вот мой модульный тест:

const inputElement = fixture.debugElement.query(By.css('input'));
const event = new KeyboardEvent('keydown', {
  key: 'e',
  code: 'KeyE',
  bubbles: true
});
inputElement.nativeElement.dispatchEvent(event);
fixture.detectChanges();
expect(inputElement.nativeElement.value).toEqual('e');

Мой компонент:

@Component({
    template: `
        <input [formControl]="formControl" />
    `
})
class InputComponent {
    formControl = new FormControl();
}

Мой тестовый стенд:

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

beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [InputComponent],
    imports: [ReactiveFormsModule]
  }).compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(InputComponent);
  fixture.detectChanges();

  component = fixture.componentInstance;
});


unit-testing angular html jasmine
person Florian Leitgeb    schedule 18.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что есть некоторые асинхронные аспекты формы, которые необходимо завершить, прежде чем утверждать значение. Проверьте это.

Попробуй это:

it('should do xyz', async () => { // add async to get await
  const inputElement = fixture.debugElement.query(By.css('input'));
  const event = new KeyboardEvent('keydown', {
    key: 'e',
    code: 'KeyE',
    bubbles: true
  });
  inputElement.nativeElement.dispatchEvent(event);
  fixture.detectChanges();
  await fixture.whenStable(); // await for the promises to finish before asserting
  fixture.detectChange();
  expect(inputElement.nativeElement.value).toEqual('e');
});
person AliF50    schedule 18.01.2021
comment
К сожалению, речь идет не об асинхронном поведении. fixture.detectChanges() должно быть достаточно, но я также проверил это с fixture.whenStable(). Я думаю, что речь идет о доверенных событиях :/ - person Florian Leitgeb; 19.01.2021