Тестирование входного значения угловой реактивной формы без настройки formcontrol

У меня такая форма:

<form id="save_form" (ngSubmit)="save()">
    <input id="input_user" type="text" [formControl]="myForm" />
    <button type="submit">save</button>
</form>

У меня есть такой тест:

const inputUser: HTMLInputElement = fixture.nativeElement.querySelector("#input_user");
const saveForm: DebugElement = fixture.debugElement.query(By.css("#save_form"));

inputUser.value = "Bob";
//component.myForm.setValue("Bob");

saveForm.triggerEventHandler("ngSubmit", null);

fixture.detectChanges();

В моем компоненте входное значение не обновляет myForm. Если я использую закомментированный синтаксис, форма обновляется, но тег ввода не заполняется.

Я пытаюсь смоделировать входное значение от пользователя, должен ли formcontrol обновляться с помощью входного значения в тесте? Мне кажется, что если я просто обновил formcontrol вручную, я не имитирую пользователя.

ОБНОВИТЬ:

    //component.searchUsers.setValue("Bob");
    const e: Event = document.createEvent("Event");
    e.initEvent("input", false, false);
    inputUser.value = "Bob";
    inputUser.dispatchEvent(e);
    fixture.detectChanges();

    myForm.triggerEventHandler("ngSubmit", null);
    fixture.detectChanges();
    fixture.whenStable().then(() => 
    expect(condition).toBe(true));

person Daniel Plainview    schedule 08.05.2018    source источник


Ответы (1)


Вам необходимо инициировать обнаружение изменений, отправив событие изменения со входа, а затем обнаруживать изменения. Я делаю это следующим образом.

const e:Event = document.createEvent('Event');
e.initEvent('input', false, false);
inputUser.value = 'Bob';
inputUser.dispatchEvent(e);
fixture.detectChanges();
fixture.whenStable().then(() => expect(something).toEqual('something'));
person The Head Rush    schedule 08.05.2018
comment
поэтому после того, как я установил input.value на Bob, и до того, как я вызвал ngSubmit, я добавил эти строки, но безуспешно. В этом есть смысл, но, похоже, это не сработало. Вы это имели в виду? - person Daniel Plainview; 08.05.2018
comment
Извините за непонятность. Установите значение в <input>, а не в FormControl. См. Обновленный ответ. - person The Head Rush; 08.05.2018
comment
Обновлено из теста, который прошел для меня с использованием @angular 5.0.2, karma ^1.7.1, & jasmine ~2.5.2. - person The Head Rush; 08.05.2018
comment
Извините, это выглядит грубо, тогда в моем компоненте после отправки: this.myForm.value сразу отображается как null и нетронутый - person Daniel Plainview; 08.05.2018
comment
Поместите ожидание в блок whenStable. Должно произойти несколько раундов обнаружения изменений. - person The Head Rush; 08.05.2018
comment
Я обновил свой код выше, проблема все та же. Ваш ответ кажется, что он должен работать :( - person Daniel Plainview; 08.05.2018
comment
Мне интересно, может быть проблема в звонке на triggerEventHandler. Я вызываю метод submit прямо в своих функциональных тестах. См. Принятый ответ: stackoverflow.com/questions / 47753863 / - person The Head Rush; 08.05.2018
comment
Я еще немного возился и не смог заставить его работать. Я ценю ваше время, я вернусь к этой теме позже, но пока я собираюсь придерживаться настройки поля ввода из уровня управления формой (inputUser.setValue ()). Кажется, он работает безупречно вне, не на 100% имитируя пользователя. Спасибо agian - person Daniel Plainview; 08.05.2018