角度单元测试准备日历

时间:2019-04-18 14:59:35

标签: angular unit-testing primeng primeng-calendar

在单元测试中,当我有一个常规元素时,可以设置其值,触发更改事件并验证表单值是否匹配,如下所示:

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

我似乎无法使其与主要ng日历控件一起使用。

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 :(得分:0)

在经过p日历源代码后,需要两件事才能使其工作。 首先,在我的情况下,输入字符串的日期格式必须与日历控件预期的匹配:

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

第二,因为这个原因:https://github.com/primefaces/primeng/blob/2b632fe200c003eb78e4d3b57d65f7ff27dedcb9/src/app/components/calendar/calendar.ts#L1407

必须调度一个keydown事件。

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