單元測試Angular 2中的屬性指令

Question

我想單元測試一個具有Input參數的自定義maxlength指令。該指令的樣子：

import { Directive, Input, HostListener } from '@angular/core'; 
@Directive({ 
    selector: '[limitTo]' 
}) 
export class LimitToDirective { 
    @Input() limit: number; 

    constructor() { 

    } 

    @HostListener("keypress", ["$event"]) 
    onkeypress(event) { 
    if (event.target.value.length === this.limit) { 
     event.preventDefault(); 
    } 
    } 
} 

單元測試看起來像：

@Component({ 
     template: `<input type="text" limit="8" 
         limitTo>` 
    }) 
    class TestMaxLengthComponent { 
    } 

    describe('Directive: LimitToDirective',() => { 

     let component: TestMaxLengthComponent; 
     let fixture: ComponentFixture<TestMaxLengthComponent>; 
     let inputEl: DebugElement; 

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

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

     it('should do something',() => { 
     const event = { 
      target: { 
      value: '12341111' 
      }, 
      preventDefault: function() { 

      } 
     }; 

     spyOn(event, 'preventDefault'); 
     inputEl.triggerEventHandler('keypress', event); 
     fixture.detectChanges(); 
     expect(event.preventDefault).toHaveBeenCalled(); 
     }); 
    }); 

當我運行單元測試，我得到一個未定義的值limit。爲什麼這個值是不確定的？

Answer 1

將fixture.detectChanges（）移動到頂部。

it('should do something',() => { 
    fixture.detectChanges(); 

    const event = { 
     target: { 
     value: '12341111' 
     }, 
     preventDefault: function() { 
     } 
    }; 

    spyOn(event, 'preventDefault'); 
    inputEl.triggerEventHandler('keypress', event); 

    expect(event.preventDefault).toHaveBeenCalled(); 
    }); 

此外我認爲你需要改變你的指令來限制字符串轉換爲數字：

if (event.target.value.length === +this.limit) {