TypeError: Невозможно прочитать свойство 'reset' из null ~ Angular Модульное тестирование formDirective: FormGroupDirective - PullRequest
0 голосов
/ 18 марта 2020

Я пытаюсь провести модульное тестирование Angular компонента контакта, который в основном является формой контакта. Это идет довольно хорошо, за исключением 3 строк внутри "registerService.registerUser ...", которые я не могу охватить. Всякий раз, когда я пытаюсь использовать resetForm для formDirective типа FormGroupDirective, тестовый случай выдает ошибку TypeError: Cannot read property 'reset' of null. Кто-нибудь понял, почему это так?

У меня есть 2 предположения:

  1. Внешняя служба registerService должна была как-то тестироваться внутри этого компонента. Его собственные юнит-тесты в порядке, хотя. Я попытался проверить это здесь, используя subscribe(), но затем я получил ошибку en TypeError: Cannot read property 'registerUser' of undefined, из-за которой я предположил, что тест не был правильно изолирован, поэтому я отказался от этого способа решения этой проблемы. registerUser - это метод в registerService.
  2. FormGroupDirective не проверен модульно, но не может понять, почему.

Ниже приведен код, HTML часть, которую я пропускаю, потому что это не является частью этой проблемы.

component.ts

import { RegisterService } from './register.service';
import Swal from 'sweetalert2';
...
constructor(
  private formBuilder: FormBuilder,
  private registerService: RegisterService
) {}

ngOnInit() {
  // Create contact form with all required validators.
  this.contactForm = this.formBuilder.group(
    {
      formControlFirstName: [
        '',
        Validators.compose([
          ...
        ])
      ],
      formControlLastName: [
        '',
        Validators.compose([
          ...
        ])
      ],
      formControlEmail: [
        '',
        Validators.compose([
          ...
        ])
      ],
      formControlPassword: [
        '',
        Validators.compose([
          ...
        ])
      ],
      formControlConfirmPassword: [
        '',
        Validators.compose([
          ...
        ])
      ]
  });
}

public contactForm: FormGroup = new FormGroup({}); // Declare variable to handle the form elements with required validators.

/**
* @access public
* @async
* @description Perform certain actions on button submit of the contact form.
* @function onSubmit
* @param {FormGroupDirective} formDirective - object used to reset validators.
* @returns {void}
*/
public onSubmit(formDirective: FormGroupDirective): void {
  const baseURL = 'https://SOME-API.com';
  const dataToBeSend = {
    firstName: this.contactForm.get('formControlFirstName').value,
    lastName: this.contactForm.get('formControlLastName').value,
    email: this.contactForm.get('formControlEmail').value
  };
  // Give a call to registerService to register user.
  this.registerService.registerUser(dataToBeSend, baseURL).subscribe(() => {
    Swal.fire('Success', 'You have successfuly registered!', 'success');
    formDirective.resetForm(); // Reset validators, i.e. to workaround #4190 (https://github.com/angular/components/issues/4190).
    this.contactForm.reset(); // Reset form once user will click "Register".
  });
}

component.spe c .ts

it('should test contactForm validity', async () => {
  const formGroupDirective: FormGroupDirective = new FormGroupDirective([], []);
  const contactForm = component.contactForm;
  expect(contactForm.valid).toBeFalsy();

  const firstNameInput: AbstractControl =
    contactForm.controls.formControlFirstName;
  firstNameInput.setValue('Daniel');

  const lastNameInput: AbstractControl =
    contactForm.controls.formControlLastName;
  lastNameInput.setValue('Danielecki');

  const emailInput: AbstractControl = contactForm.controls.formControlEmail;
  emailInput.setValue('daniel.danielecki@foo.com');

  const passwordInput: AbstractControl =
    contactForm.controls.formControlPassword;
  passwordInput.setValue('Password');

  const confirmPasswordInput: AbstractControl =
    contactForm.controls.formControlConfirmPassword;
  confirmPasswordInput.setValue('Password');

  expect(contactForm).toBeTruthy();

  component.onSubmit(formGroupDirective);

  formGroupDirective.resetForm(); // If I remove this then the test case will pass again, however the 3 lines inside "registerService.registerUser..." are still not covered.
  contactForm.reset();
});
...