如何在 angular 的指令中对 Hostlistener onChange 事件进行单元测试？

Question

我创建了一个指令，只允许输入字段使用数字，我想用单元测试覆盖这个指令。 但我不知道如何覆盖我的代码的@HostListener('input') onChange()部分。

指令：

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

@Directive({
  selector: '[onlyNumbers]'
})

export class OnlyNumbersDirective {
  @Input() onlyNumbers: boolean | undefined;
  
  constructor(private el: ElementRef, private renderer2: Renderer2) {
  }
  
  @HostListener('input') onChange() {
    if(this.onlyNumbers) {
      const { value } = this.el.nativeElement;
      this.renderer2.setProperty(this.el.nativeElement, 'value', value.replace(/[^0-9]/g, ''));
    }
  }
}

我尝试过的单元测试：

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { OnlyNumbersDirective } from './onlyNumbers.directive';
import { Component, Input, OnInit} from '@angular/core';

// Create component to test
@Component({
  template: `<input type="text" [ngModel]="value" [onlyNumbers]="enableNumbers"/>`
})
class TestComponent implements OnInit {
    @Input() enableNumbers = true;
    @Input() value : any;

    ngOnInit() {
        this.enableNumbers = true;
        this.value = '123a'
    }
}

describe('OnlyNumbersDirective', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent,
        OnlyNumbersDirective
      ]
    });

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });

  it('should create component', () => {
    expect(component).toBeDefined();
  });

  it('should allow numbers only', () => {
    const debugEl: HTMLElement = fixture.debugElement.nativeElement;
    const input: HTMLElement = debugEl.querySelector('input');

    fixture.detectChanges();

    expect(input.value).toBe('123');
  });
});

如何在 Angular 中使用 Jasmine/Karma 覆盖@HostListener('input') onChange()部分？

Answer 1

尝试这样的事情：

it('should do xyz', () => {
  const input = fixture.debugElement.nativeElement.querySelector('input');
  input.dispatchEvent(new Event('change', {target: {value: 'value of input goes here'}} as any)); // try adding as any here
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(1).toBe(1); // dummy assertion here but you can put your assertions here.
  });
});

Answer 2

通过在单元测试中创建一个组件并直接将此指令与此创建的组件一起使用来修复。

it('should allow numbers only', () => {
    const event = new Event('input', {} as any);

    const component = TestBed.createComponent(NameComponent);
    input = component.debugElement.query(By.directive(NameDirective));
    component.detectChanges();
    input.nativeElement.value = '1a';

    input.nativeElement.dispatchEvent(event);

    expect(input.nativeElement.value).toBe('1');
});