I am using full calendar v5 and testing-library/vue for tests. I try to test show more events in the popover. But although I am giving events more than 4 the show more link isn't being loaded on the calendar and it never works the moreLinkDidMount function. When I set the daymaxEvents prop as zero it shows the link and the moreLinkDidMount function works. What am I missing?
Here are my codes;
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import trLocale from '@fullcalendar/core/locales/tr';
<FullCalendar :options="calendarOptions" />
data () {
return {
calendarOptions: {
eventDisplay: 'block',
headerToolbar: false,
dayHeaders: false,
locales: [trLocale],
plugins: [ dayGridPlugin ],
initialView: 'dayGridMonth',
weekends: true,
dayMaxEvents: 4,
dayPopoverFormat: { day: 'numeric' },
displayEventTime: false,
events: [],
moreLinkDidMount: (arg) => {
console.log(arg);
},
},
};
},
async mounted () {
await this.getAllEvents();
},
async getAllEvents () {
const startDate = this.currentStartDate;
const endDate = this.currentEndDate;
await this.getEvents({ startDate, endDate }); // Data that comes from API are added in
calendar options events
},
Here are my test codes;
import { screen, waitFor,render } from '@testing-library/vue';
import FullCalendar from '@/views/Calendar/FullCalendar';
import { getMockEventItem } from '../../../mocks/eventItem.mock';
it('should show more link when event count is bigger than 4', async () => {
// given
const events = [
getMockEventItem(),
getMockEventItem(),
getMockEventItem(),
getMockEventItem(),
getMockEventItem(),
];
calendarService.getEvents.mockResolvedValue(events);
render(FullCalendar);
await waitFor(() => {
expect(document.querySelector('.fc-daygrid-more-link.fc-more-link')).toBeInTheDocument();
});
});