Scheduler - Appointments refactoring - Drag-n-Drop (#33690)

Author: Tucchhaa

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/appointment.ts

@@ -13,6 +13,7 @@ export interface AppointmentModel<T = HTMLDivElement> {
   getColor: (view: string) => string | undefined;
   getSnapshot: () => object;
   isFocused: () => boolean;
+  isDragSource: () => boolean;
 }
 
 const getColor = (appointment: HTMLDivElement): string => appointment.style.backgroundColor;
@@ -68,4 +69,5 @@ export const createAppointmentModel = <T extends HTMLDivElement | null>(
     ...getGeometry(element),
   }),
   isFocused: () => element?.classList.contains('dx-state-focused') ?? false,
+  isDragSource: () => element?.classList.contains('dx-scheduler-appointment-drag-source') ?? false,
 });

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts

@@ -54,6 +54,13 @@ export class SchedulerModel {
     return appointments.map((element) => createAppointmentModel(element as HTMLDivElement));
   }
 
+  getDraggedAppointment(): AppointmentModel | null {
+    const draggableContainer = this.container.querySelector('.dx-scheduler-draggable-container');
+    const dragClone = draggableContainer?.querySelector('.dx-scheduler-appointment');
+
+    return dragClone ? createAppointmentModel(dragClone as HTMLDivElement) : null;
+  }
+
   getTooltipAppointment(index = 0): HTMLElement | null {
     return this.tooltip.getAppointmentItem(index);
   }

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/tooltip.ts

@@ -3,9 +3,12 @@ import $ from '@js/core/renderer';
 import type dxTooltip from '@js/ui/tooltip';
 import { within } from '@testing-library/dom';
 
+const TOOLTIP_WIDGET_SELECTOR = `
+  .dx-scheduler-appointment-tooltip-wrapper.dx-tooltip.dx-widget
+`;
 const TOOLTIP_WRAPPER_SELECTOR = `
-  .dx-overlay-wrapper.dx-scheduler-overlay-panel,
-  .dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper
+  .dx-scheduler-appointment-tooltip-wrapper.dx-tooltip-wrapper,
+  .dx-scheduler-overlay-panel.dx-overlay-wrapper
 `;
 
 export class TooltipModel {
@@ -15,7 +18,7 @@ export class TooltipModel {
 
   get dxTooltip(): dxTooltip {
     // @ts-expect-error
-    return $('.dx-tooltip.dx-widget').dxTooltip('instance') as dxTooltip;
+    return $(TOOLTIP_WIDGET_SELECTOR).dxTooltip('instance') as dxTooltip;
   }
 
   get target(): Element | null {
@@ -31,6 +34,18 @@ export class TooltipModel {
     return this.element?.querySelector('.dx-scrollable .dx-scrollview-content') ?? null;
   }
 
+  getList(): Element {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const tooltipContent = (this.dxTooltip as any)?.$content().get(0);
+    const list = tooltipContent?.querySelector('.dx-list.dx-widget');
+
+    if (!list) {
+      throw new Error('Tooltip list not found');
+    }
+
+    return list as Element;
+  }
+
   getDeleteButtons(): HTMLElement[] {
     return this.element
       ? within(this.element).queryAllByRole('button').filter(