Угловое модульное тестирование премьер календаря - PullRequest
Новая
       20

Угловое модульное тестирование премьер календаря

0 голосов
/ 18 апреля 2019

Внутри модульного теста, когда у меня есть обычный элемент, я могу установить его значение, вызвать событие изменения и проверить соответствие значения формы следующим образом: 

const hostElement = fixture.nativeElement;
const userIdSelect: HTMLInputElement = 
hostElement.querySelector('select[formcontrolname="userId"]');
userIdSelect.value = 'myUser';
userIdSelect.dispatchEvent(new Event('change'));  
fixture.detectChanges();
expect(component.form.controls.userId.value).toBe('myUser');

Не могу заставить его работать с основным элементом управления календаря. 

const myDate= new Date(2019,11,31);
const myDateInput: HTMLInputElement = hostElement.querySelector('p-calendar[formcontrolname="myDate"] input');
myDateInput.value = myDate.toLocaleDateString();
myDateInput.dispatchEvent(new Event('input'));
expect(component.form.controls.myDate.value).toBe(myDate.toLocaleDateString());

У меня такое ощущение, что это связано с тем, что форма связана с элементом p-calendar, а не с его дочерним вводом: 

<p-calendar dateFormat="dd/mm/yy" formControlName="myDate"
showIcon="true"
[readonlyInput]="false"></p-calendar>

Я пытался отправлять различные события на входе (размытие, ввод и т. Д.), Но, независимо от того, что я не могу получить, форма обновляется. Есть идеи? Я должен установить значение элемента p-calendar вместо его ввода?

1 Ответ

0 голосов
/ 24 апреля 2019

После прохождения через исходный код p-календаря для его работы требуются две вещи. Во-первых, формат даты входной строки должен соответствовать ожидаемому элементу управления календаря, в моем случае: 

myDateInput.value = moment(myDate).format('DD/MM/YYYY');

Во-вторых, из-за этого: https://github.com/primefaces/primeng/blob/2b632fe200c003eb78e4d3b57d65f7ff27dedcb9/src/app/components/calendar/calendar.ts#L1407

Событие нажатия должно быть отправлено. 

myDateInput.dispatchEvent(new Event('keydown'));
...