angular - 如何测试 angular 2 指令提供的参数与调用目标的任何签名都不匹配

Question

我有我想要测试的指令。每次运行测试时，我都会收到一条错误消息，提示“提供的参数与调用目标的任何签名都不匹配”。如何将构造函数的参数获取到测试中？

这是我的指令:

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

@Directive({
  selector: '[fbInputlistener]'
})
export class InputlistenerDirective {

  constructor( private elRef: ElementRef, private renderer: Renderer ) { }

  @HostListener('keyup') onKeyUp() {
    if(this.elRef.nativeElement.value.length > 0) {
      this.renderer.setElementClass(this.elRef.nativeElement, 'form__input--has-value', true);
    } else {
      this.renderer.setElementClass(this.elRef.nativeElement, 'form__input--has-value', false);
     }
  }
}

这是它的测试:

import { InputlistenerDirective } from './inputlistener.directive';

describe('InputlistenerDirective', () => {
  it('should create an instance', () => {
    const directive = new InputlistenerDirective();
    expect(directive).toBeTruthy();
  });
});

Answer 1

import {TestBed, ComponentFixture} from '@angular/core/testing';
import {By} from "@angular/platform-browser";
import {Component, DebugElement} from "@angular/core";
import { InputlistenerDirective } from './inputlistener.directive';

@Component({
   template: `<input type="number" fbInputlistener value="12345">` 
})
class TestInputComponent {
}

describe('InputlistenerDirective', () => {
   let component: TestInputComponent;
   let fixture: ComponentFixture<TestInputComponent>;
   let inputEl: DebugElement;


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

   fixture = TestBed.createComponent(TestInputComponent);
   component = fixture.componentInstance;
   inputEl = fixture.debugElement.query(By.css('input'));
});

It('Directive should add class to test input', () => {
   inputEl.triggerEventHandler('keyup', null);
   fixture.detectChanges();

   expect(inputEl.nativeElement.classList.length).toBe(1);
 });
});