[scheduler] Absorb un-acted ResizeObserver deliveries after rendering the timeline

packages/x-scheduler-premium/src/event-calendar-premium/tests/generalTabSlot.premium.test.tsx

@@ -47,7 +47,7 @@ const slotProps: SchedulerSlotProps = {
  * down to it. The compact views open the drawer, the others the dialog; both render the same form.
  */
 describe('eventDialogGeneralTab slot - premium surfaces', () => {
-  const { render } = createSchedulerRenderer({ clockConfig: visibleDate });
+  const { renderSettled } = createSchedulerRenderer({ clockConfig: visibleDate });
 
   const surfaces = [
     ['EventCalendarPremium', EventCalendarPremium, false],
@@ -62,8 +62,8 @@ describe('eventDialogGeneralTab slot - premium surfaces', () => {
   ] as const;
 
   surfaces.forEach(([name, Component, isCompact]) => {
-    it(`should forward the eventDialogGeneralTab slot and its slot props from <${name} />`, () => {
-      render(
+    it(`should forward the eventDialogGeneralTab slot and its slot props from <${name} />`, async () => {
+      await renderSettled(
         <Component
           events={[event]}
           resources={[engineering]}
@@ -84,8 +84,8 @@ describe('eventDialogGeneralTab slot - premium surfaces', () => {
     });
   });
 
-  it('should keep the recurrence tab working when the general tab is replaced by the slot', () => {
-    render(
+  it('should keep the recurrence tab working when the general tab is replaced by the slot', async () => {
+    await renderSettled(
       <EventCalendarPremium
         events={[event]}
         resources={[engineering]}

packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumLayout.test.tsx

@@ -26,19 +26,19 @@ function getTitleColumnWidth(): number {
 // title cells; jsdom doesn't implement layout, so these assertions only work in
 // the browser project.
 describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
-  const { render } = createSchedulerRenderer({
+  const { renderSettled } = createSchedulerRenderer({
     clockConfig: new Date(DEFAULT_TESTING_VISIBLE_DATE_STR),
   });
 
-  function renderTimeline(
+  async function renderTimeline(
     resources: SchedulerResource[],
     hostWidth: number = 1200,
     options: {
       events?: SchedulerEvent[];
       presetConfig?: EventTimelinePremiumPresetConfig;
     } = {},
   ) {
-    return render(
+    const view = await renderSettled(
       <div style={{ width: hostWidth, height: 600 }}>
         <EventTimelinePremium
           resources={resources}
@@ -50,13 +50,14 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
         />
       </div>,
     );
+    return view;
   }
 
   describe('title column auto-sizing', () => {
     it('should grow the title column to fit a longer resource title', async () => {
       const short = ResourceBuilder.new().title('A').build();
 
-      const { rerender } = renderTimeline([short]);
+      const { rerender } = await renderTimeline([short]);
 
       let shortWidth = 0;
       await waitFor(() => {
@@ -91,7 +92,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
       const huge = ResourceBuilder.new().title('X'.repeat(500)).build();
 
       const hostWidth = 1200;
-      renderTimeline([huge], hostWidth);
+      await renderTimeline([huge], hostWidth);
 
       await waitFor(() => {
         // Cap is containerWidth / 4. Allow a small tolerance: containerWidth is the
@@ -108,7 +109,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
     it('should keep the title column at the minimum width for empty/short titles', async () => {
       const tiny = ResourceBuilder.new().title('A').build();
 
-      renderTimeline([tiny]);
+      await renderTimeline([tiny]);
 
       await waitFor(() => {
         // The minWidth wired into useTitleColumnWidth is 50; the header label
@@ -135,7 +136,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
         .span('2025-07-04T08:00:00', '2025-07-04T12:00:00')
         .build();
 
-      renderTimeline([resource], 1200, { events: [fullDay], presetConfig: PRESET_CONFIG });
+      await renderTimeline([resource], 1200, { events: [fullDay], presetConfig: PRESET_CONFIG });
 
       await waitFor(() => {
         expect(getTitleColumnWidth()).to.be.greaterThan(0);
@@ -168,7 +169,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
         .span('2025-07-06T14:00:00', '2025-07-06T20:00:00')
         .build();
 
-      render(
+      await renderSettled(
         <div style={{ width: 1200, height: 300 }}>
           <EventTimelinePremium
             resources={resources}
@@ -226,7 +227,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
       // should overflow.
       const only = ResourceBuilder.new().title('A').build();
 
-      render(
+      await renderSettled(
         <div style={{ width: 8000, height: 600 }}>
           <EventTimelinePremium
             resources={[only]}
@@ -253,7 +254,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> layout', () => {
         ResourceBuilder.new().title(`Resource ${i}`).build(),
       );
 
-      render(
+      await renderSettled(
         <div style={{ width: 600, height: 400 }}>
           <EventTimelinePremium
             resources={many}

packages/x-scheduler-premium/src/event-timeline-premium/content/EventTimelinePremiumTabNavigation.test.tsx

@@ -17,7 +17,7 @@ import { describe, it, expect } from 'vitest';
 // `clientWidth`/`scrollLeft` and the virtualizer only mounts a subset of events
 // when the scroller has real dimensions). jsdom doesn't lay out, so skip there.
 describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
-  const { render } = createSchedulerRenderer({
+  const { renderSettled } = createSchedulerRenderer({
     clockConfig: new Date(DEFAULT_TESTING_VISIBLE_DATE_STR),
   });
 
@@ -46,14 +46,14 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
     eventAt(6, 20),
   ];
 
-  function renderTimeline(
+  async function renderTimeline(
     options: {
       events?: SchedulerEvent[];
       presetConfig?: EventTimelinePremiumPresetConfig;
       hostWidth?: number;
     } = {},
   ) {
-    return render(
+    const view = await renderSettled(
       <div style={{ width: options.hostWidth ?? 1200, height: 600 }}>
         <EventTimelinePremium
           resources={[resource]}
@@ -65,6 +65,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
         />
       </div>,
     );
+    return view;
   }
 
   function getEvent(title: string): HTMLElement | null {
@@ -76,7 +77,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
   }
 
   it('should focus the next event in row order when Tab is pressed', async () => {
-    const { user } = renderTimeline();
+    const { user } = await renderTimeline();
 
     // Wait for the timeline to settle and confirm `evt-d3-h1` and `evt-d3-h5` are
     // both currently mounted (the close-together events near scrollLeft=0).
@@ -95,7 +96,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
   });
 
   it('should scroll-then-focus an event that is virtualized out', async () => {
-    const { user } = renderTimeline();
+    const { user } = await renderTimeline();
 
     await waitFor(() => {
       expect(getEvent('evt-d3-h1')).not.to.equal(null);
@@ -139,7 +140,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
   });
 
   it('should walk back through events with Shift+Tab, including virtualized ones', async () => {
-    const { user } = renderTimeline();
+    const { user } = await renderTimeline();
 
     // Scroll all the way right and confirm the last event mounts.
     await waitFor(() => {
@@ -182,7 +183,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
   });
 
   it('should let default Tab take focus out of the row past the last event', async () => {
-    const { user } = renderTimeline();
+    const { user } = await renderTimeline();
 
     await waitFor(() => {
       expect(getEvent('evt-d3-h1')).not.to.equal(null);
@@ -214,7 +215,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
     it('should skip the occurrences hidden by the trimmed hour window instead of trapping focus', async () => {
       // 21:00 hides inside the window: its occurrence never mounts, so navigating to it
       // would swallow Tab forever.
-      const { user } = renderTimeline({
+      const { user } = await renderTimeline({
         events: [eventAt(3, 10), eventAt(3, 21), eventAt(4, 10)],
         presetConfig: TRIMMED,
       });
@@ -240,7 +241,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
       // The target sits on the last day at 19:00 — tick 47 of 48, around x=3008 — while
       // the 600px host shows roughly the first 540px. It cannot be reached without the
       // interceptor scrolling to the position the trimmed axis puts it at.
-      const { user } = renderTimeline({
+      const { user } = await renderTimeline({
         events: [eventAt(3, 10), eventAt(3, 21), eventAt(6, 19)],
         presetConfig: TRIMMED,
         hostWidth: 600,
@@ -319,7 +320,7 @@ describe.skipIf(isJSDOM)('<EventTimelinePremium /> Tab navigation', () => {
         .resources([resourceA, resourceB])
         .build();
 
-      const { user } = render(
+      const { user } = await renderSettled(
         <div style={{ width: 1200, height: 600 }}>
           <EventTimelinePremium
             // B listed before A so its (duplicate-keyed) copy of `shared` sits