Angular 用于角度自定义验证的单元测试

请帮助测试自定义验证器。 两周来试图解决这个问题，但什么都没有发生

在html中

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

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

是测试指令的有用指南

总之：

创建一个虚拟组件作为测试的一部分

提供该虚拟组件的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.
  });
});

从“[pathToValidator]”导入{valueValidator}；
@组成部分({
模板：`
`
})
类DummyComponent{}
描述（'valueValidator'，（）=>{
let组件：DummyComponent；
let夹具：组件夹具；
在每个之前（（）=>{
TestBed.configureTestingModule({
声明：[
DummyComponent，
值验证器
]
}).compileComponents（）；
fixture=TestBed.createComponent（DummyComponent）；
组件=fixture.componentInstance；
});
它（'应该创建一个实例'，（）=>{
expect（component.toBeTruthy（）；
//在此处插入其他断言。
});
});

碰巧我花了很多时间在编写一个测试上。我留下的评论是为了便于找到解决办法。让我提醒您，如果输入的数字与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];
}

@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];
}

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;
  });
});

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);
    })
  });