Winkel-2 Custom validation unit-Tests

ich Schreibe custom angular(Eckig 2.0.0) Validierung nach dieser Anleitung https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-Validierung .

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

Nun bin ich versucht, hinzufügen von unit-test zu meiner benutzerdefinierten überprüfung der Richtlinie.

beforeEach(() => {
      fixture = TestBed.createComponent(EmailComponent);
      component = fixture.componentInstance;
      de = fixture.debugElement;
      el = de.nativeElement;
      component = de.componentInstance;
      emailField = de.query(By.css('input')).nativeElement;
    });

Ich bin mir der Zugriff auf all diese Objekt, aber man hat keine Informationen über die Korrektheit der Eingabe. Wer hat eine Idee, wie man den Zugriff auf die NgControl meiner Eingaben innerhalb der Unit-Tests, oder wie kann ich überprüfen, für gültig/ungültig(benutzerdefinierte Gültigkeitsprüfung) Eingabefeld.

InformationsquelleAutor Krasimir Kirilov | 2016-10-07
  1. 10

    Was Sie tun müssen ist, den Injektor, der die NgForm. Es dauerte eine Weile, um es herauszufinden. Ich dachte, Sie könnte es von der debugElement, aber es sieht aus wie Sie benötigen, um es von Kind1.

    let form: NgForm = fixture.debugElement.children[0].injector.get(NgForm);

    Den Sie nur können einzelne Steuerelemente aus der Formular-Gruppe mit

    let emailControl = form.control.get('email');
expect(emailControl.valid).toBe(true);

    Oder Sie können einfach überprüfen Sie die form für einen bestimmten Fehler

    expect(form.control.hasError('emailInvalid', ['email'])).toBe(true);

    Unten ist eine komplette test

    import { Component, forwardRef, Directive } from '@angular/core';
import { TestBed, getTestBed, async } from '@angular/core/testing';
import { FormsModule, NG_VALIDATORS, Validator, AbstractControl, NgForm } from '@angular/forms';
import { dispatchEvent } from '@angular/platform-browser/testing/browser_util';
import { By } from '@angular/platform-browser';

@Directive({
  selector: '[ngModel][validEmail]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => EmailValidatorDirective),
      multi: true
    }
  ]
})
class EmailValidatorDirective implements Validator {

  validate(c: AbstractControl): { [key: string]: any } {
    if (c.value !== '[email protected]') {
      return { notPeeskillet: true };
    }
    return null;
  }
}

@Component({
  template: `
    <form>
      <input name="email" [ngModel]="email" validEmail />
    </form>
  `
})
class TestComponent {
  email;
}

describe('component: TestComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TestComponent, EmailValidatorDirective]
    });
  });

  it('should validate', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    let comp = fixture.componentInstance;
    let debug = fixture.debugElement;
    let input = debug.query(By.css('[name=email]'));

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      input.nativeElement.value = '[email protected]';
      dispatchEvent(input.nativeElement, 'input');
      fixture.detectChanges();

      let form: NgForm = debug.children[0].injector.get(NgForm);
      let control = form.control.get('email');
      expect(control.hasError('notPeeskillet')).toBe(true);
      expect(form.control.valid).toEqual(false);
      expect(form.control.hasError('notPeeskillet', ['email'])).toEqual(true);

      input.nativeElement.value = '[email protected]';
      dispatchEvent(input.nativeElement, 'input');
      fixture.detectChanges();

      expect(control.hasError('notPeeskillet')).toBe(false);
      expect(form.control.valid).toEqual(true);
      expect(form.control.hasError('notPeeskillet', ['email'])).toEqual(false);
    });
  }));
});

    1 - Fand es in der Quellcode-tests

    • browser_util bewegt hat, zu import { dispatchEvent } from '@angular/platform-browser/testing/src/browser_util';
    • Verwenden Sie die integrierte Versand-event statt
    InformationsquelleAutor Paul Samsotha
  2. 0

    Den oben beste Antwort hat nicht funktioniert für mich, aber ich war in der Lage zu testen, meine benutzerdefinierte Prüfung in der folgenden Weise:

    const associateRateControl = component.distributionSettingsForm.controls['associateRate'];
associateRateControl.setValue('plus ultra');
fixture.detectChanges();
expect(component.distributionSettingsForm.hasError('noCatalog')).toEqual(true);
    InformationsquelleAutor Cameron Vogler
Schreibe einen Kommentar