Fullcalendar.io show more link(dayMaxEvents) tests doesn't work in the vue testing library

451 Views Asked by At

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();
  });
});
0

There are 0 best solutions below