Angular 2/4 - How to check directives @ Input values?
So, I have a Directive that takes input:
@Directive({
selector: '[my-directive]'
})
export class MyDirective {
@Input('some-input')
public someInput: string;
}
As you can see, the input has to make a difference string
. Now I want to write a test for this Directive and I want to check if the input is of the type 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 {
}
How can I check if the values (s) are of the @Input
correct type?
source to share
So it's a little late, but I came here looking for the same problem, so I'll post my solution. Here's what I did to check the values of the input directives (or other properties):
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;
}
I could check my input directives using this method. If you provide default values for your directive inputs, you can check them before calling fixture.detectChanges ().
source to share
https://angular.io/guide/testing#test-a-component-with-inputs-and-outputs
A component with inputs and outputs usually appears inside the host component template view. The host uses property binding to set the input property, and the event binding to listen for events raised by the output property.
The goal of testing is to ensure that such bindings work as expected. tests should set input values and listen for output events.
Code examples are given in the link.
source to share