Angular 11 中驗證器指令的單元測試

Question

我將為我的驗證器指令編寫一些單元測試，但不知道如何，即使在谷歌搜索和閱讀 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?
});

Answer 1

在這里你可以找到如何測試屬性指令

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

基本上你需要在你的規范文件中創建一個 testComponent 並在那個 testComponent 中應用你的指令，你的測試期望可以直接在 testComponent 上完成