Angular 2/4-如何测试指令@Input值? [英] Angular 2 / 4 - How to test Directive @Input values?
问题描述
所以我有一个接受输入的指令:
So I have a Directive that takes an input:
@Directive({
selector: '[my-directive]'
})
export class MyDirective {
@Input('some-input')
public someInput: string;
}
如您所见,输入应为string
值.现在,我要为此指令编写一个测试,并且要测试输入是否满足string
类型:
As you can see, the input should be a string
value. Now, I want to write a test for this Directive, and I want to test if the input satisfies the string
type:
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
值的类型是否正确?
How can I test whether the @Input
value(s) are of the proper type?
推荐答案
所以有点晚了,但是我来这里是为了寻找相同的问题,所以我将发布解决方案.这是我测试指令输入(或其他属性)值的方法:
So it's a bit late but I came here searching for the same problem, so I'll post my solution. Here is what I did to test a directive inputs (or other properties) values :
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', () => {
// needed so template is processed, inputs are updated
fixture.detectChanges();
// since we declared a ViewChild on the directive, we can access
// and test directive properties values
expect(component.directive.someInput).toEqual('just-a-string-value');
// to test the input type :
expect(component.directive.someInput).toEqual(Jasmine.any(String));
// I thought TypeScript would complain when providing a wrong type input to a directive, but no...so I guess I'll test the input type too !
});
});
@Component({
selector: 'dummy',
template: `
<div my-directive [some-input]="'just-a-string-value'"></div>
`
})
export class DummyComponent implements OnInit {
// add a reference to the directive in template
// so in your component you can access : this.directive, this.directive.someInput
ViewChild(MyDirective) directive: MyDirective;
}
因此:修改测试组件以在指令实例上保留引用,然后通过component.directive.[property-name]访问指令属性.顺便说一句,如果您为指令属性提供默认值(可以通过在模板中提供值来覆盖默认值),则可以在调用Fixture.detectChanges()之前对其进行测试.
So : modify your testing component to hold a reference on the directive instance, and then access the directive properties through component.directive.[property-name]. By the way if you provide defaults values for your directive properties (that can be overridden by providing a value in the template), you can test them before calling fixture.detectChanges().
这篇关于Angular 2/4-如何测试指令@Input值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!