Как создать модульный тест для директивы Hostlistener для элементов ввода в угловых? - PullRequest
Новая
       26

Как создать модульный тест для директивы Hostlistener для элементов ввода в угловых?

0 голосов
/ 28 ноября 2018

Мне нужно создать модульный тест для моей нижеприведенной директивы, которая имеет событие hostlistener в угловом 6.

Здесь нам нужно проверить ввод и обеспечить маскировку номера телефона, и мне нужно сделать тестовые примеры в жасмине, чтобыпроверьте его охват.

Я пытаюсь создать контрольные примеры для проверки логики, но из-за события отправки в директиве onModelChange метод не вызывается, и я не получаю обновленное маскированное значение из директивы. 

//Below is my directive:

import { Directive, HostListener, forwardRef, ElementRef } from '@angular/core';
import { Validator, FormControl, NG_VALIDATORS } from '@angular/forms';

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

  constructor(private elem: ElementRef) {
  }

  @HostListener('ngModelChange', ['$event'])
  public onModelChange(event: Event) {
    console.log('Function Called');
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  public keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }

  public onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '($1)');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) ($2)');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) ($2)-$3');
    }
    this.elem.nativeElement.value = newVal;
  }

  public validate(input: FormControl): { [key: string]: boolean } {

    const numberEntered: string = input.value.replace(/[^0-9]/g, '');
    let validity: { [key: string]: boolean } = null;

    if (numberEntered.length < 10) {
      validity = { telephoneFormatError: true };
    }

    return validity;
  }

}

Я пытаюсь использовать эту спецификацию, но она не использует мои методы директив: 

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { TelephoneFormatDirective } from './telephone-format.directive';
import { By } from '@angular/platform-browser';


@Component({
  template: '<input type="text appTelephoneFormat">'
})

export class TestTelephoneFormatComponent {
}

describe('Directive: Telehpone Number', () => {

  let component: TestTelephoneFormatComponent;
  let fixture: ComponentFixture<TestTelephoneFormatComponent>;
  let inputEl: DebugElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestTelephoneFormatComponent, TelephoneFormatDirective]
    });
    fixture = TestBed.createComponent(TestTelephoneFormatComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    inputEl = fixture.debugElement.query(By.css('input'));
  });

  it('test input with equal or less than 6 characters', async(() => {
    inputEl.nativeElement.value = '123456';
    fixture.detectChanges();
    inputEl.nativeElement.dispatchEvent(new Event('ngModelChange'));
    fixture.detectChanges();
    expect(inputEl.nativeElement.value).toBe('(123)(456)');
}));

});
...