Я пытаюсь провести модульное тестирование Angular компонента контакта, который в основном является формой контакта. Это идет довольно хорошо, за исключением 3 строк внутри "registerService.registerUser ...", которые я не могу охватить. Всякий раз, когда я пытаюсь использовать resetForm
для formDirective
типа FormGroupDirective
, тестовый случай выдает ошибку TypeError: Cannot read property 'reset' of null
. Кто-нибудь понял, почему это так?
У меня есть 2 предположения:
- Внешняя служба
registerService
должна была как-то тестироваться внутри этого компонента. Его собственные юнит-тесты в порядке, хотя. Я попытался проверить это здесь, используя subscribe()
, но затем я получил ошибку en TypeError: Cannot read property 'registerUser' of undefined
, из-за которой я предположил, что тест не был правильно изолирован, поэтому я отказался от этого способа решения этой проблемы. registerUser
- это метод в registerService
. 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();
});