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值？

回答

相关问题