[scheduler] Testing - event builders for reducing test boilerplate

packages/x-scheduler/src/agenda-view/AgendaView.test.tsx

@@ -1,6 +1,10 @@
 import { screen } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
-import { adapter, createSchedulerRenderer } from 'test/utils/scheduler';
+import {
+  adapter,
+  createSchedulerRenderer,
+  DEFAULT_TESTING_VISIBLE_DATE,
+} from 'test/utils/scheduler';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 
 describe('<AgendaView />', () => {
@@ -9,39 +13,37 @@ describe('<AgendaView />', () => {
   describe('time navigation', () => {
     it('should go to previous agenda period (12 days) when clicking on the Previous Agenda button', async () => {
       const onVisibleDateChange = spy();
-      const visibleDate = adapter.date('2025-07-03T00:00:00Z');
 
       const { user } = render(
         <EventCalendar
           events={[]}
-          visibleDate={visibleDate}
+          visibleDate={DEFAULT_TESTING_VISIBLE_DATE}
           onVisibleDateChange={onVisibleDateChange}
           view="agenda"
         />,
       );
 
       await user.click(screen.getByRole('button', { name: /previous agenda/i }));
       expect(onVisibleDateChange.lastCall.firstArg).toEqualDateTime(
-        adapter.addDays(visibleDate, -12),
+        adapter.addDays(DEFAULT_TESTING_VISIBLE_DATE, -12),
       );
     });
 
     it('should go to next agenda period (12 days) when clicking on the Next Agenda button', async () => {
       const onVisibleDateChange = spy();
-      const visibleDate = adapter.date('2025-07-03T00:00:00Z');
 
       const { user } = render(
         <EventCalendar
           events={[]}
-          visibleDate={visibleDate}
+          visibleDate={DEFAULT_TESTING_VISIBLE_DATE}
           onVisibleDateChange={onVisibleDateChange}
           view="agenda"
         />,
       );
 
       await user.click(screen.getByRole('button', { name: /next agenda/i }));
       expect(onVisibleDateChange.lastCall.firstArg).toEqualDateTime(
-        adapter.addDays(visibleDate, 12),
+        adapter.addDays(DEFAULT_TESTING_VISIBLE_DATE, 12),
       );
     });
   });

packages/x-scheduler/src/day-view/DayView.test.tsx

@@ -1,6 +1,10 @@
 import { screen } from '@mui/internal-test-utils';
 import { spy } from 'sinon';
-import { adapter, createSchedulerRenderer } from 'test/utils/scheduler';
+import {
+  adapter,
+  createSchedulerRenderer,
+  DEFAULT_TESTING_VISIBLE_DATE,
+} from 'test/utils/scheduler';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 
 describe('<DayView />', () => {
@@ -9,39 +13,37 @@ describe('<DayView />', () => {
   describe('time navigation', () => {
     it('should go to start of previous day when clicking on the Previous Day button', async () => {
       const onVisibleDateChange = spy();
-      const visibleDate = adapter.date('2025-07-03T00:00:00Z');
 
       const { user } = render(
         <EventCalendar
           events={[]}
-          visibleDate={visibleDate}
+          visibleDate={DEFAULT_TESTING_VISIBLE_DATE}
           onVisibleDateChange={onVisibleDateChange}
           view="day"
         />,
       );
 
       await user.click(screen.getByRole('button', { name: /previous day/i }));
       expect(onVisibleDateChange.lastCall.firstArg).toEqualDateTime(
-        adapter.addDays(visibleDate, -1),
+        adapter.addDays(DEFAULT_TESTING_VISIBLE_DATE, -1),
       );
     });
 
     it('should go to start of next day when clicking on the Next Day button', async () => {
       const onVisibleDateChange = spy();
-      const visibleDate = adapter.date('2025-07-03T00:00:00Z');
 
       const { user } = render(
         <EventCalendar
           events={[]}
-          visibleDate={visibleDate}
+          visibleDate={DEFAULT_TESTING_VISIBLE_DATE}
           onVisibleDateChange={onVisibleDateChange}
           view="day"
         />,
       );
 
       await user.click(screen.getByRole('button', { name: /next day/i }));
       expect(onVisibleDateChange.lastCall.firstArg).toEqualDateTime(
-        adapter.addDays(visibleDate, 1),
+        adapter.addDays(DEFAULT_TESTING_VISIBLE_DATE, 1),
       );
     });
   });

packages/x-scheduler/src/event-calendar/EventCalendar.test.tsx

@@ -1,5 +1,5 @@
 import { screen } from '@mui/internal-test-utils';
-import { adapter, createSchedulerRenderer } from 'test/utils/scheduler';
+import { adapter, createSchedulerRenderer, EventBuilder } from 'test/utils/scheduler';
 import { EventCalendar } from '@mui/x-scheduler/event-calendar';
 import {
   changeTo24HoursFormat,
@@ -13,26 +13,19 @@ import {
 describe('EventCalendar', () => {
   const { render } = createSchedulerRenderer({ clockConfig: new Date('2025-05-26') });
 
+  const event1 = EventBuilder.new()
+    .title('Running')
+    .span('2025-05-26T07:30:00', '2025-05-26T08:15:00')
+    .buildOccurrence();
+
+  const event2 = EventBuilder.new()
+    .title('Weekly')
+    .span('2025-05-27T16:00:00', '2025-05-27T17:00:00')
+    .buildOccurrence();
+
   // TODO: Move in a test file specific to the TimeGrid component.
   it('should render events in the correct column', () => {
-    render(
-      <EventCalendar
-        events={[
-          {
-            id: '1',
-            start: adapter.date('2025-05-26T07:30:00'),
-            end: adapter.date('2025-05-26T08:15:00'),
-            title: 'Running',
-          },
-          {
-            id: '2',
-            start: adapter.date('2025-05-27T16:00:00'),
-            end: adapter.date('2025-05-27T17:00:00'),
-            title: 'Weekly',
-          },
-        ]}
-      />,
-    );
+    render(<EventCalendar events={[event1, event2]} />);
 
     const mondayEvent = screen.getByRole('button', { name: /Running/i });
     const tuesdayEvent = screen.getByRole('button', { name: /Weekly/i });
@@ -51,24 +44,21 @@ describe('EventCalendar', () => {
   });
 
   it('should allow to show / hide resources using the UI', async () => {
+    const event1WithResource = EventBuilder.new()
+      .title('Running')
+      .span('2025-05-26T07:30:00', '2025-05-26T08:15:00')
+      .resource('1')
+      .buildOccurrence();
+
+    const event2WithResource = EventBuilder.new()
+      .title('Weekly')
+      .span('2025-05-27T16:00:00', '2025-05-27T17:00:00')
+      .resource('2')
+      .buildOccurrence();
+
     const { user } = render(
       <EventCalendar
-        events={[
-          {
-            id: '1',
-            start: adapter.date('2025-05-26T07:30:00'),
-            end: adapter.date('2025-05-26T08:15:00'),
-            title: 'Running',
-            resource: '1',
-          },
-          {
-            id: '2',
-            start: adapter.date('2025-05-27T16:00:00'),
-            end: adapter.date('2025-05-27T17:00:00'),
-            title: 'Weekly',
-            resource: '2',
-          },
-        ]}
+        events={[event1WithResource, event2WithResource]}
         resources={[
           { id: '1', title: 'Sport' },
           { id: '2', title: 'Work' },
@@ -214,19 +204,7 @@ describe('EventCalendar', () => {
     });
 
     it('should allow to change the time format using the UI in the month view', async () => {
-      const { user } = render(
-        <EventCalendar
-          events={[
-            {
-              id: '1',
-              start: adapter.date('2025-05-26T07:30:00'),
-              end: adapter.date('2025-05-26T08:15:00'),
-              title: 'Running',
-            },
-          ]}
-          defaultView="month"
-        />,
-      );
+      const { user } = render(<EventCalendar events={[event1]} defaultView="month" />);
 
       // 12 hours format should be visible by default
       expect(screen.queryAllByText(/AM|PM/).length).to.be.above(0);
@@ -247,19 +225,7 @@ describe('EventCalendar', () => {
     });
 
     it('should allow to change the time format using the UI in the agenda view', async () => {
-      const { user } = render(
-        <EventCalendar
-          events={[
-            {
-              id: '1',
-              start: adapter.date('2025-05-26T07:30:00'),
-              end: adapter.date('2025-05-26T08:15:00'),
-              title: 'Running',
-            },
-          ]}
-          defaultView="agenda"
-        />,
-      );
+      const { user } = render(<EventCalendar events={[event1]} defaultView="agenda" />);
 
       // 12 hours format should be visible by default
       expect(screen.queryAllByText(/AM|PM/).length).to.be.above(0);

packages/x-scheduler/src/internals/components/more-events-popover/MoreEventsPopover.tsx

@@ -106,6 +106,10 @@ export function MoreEventsPopoverTrigger(props: MoreEventsPopoverTriggerProps) {
   const { occurrences, day, ...other } = props;
 
   return (
-    <MoreEventsPopover.Trigger data={{ occurrences, count: occurrences.length, day }} {...other} />
+    <MoreEventsPopover.Trigger
+      nativeButton={true}
+      data={{ occurrences, count: occurrences.length, day }}
+      {...other}
+    />
   );
 }