Angular 11验证器指令单元测试编写方法咨询

我来帮你拆解一下怎么写这个单元测试，其实我们需要覆盖两个核心部分：独立的验证器函数和指令本身的逻辑。下面是具体的实现步骤和测试代码：

1. 先测试独立的isValidValidator函数 #

这个验证器函数是独立的ValidatorFn，我们可以直接调用它，传入不同的FormControl值来验证逻辑是否正确。首先要在你的spec文件里导入这个函数，然后针对有效/无效输入编写测试用例：

import { IsValidDirective, isValidValidator } from './is-valid.directive';
import { FormControl } from '@angular/forms';

describe('isValidValidator', () => {
  // 根据你的isNumbersFieldValid逻辑调整测试用例
  it('should return null when input is valid', () => {
    const control = new FormControl('1-8'); // 假设这是有效输入
    const result = isValidValidator()(control);
    expect(result).toBeNull();
  });

  it('should return validation error when input is invalid', () => {
    const control = new FormControl('invalid-input'); // 无效输入
    const result = isValidValidator()(control);
    expect(result).toEqual({ isValid: { value: 'invalid-input' } });
  });
});

2. 测试IsValidDirective指令本身 #

指令的逻辑是：当appIsValid输入属性存在时，才会应用验证器；否则不执行验证。我们需要测试这两种场景，还要验证指令的验证逻辑是否正确触发：

describe('IsValidDirective', () => {
  let directive: IsValidDirective;

  beforeEach(() => {
    directive = new IsValidDirective();
  });

  it('should create an instance', () => {
    expect(directive).toBeTruthy();
  });

  it('should NOT apply validator when appIsInput is not set', () => {
    directive.isValid = ''; // 空值，代表未设置
    const control = new FormControl('invalid-input');
    const result = directive.validate(control);
    expect(result).toBeNull(); // 未设置时不验证，所以返回null
  });

  it('should apply validator when appIsInput is set', () => {
    directive.isValid = 'true'; // 只要有值就会触发验证
    const control = new FormControl('invalid-input');
    const result = directive.validate(control);
    expect(result).toEqual({ isValid: { value: 'invalid-input' } });
  });

  it('should return null for valid input when appIsInput is set', () => {
    directive.isValid = 'any-value'; // 任意非空值都可以
    const control = new FormControl('1-12'); // 有效输入
    const result = directive.validate(control);
    expect(result).toBeNull();
  });
});

完整的directive.spec.ts代码 #

把上面的部分整合起来，就是完整的测试文件：

import { IsValidDirective, isValidValidator } from './is-valid.directive';
import { FormControl } from '@angular/forms';

describe('isValidValidator', () => {
  it('should return null when input is valid', () => {
    const control = new FormControl('1-8');
    const result = isValidValidator()(control);
    expect(result).toBeNull();
  });

  it('should return validation error when input is invalid', () => {
    const control = new FormControl('abc');
    const result = isValidValidator()(control);
    expect(result).toEqual({ isValid: { value: 'abc' } });
  });
});

describe('IsValidDirective', () => {
  let directive: IsValidDirective;

  beforeEach(() => {
    directive = new IsValidDirective();
  });

  it('should create an instance', () => {
    expect(directive).toBeTruthy();
  });

  it('should skip validation when appIsValid is empty', () => {
    directive.isValid = '';
    const control = new FormControl('invalid-value');
    expect(directive.validate(control)).toBeNull();
  });

  it('should trigger validation when appIsValid is provided', () => {
    directive.isValid = 'enabled';
    const control = new FormControl('invalid-value');
    expect(directive.validate(control)).toEqual({ isValid: { value: 'invalid-value' } });
  });

  it('should pass valid input when appIsValid is enabled', () => {
    directive.isValid = 'yes';
    const control = new FormControl('0-96');
    expect(directive.validate(control)).toBeNull();
  });
});

注意事项 #

• 请根据你实际的isNumbersFieldValid函数逻辑调整测试用例中的有效/无效输入值
• 如果isNumbersFieldValid有外部依赖，可能需要在测试中mock这个函数（比如用jest的jest.mock或者Angular的TestBed提供mock）

内容的提问来源于stack exchange，提问作者Mohsen