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

Author: Tucchhaa

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

@@ -11,6 +11,8 @@ export interface AppointmentModel<T = HTMLDivElement> {
   getGeometry: () => Position;
   getColor: (view: string) => string | undefined;
   getSnapshot: () => object;
+  isFocused: () => boolean;
+  isDragSource: () => boolean;
 }
 
 const getColor = (appointment: HTMLDivElement): string => appointment.style.backgroundColor;
@@ -60,4 +62,6 @@ export const createAppointmentModel = <T extends HTMLDivElement | null>(
     date: getDisplayDate(element),
     ...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;
+  }
+
   getCollectorTexts(): string[] {
     const allButtons = this.queries.queryAllByRole('button') as HTMLElement[];
     const collectors = allButtons.filter((btn) => btn.classList.contains('dx-scheduler-appointment-collector'));
@@ -101,6 +108,16 @@ export class SchedulerModel {
     return result as HTMLElement;
   }
 
+  getWorkspace(): HTMLElement {
+    const result = this.container.querySelector('.dx-scheduler-work-space');
+
+    if (!result) {
+      throw new Error('Workspace not found');
+    }
+
+    return result as HTMLElement;
+  }
+
   getHeaderPanelContent(): string[] {
     const cells = this.container.querySelectorAll('.dx-scheduler-header-panel-cell');
     return getTexts(cells);

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(