角度自定义验证的单元测试答案

【问题标题】：Unit test for angular custom validation角度自定义验证的单元测试
【发布时间】：2020-05-02 04:44:36
【问题描述】：

请帮助测试自定义验证器。两周试图解决这个问题没有任何反应。

在html中

<div>
<input type="text" class="value-input"  [(ngModel)]="element.value" name = "RegisterValue" #ValueReg = "ngModel"  [viewRegister] = 'viewChoiceDispleyReg' [viewType] = 'displeyView' valueName>
</div>

指令

import { AbstractControl, ValidatorFn, FormControl } from '@angular/forms';
import { Directive, ElementRef, Input } from '@angular/core';
import { NG_VALIDATORS, Validator } from '@angular/forms';

@Directive({
    selector: '[valueName]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: valueValidator, multi: true }
      ]
  })
  export class valueValidator implements Validator{

  validator: ValidatorFn;
  @Input('viewType') viewType;
  @Input('viewRegister') viewRegister;

  constructor(private elementRef: ElementRef) {
    this.validator = this.validateValueFactory();
  }

  validate(c: FormControl) {
    return this.validator(c);
  }

  // validation function
  validateValueFactory() : ValidatorFn {
    return (c: AbstractControl) => {
      console.log("validate: " + c.value + ", view type: " + this.viewType);
      let isValid = c.value === '0';

      if(isValid) {
          return null;
      } else {
          return {
              valueName: {
                  valid: false
              }
          };
        }
    }
  } 
}

我在其他网站上研究了很多关于 stackoverflow 的资料。主要问题是我不知道如何创建一个组件来测试验证器。在此测试中，该组件将为属性（@viewType、@viewRegister）添加所需的验证器。如何为这个验证器编写单元测试？

【问题讨论】：

标签： angular typescript unit-testing karma-runner

【解决方案1】：

Here 是测试指令的有用指南。

总结：

创建一个虚拟组件作为测试的一部分
为那个虚拟组件提供 HTML
确保在测试平台模块设置中声明虚拟组件和指令
写下你的断言。

类似于...的东西

import {valueValidator } from '[pathToValidator]';
@Component({
  template: `
    <div>
        <input type="text" class="value-input"  [(ngModel)]="element.value" name = "RegisterValue" #ValueReg = "ngModel"  [viewRegister] = 'viewChoiceDispleyReg' [viewType] = 'displeyView' valueName>
    </div>
    `
})
class DummyComponent {}

describe('valueValidator ', () => {

    let component: DummyComponent;
    let fixture: ComponentFixture<DummyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        DummyComponent,
        valueValidator
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(DummyComponent);
    component = fixture.componentInstance;
  });


  it('should create an instance', () => {
    expect(component).toBeTruthy();
    // insert additional assertions here.
  });
});

【讨论】：

【解决方案2】：

碰巧我花了很多时间来编写一个测试。我留下的评论是为了便于找到解决方案。让我提醒您，如果输入的数字与 0 不同，自定义验证器会出错。需要做： 1) 创建测试组件

@Component({
  template: `
    <form>
    <input type="text" class="value-input" [(ngModel)]="element" name="register" #ValueReg = "ngModel"  
    [viewRegister] = 'viewChoiceDispleyReg' [viewType] = 'displeyView' valueName>
    </form>
  `
})class TestComponent {
  public element: string = '1';
  public viewRegister: string = Constant.DISPLEY_VIEW[0];
  public viewType: string = Constant.DISPLEY_VIEW[1];
}

2) 初始化测试

describe('Custom validation valueValidator', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          TestComponent,
          valueValidator,
        ],
        imports: [
          BrowserModule,
          FormsModule
        ],
      }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });
});

3) 编写测试

it('set value 2 get error', () => {
    fixture.detectChanges();

    fixture.whenStable().then(() => {

      let comp = fixture.componentInstance;
      let debug = fixture.debugElement;
      let input = debug.query(By.css('[name=register]'));
      let inputElement = input.nativeElement;

      inputElement.value = '2';//set intresting value
      inputElement.dispatchEvent(new Event('input'));//load value to input 

      let form: NgForm = fixture.debugElement.children[0].injector.get(NgForm);
      let control = form.control.get('register');
      expect(control.valid).toBe(false);
    })
  });

【讨论】：