Angular 2/4 - 如何測試指令@Input值？

所以我有一個指令，其採用輸入：Angular 2/4 - 如何測試指令@Input值？

@Directive({ 
    selector: '[my-directive]' 
}) 
export class MyDirective { 

    @Input('some-input') 
    public someInput: string; 
}

正如你看到的，輸入應該是一個string值。現在，我想編寫一個測試這個指令，我想測試，如果輸入滿足string類型：

describe('MyDirective',() => { 

    let fixture: ComponentFixture<DummyComponent>; 
    let dummy: DummyComponent; 
    let directive: DebugElement; 

    beforeEach(async(() => { 

     TestBed 
      .configureTestingModule({ 
       imports: [ 
        MyModule.forRoot() 
       ], 
       declarations: [ 
        DummyComponent 
       ] 
      }) 
      .compileComponents(); 

     fixture = TestBed.createComponent(DummyComponent); 
     dummy = fixture.componentInstance; 
     directive = fixture.debugElement.query(By.directive(MyDirective)); 

     fixture.detectChanges(); 
    })); 

    it('should satisfy only a string input and error on other inputs',() => { 
     // How to test? 
    }); 
}); 

@Component({ 
    selector: 'dummy', 
    template: ` 
     <div my-directive [some-input]="'just-a-string-value'"></div> 
    ` 
}) 
export class DummyComponent implements OnInit { 
}

我如何測試@Input值（S）是否是正確的類型嗎？

來源

2017-07-24 Nicky

這個[link]（https://github.com/angular/angular-es/blob/master/public/docs/_examples/testing/ts/app/shared/highlight.directive.spec.ts）可能有幫助 –

指令應該是DebugElement []，只需要獲取這個屬性的typeof（directives [0] .attributes.someInput）.toLowerCase（）==「string」 – titusfx

https://angular.io/guide/testing#test-a-component-with-inputs-and-outputs

具有輸入和輸出的組件通常顯示一個主機組件的視圖模板內部。主機使用屬性綁定來設置的輸入屬性和一個事件綁定來偵聽由引發的事件的輸出屬性。

測試目標是驗證此類綁定是否按預期工作。測試應該設置輸入值並監聽輸出事件。

代碼示例在鏈接中。

來源

2017-07-24 16:57:37

Angular 2/4 - 如何測試指令@Input值？

回答

相關問題