自定义验证器 FormGroup 的 Angular 单元测试

Question

如何对具有FormGroup 的自定义验证器进行单元测试（此处为Jest）？我见过this question，但它是关于FormControl。

要测试的函数。

import { FormGroup } from '@angular/forms';

/**
 * @description Validate if passwords are different.
 * @function validatePasswords
 * @param {string} passwordControlName - reference to formControlPassword of the contactForm.
 * @param {string} confirmPasswordControlName - reference to formControlConfirmPassword of the contactForm.
 * @returns {(formGroup: FormGroup) => void}
 */
export function validatePasswords(
  passwordControlName: string,
  confirmPasswordControlName: string
): (formGroup: FormGroup) => void {
  return (formGroup: FormGroup) => {
    // Get values of desired controls of the form.
    const passwordControl = formGroup.controls[passwordControlName];
    const confirmPasswordControl =
      formGroup.controls[confirmPasswordControlName];

    if (
      // Don't show the error if any different error occured in password confirmation.
      confirmPasswordControl.errors &&
      !confirmPasswordControl.errors.passwordMismatch
    ) {
      return; // Different validator shown an error, therefore return.
    }

    // Check if password and password confirmation are different.
    if (passwordControl.value !== confirmPasswordControl.value) {
      confirmPasswordControl.setErrors({ passwordMismatch: true }); // Password and confirm password are different, therefore show passwordMismatch error.
    } else {
      confirmPasswordControl.setErrors(null); // Password and confirm password are the same, therefore don't display any error.
    }
  };
}

Answer 1

您可以创建一个包含 2 个密码控件的测试 FormGroup，并将 validatePasswords 验证器应用于该组：

describe('validatePasswords', () => {
  const password = 'password';
  const confirmPassword = 'confirmPassword';
  let formGroup: FormGroup;

  beforeEach(() => {
    formGroup = new FormGroup({
      [password]: new FormControl(),
      [confirmPassword]: new FormControl(),
    }, validatePasswords(password, confirmPassword));
  });

  it('should has "passwordMismatch" error if passwords do not match', () => {
    formGroup.patchValue({
      [password]: '123',
      [confirmPassword]: '321'
    });
    
    expect(formGroup.get(confirmPassword).hasError('passwordMismatch')).toBe(true);
  });
  
  it('should be valid if passwords match', () => {
    formGroup.patchValue({
      [password]: '123',
      [confirmPassword]: '123'
    });
    
    expect(formGroup.get(confirmPassword).valid).toBe(true);
  });
});