1

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

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

我似乎无法让它与 Prime 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 元素的值而不是它的输入吗？

4

1 回答 1

1

在浏览了 p-calendar 源代码之后，需要做两件事才能使其正常工作。首先，输入字符串的日期格式必须与日历控件的预期相匹配，在我的例子中：

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'));
于 2019-04-24T18:38:44.767 回答