Angular 11 中验证器指令的单元测试答案

【问题标题】：Unit Test for Validator Directive in Angular 11Angular 11 中验证器指令的单元测试
【发布时间】：2021-01-09 12:24:01
【问题描述】：

我将为我的验证器指令编写一些单元测试，但不知道如何，即使在谷歌搜索和阅读 Angular 网站之后也是如此。我将在这里解释代码（只是需要的部分）。

这是我的 component.ts 代码：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { isValidValidator } from '../../directives/is-valid.directive';

@Component({
  selector: 'app-microplate',
  templateUrl: './microplate.component.html',
  styleUrls: ['./microplate.component.css']
})
export class MicroplateComponent implements OnInit {
  form: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      columns: new FormControl('', [
        isValidValidator()
      ])
    });
  }
}

这是我的directive.ts 代码：

import { Directive, Input } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
const { isNumbersFieldValid } = require('../utils/utils.js');

export function isValidValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    return isNumbersFieldValid(control.value) ? {isValid: {value: control.value}} : null;
  };
}

@Directive({
  selector: '[appIsValid]',
  providers: [{provide: NG_VALIDATORS, useExisting: IsValidDirective, multi: true}]
})
export class IsValidDirective implements Validator {
  @Input('appIsValid') isValid: string;

  validate(control: AbstractControl): {[key: string]: any} | null {
    return this.isValid ? isValidValidator()(control) : null;
  }
}

这是我的directive.spec.ts 代码：

import { IsValidDirective } from './is-valid.directive';

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

  // How can I write some unit tests here to check if my directive works well for different input strings?
});

【问题讨论】：

标签： javascript angular unit-testing karma-jasmine karma-runner

【解决方案1】：

在这里你可以找到如何测试属性指令

https://angular.io/guide/testing-attribute-directives

基本上你需要在你的规范文件中创建一个 testComponent 并在那个 testComponent 中应用你的指令，你的测试期望可以直接在 testComponent 上完成

【讨论】：