Симуляция кликов в юнит-тесте с Angular и жасмином - PullRequest
Новая
       68

Симуляция кликов в юнит-тесте с Angular и жасмином

0 голосов
/ 30 января 2020

Я хочу смоделировать щелчок в модульном тесте, который я разрабатываю с помощью Jasmine. Это мой код,

Сначала я щелкаю свой элемент ввода и что-то набираю: 

inputElement().click();
inputElement().value = typedValue;

tick();
fixture.detectChanges();

function inputElement(): HTMLInputElement {
    return debugElement.query(By.css('#id-parent input')).nativeElement;
}

Дело в том, что после «щелчка» я не вижу курсор внутри элемент ввода.

Второй: я нажимаю за пределами этого ввода. На самом деле, я щелкаю элемент метки, чтобы имитировать, что: 

andClickOutside();

function andClickOutside(): void {
    const label: HTMLLabelElement = debugElement.query(By.css('#id-label')).nativeElement;
    label.click();

    tick();
    fixture.detectChanges();
  }

Я создаю тест, который проверяет, что имеет указанное типизированное значение c, когда я щелкаю вне элемента, затем введенное значение удаляется (ввод становится пустым).

Когда я запускаю приложение angular обычным способом, компонент работает отлично, поэтому я могу воспроизвести эту ситуацию. Но почему-то в Жасмине юнит тест не работает.

Есть идеи?

1 Ответ

2 голосов
/ 30 января 2020

Звучит так, как будто вы хотите, чтобы элемент ввода «размылся», чтобы удалить введенное значение. Вместо того, чтобы пытаться щелкнуть за пределами элемента, вы можете вызвать размытие элемента, используя Angular s triggerEventHandler. 

const input = debugElement.query(By.css('#id-parent input'));
input.triggerEventHandler('blur', {});
fixture.detectChanges();

// input should be empty here
expect(input.nativeElement.value).toBe('');
...