Модульное тестирование Angular директивы, возвращающее ошибку - PullRequest
Новая
       21

Модульное тестирование Angular директивы, возвращающее ошибку

0 голосов
/ 05 мая 2020

У меня есть директива numbersOnly, которая применяется к текстовому полю типа ввода. Вот мой Компонент HTML

 <input type="text" class="form-control" id="productIndex"
               required
               numbersOnly
               name="productId"
               placeholder="Enter Product Index"
               #postProduct
               (keyup)="onProductAdd(postProduct)"
                />

Очень простая директива, которая ограничивает ввод любого алфавита 

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this._el.nativeElement.value) {
      event.preventDefault();
    }
  }
}

Теперь при написании тестового примера Unit с использованием жасмина он всегда показывает мне ошибка. Ниже мой файл UT. (Примечание: событие Keydown запускается) 

import {ComponentFixture, TestBed} from '@angular/core/testing';
import { NumbersOnlyDirective } from './numbers-only.directive';
import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
import { By } from '@angular/platform-browser';

@Component({
  template: `<input numbersOnly type="text" name="productId"  />`
})
// tslint:disable-next-line:no-unnecessary-class
class TestAllowOnlyNumbersComponent {
 //  allowNumbers = true;
}
fdescribe('Directive: numbersOnly', () => {
  let component: TestAllowOnlyNumbersComponent;
  let fixture: ComponentFixture<TestAllowOnlyNumbersComponent>;
  let inputEl: DebugElement;


  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestAllowOnlyNumbersComponent, NumbersOnlyDirective],
      schemas:      [ NO_ERRORS_SCHEMA ],
    });
    fixture = TestBed.createComponent(TestAllowOnlyNumbersComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.css('input[name="productId"]'));
    fixture.detectChanges();   
  });

  it('keydown input', () => {
    const event = new KeyboardEvent('keydown', { key: 'F' });
    inputEl.nativeElement.dispatchEvent(event);
    expect(event.defaultPrevented).toBe(true);
  });

});
...