Модульный тест для angular пользовательской проверки - PullRequest
Новая
       4

Модульный тест для angular пользовательской проверки

0 голосов
/ 15 января 2020

Пожалуйста, помогите с тестированием пользовательского валидатора. Две недели, пытаясь решить эту проблему, ничего не происходит.

в директиве 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
              }
          };
        }
    }
  } 
}

Я изучил много материала о стекопотоке на другие сайты. Основная проблема в том, что я не знаю, как создать компонент для тестирования валидатора. В этом тесте компонент должен добавить требуемый валидатор для свойств (@viewType, @viewRegister). Как написать модульные тесты для этого валидатора?

Ответы [ 2 ]

1 голос
/ 15 января 2020

Здесь - полезное руководство по тестированию директив.

в итоге:

  1. создайте фиктивный компонент как часть вашего теста
  2. предоставьте HTML для этого фиктивного компонента
  3. Убедитесь, что чтобы объявить фиктивный компонент и директиву в настройках модуля испытательного стенда
  4. , напишите свои сборки.

Нечто подобное ... 

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.
  });
});
0 голосов
/ 18 января 2020

Так получилось, что много времени я потратил на то, чтобы написать один тест. Комментарий оставляю для того, чтобы облегчить поиск решений. Напомню, что пользовательский валидатор выдает ошибку, если введенный номер отличается от 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);
    })
  });
...