Karma tests for P-Calendar, etc - help!

UI Components for Angular
Post Reply
dime0000
Posts: 3
Joined: 11 Dec 2018, 21:36

11 Dec 2018, 21:43

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!

dime0000
Posts: 3
Joined: 11 Dec 2018, 21:36

12 Dec 2018, 14:13

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)
});
}
}

dime0000
Posts: 3
Joined: 11 Dec 2018, 21:36

12 Dec 2018, 18:18

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();
});
});
}));

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests