Тестирование ngForm формы Angular - PullRequest
Новая
       38

Тестирование ngForm формы Angular

0 голосов
/ 15 февраля 2019

У меня есть страница входа в систему, как показано ниже - 

<form class="login-form" #loginForm="ngForm">  
  <input [(ngModel)]="login.username" required="true" type="text" id="username" name="username"/>
  <button [disabled]="!loginForm.form.valid" label="Login" class="btn-login" type="submit">Login</button>
</form>

Теперь контрольный пример для проверки отключенного / включенного состояния кнопки входа в систему - 

describe('Login button status', () => {
  let loginBtn, userInputElm;
  beforeEach(() => {
    loginBtn = fixture.nativeElement.querySelector('.btn-login');
    userInputElm = fixture.nativeElement.querySelector('input#username');
    fixture.detectChanges();
  });

  it('should be enabled if "username" is provided', () => {
    userInputElm.value = 'validusername';
    // component.login.username = 'validuser'; <-- also tried this
    fixture.detectChanges();
    // loginBtn = fixture.nativeElement.querySelector('.btn-login'); <-- tried this (same result)
    // button should be enabled
    expect(loginBtn.disabled).toBe(false); <-- Button still remains disabled
  });
});

Как, угловоене получает уведомления об изменениях поля #username, это не меняет статус кнопки «Войти».Что я могу сделать, чтобы успешно проверить это?Необходимо уведомить Angular об изменениях.

Я уже импортировал FormsModule в модуле конфигурации TestBed.

Я знаю, что могу делать что-то в Angular способом, используя Angular FormGroup , но я хотел бы сохранить форму, как это возможно.

1 Ответ

0 голосов
/ 15 февраля 2019

Дайте это попробовать.Вы должны вызвать событие change программно в поле ввода. 

it('should be enabled if "username" is provided', () => {
    userInputElm.value = 'validusername';
    userInputElm.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    // button should be enabled
    expect(loginBtn.disabled).toBe(false);
});
...