I feel this should be simple, but cant figure it out.
If I simply want to set a date value on a p-calendar using the Karma test suite, how do i do that? Its not as simple as, say, an input text box where you just find and set the value.
Thanks!
Karma tests for P-Calendar, etc - help!
I wanted to add a bit of code here just to illustrate what i was hoping to do... Note that i have similar logic in place for simple text inputs and all is fine there.
// test
it ('should show error when start date is empty but not when populated', async(() => {
// boiler plate - initialize component
const fixture = TestBed.createComponent(BusinessComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
// get the p-calender by ID (Start-Date)
const input = compiled.querySelector('#Start-Date');
// clear the input and dispatch the input event (presumbly like an input)
input.value = '';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
// expect my validation error message to show (it doesnt in the test - does via user interaction)
expect(compiled.querySelector('#start-date-error')).not.toBeNull();
}));
// html code:
<p-calendar id="Start-Date" formControlName="Start-Date"></p-calendar>
<p-message severity="error" text="Start date is required"
*ngIf="!factorForm.controls['Start-Date'].valid && factorForm.controls['Start-Date'].dirty"
id="start-date-error"></p-message>
// related component ts code
export class BusinessComponent implements OnInit {
factorForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.factorForm = this.fb.group({
'Start-Date': new FormControl('', Validators.required)
});
}
}
// test
it ('should show error when start date is empty but not when populated', async(() => {
// boiler plate - initialize component
const fixture = TestBed.createComponent(BusinessComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
// get the p-calender by ID (Start-Date)
const input = compiled.querySelector('#Start-Date');
// clear the input and dispatch the input event (presumbly like an input)
input.value = '';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
// expect my validation error message to show (it doesnt in the test - does via user interaction)
expect(compiled.querySelector('#start-date-error')).not.toBeNull();
}));
// html code:
<p-calendar id="Start-Date" formControlName="Start-Date"></p-calendar>
<p-message severity="error" text="Start date is required"
*ngIf="!factorForm.controls['Start-Date'].valid && factorForm.controls['Start-Date'].dirty"
id="start-date-error"></p-message>
// related component ts code
export class BusinessComponent implements OnInit {
factorForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.factorForm = this.fb.group({
'Start-Date': new FormControl('', Validators.required)
});
}
}
After much trial and error, looking at some specs in the actual PrimeNG source, I've finally figured it out:
it ('should show error when start date is empty but not when populated', async(() => {
const fixture = TestBed.createComponent(BusinessfactorComponent);
fixture.detectChanges();
const compiledPage = fixture.debugElement.nativeElement;
// default no error
expect(compiledPage.querySelector('#start-date-error')).toBeNull();
const calendar = fixture.debugElement.query(By.directive(Calendar)).componentInstance;
calendar.isKeydown = true;
let event = {'target': {'value': ''}};
calendar.onUserInput(event);
fixture.detectChanges();
fixture.whenStable().then(() => {
// nulling it gives error
expect(compiledPage.querySelector('#start-date-error')).not.toBeNull();
calendar.isKeydown = true;
event = {'target': {'value': '03/01/2018'}};
calendar.onUserInput(event);
fixture.detectChanges();
fixture.whenStable().then(() => {
// swapping it back removes error
expect(compiledPage.querySelector('#start-date-error')).toBeNull();
});
});
}));
it ('should show error when start date is empty but not when populated', async(() => {
const fixture = TestBed.createComponent(BusinessfactorComponent);
fixture.detectChanges();
const compiledPage = fixture.debugElement.nativeElement;
// default no error
expect(compiledPage.querySelector('#start-date-error')).toBeNull();
const calendar = fixture.debugElement.query(By.directive(Calendar)).componentInstance;
calendar.isKeydown = true;
let event = {'target': {'value': ''}};
calendar.onUserInput(event);
fixture.detectChanges();
fixture.whenStable().then(() => {
// nulling it gives error
expect(compiledPage.querySelector('#start-date-error')).not.toBeNull();
calendar.isKeydown = true;
event = {'target': {'value': '03/01/2018'}};
calendar.onUserInput(event);
fixture.detectChanges();
fixture.whenStable().then(() => {
// swapping it back removes error
expect(compiledPage.querySelector('#start-date-error')).toBeNull();
});
});
}));
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests