Angular - отправить асинхронную форму - PullRequest
Новая
       15

Angular - отправить асинхронную форму

0 голосов
/ 09 октября 2018

У меня есть метод submit, который вызывает метод, а затем обновляет состояние в строковом сообщении с именем errorMessage .Метод отправки выглядит так: 

onSubmit() {

this.userProfileForm = new UserForm(this.firstName.value, this.lastName.value, this.email.value, null, this.phone.value,
  this.description.value, this.profileImage.value);

this.updateUserAttributes().then(() => {
    this.userService.updateUser(this.id, new UserModel(this.firstName.value,
      this.lastName.value, this.email.value, this.phone.value, this.description.value, null)).subscribe(
        () => this.errorMessage = 'Success');
    console.log(this.errorMessage);
  },
  () => {
    console.log('Error');
    this.errorMessage = 'Error';
  }
);

}

Как видите, в методе есть журналы.Я пишу тест для проверки метода отправки, но он не работает.

Тест выглядит следующим образом: 

spyOn(cognitoService, 'updateUserAttributes').and.returnValue(Promise.resolve(true));

spyOn(userService, 'updateUser').and.returnValue(Observable.of(new UserModel(component.firstName.value,
  component.lastName.value, component.email.value, component.phone.value, component.description.value, null)));

const firstNameControl = component.profileForm.controls['firstName'];
firstNameControl.setValue('newFirstName');
firstNameControl.markAsTouched();
fixture.detectChanges();

component.onSubmit();
fixture.detectChanges();

console.log('component.errorMessage: ' + component.errorMessage);


   expect(firstNameControl.valid).toBeTruthy();
   expect(component.errorMessage).toBe('Success');

В тесте я печатаю также свойство errorMessage .В консоли журналы отображаются следующим образом: 

'component.errorMessage: undefined'
'Success'

Expected undefined to be 'Success'.

Первый журнал - это журнал теста, а затем журнал метода.Это должно быть наоборот.Метод updateUserAttributes () возвращает Promise, который обрабатывается в методе submit, но кажется, что он не работает в тесте.

Знаете ли вы, как сделать тест, чтобы дождаться конца?события submit для проверки свойства errorMessage?

Спасибо!

1 Ответ

0 голосов
/ 10 октября 2018

Я решил проблему с помощью метода whenStable в тесте.

Теперь тест выглядит так: 

  it('when submit with correct result, it should ok and show an ok  message', () => {

    spyOn(cognitoService, 'updateUserAttributes').and.returnValue(Promise.resolve(true));

    spyOn(userService, 'updateUser').and.returnValue(Observable.of(new UserModel(component.firstName.value,
      component.lastName.value, component.email.value, component.phone.value, component.description.value, null)));

    const firstNameControl = component.profileForm.controls['firstName'];
    firstNameControl.setValue('newFirstName');
    firstNameControl.markAsTouched();
    fixture.detectChanges();
    component.onSubmit();
    fixture.detectChanges();
    console.log('component.errorMessage: ' + component.errorMessage);
    fixture.whenStable().then(() => {
      expect(firstNameControl.valid).toBeTruthy();
      expect(component.errorMessage).toBe('Success');
    });
  });
...