Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.43k stars 142 forks source link

Unable to select month in MonthPicker unit tests using vue-test-utils `el.trigger("click")` function #949

Closed AntonioDell closed 1 month ago

AntonioDell commented 1 month ago

Describe the bug Using vue-test-utils to trigger a click on a month of the MonthPicker does not select the month in a unit test. However doing so in a DatePicker to select a date works.

Example DatePicker working:

// ... Mount picker in date mode and open it via click on input field...

// Get the opened picker menu from the document body
const documentBody = new DOMWrapper(document.body);
const datePicker = documentBody.find(".dp__menu");

const dateGridCell = datePicker.find("#2024-07-01"); // You might have to adjust the month here to your current month

expect(dateGridCell.attributes("aria-selected")).toBeUndefined();
await dateGridCell.trigger("click");
expect(dateGridCell.attributes("aria-selected")).toBe("true"); // PASSES

Example MonthPicker NOT working:

// ... Mount picker in month mode and open it via click on input field...

// Get the opened picker menu from the document body
const documentBody = new DOMWrapper(document.body);
const monthPicker = documentBody.find(".dp__menu");

const monthGridCell = monthPicker.find("data-test=Jan"); // You might have to adjust the month here, so that it does not select the current month

expect(monthGridCell.attributes("aria-selected")).toBeUndefined(); 
await monthGridCell.trigger("click")
expect(monthGridCell.attributes("aria-selected")).toBe("true"); // FAILS

Digging into the differences between SelectionOverlay.vue (used by MonthPicker) and DatePicker.vue, I suspect the culprit could be the @click.prevent in the root div of SelectionOverlay. DatePicker does not have such an event handler on the root, only one on the actual date grid cells.

To Reproduce I'll create a minimal project and link it here shortly.

Expected behavior In unit tests using vue-test-utils it is possible to select a month in the MonthPicker by using monthGridCell.trigger("click"). This is currently possible in a DatePicker.

Desktop & mobile (please complete the following information):

AntonioDell commented 1 month ago

I got confused with the aria-pressed and aria-selected properties. One is used when selecting in a MonthPicker, the other in DatePicker. So after breaking it down to a very basic example, I noticed, that the behavior I thought was a bug, was only my oversight.

Sorry for the confusion, closing the ticket :)