Scheduler New Form — Improve animation offset test: use classRects in setupSchedulerTestEnvironment

Author: aleksei-semikozov

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

@@ -4,9 +4,12 @@ import DOMComponent from '@ts/core/widget/dom_component';
 
 import SchedulerWorkSpace from '../../workspaces/m_work_space';
 
+type ClassRects = Record<string, Partial<DOMRect>>;
+
 interface SetupSchedulerTestEnvironmentOptions {
   width?: number;
   height?: number;
+  classRects?: ClassRects;
 }
 
 export const DEFAULT_CELL_WIDTH = 250;
@@ -16,6 +19,7 @@ export const DEFAULT_TIMELINE_CELL_HEIGHT = 450;
 export const setupSchedulerTestEnvironment = ({
   width = DEFAULT_CELL_WIDTH,
   height = DEFAULT_CELL_HEIGHT,
+  classRects = {},
 }: SetupSchedulerTestEnvironmentOptions = {}): void => {
   jest.spyOn(logger, 'warn').mockImplementation(() => {});
   DOMComponent.prototype._isVisible = jest.fn((): boolean => true);
@@ -42,8 +46,18 @@ export const setupSchedulerTestEnvironment = ({
     return styles;
   });
 
+  const defaultRect: DOMRect = {
+    width: 0, height: 0, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0, toJSON: (): void => {},
+  };
+
   Element.prototype.getBoundingClientRect = jest.fn(function (): DOMRect {
     const classList: string[] = Array.from(this.classList);
+
+    const matchedClass = classList.find((className) => classRects[className]);
+    if (matchedClass) {
+      return { ...defaultRect, ...classRects[matchedClass] };
+    }
+
     switch (true) {
       case classList.includes('dx-scheduler-date-table-cell')
         || classList.includes('dx-scheduler-all-day-table-cell'):
@@ -58,30 +72,8 @@ export const setupSchedulerTestEnvironment = ({
           y: 0,
           toJSON: (): void => {},
         };
-      case classList.includes('dx-scheduler-form-main-group'):
-        return {
-          width: 0,
-          height: 0,
-          top: 50,
-          left: 0,
-          bottom: 50,
-          right: 0,
-          x: 0,
-          y: 50,
-          toJSON: (): void => {},
-        };
       default:
-        return {
-          width: 0,
-          height: 0,
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-          x: 0,
-          y: 0,
-          toJSON: (): void => {},
-        };
+        return defaultRect;
     }
   });
 };

packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts

@@ -1596,14 +1596,20 @@ describe('Appointment Form', () => {
     });
 
     it('should set animation offset CSS variable when switching to recurrence form', async () => {
+      setupSchedulerTestEnvironment({
+        height: 600,
+        classRects: {
+          'dx-form': { top: 10 },
+          'dx-scheduler-form-main-group': { top: 60 },
+        },
+      });
+
       const { scheduler, POM } = await createScheduler(getDefaultConfig());
 
       scheduler.showAppointmentPopup();
-
       POM.popup.selectRepeatValue('weekly');
 
-      const formElement = POM.popup.dxForm.element();
-      const animationTop = formElement.style.getPropertyValue('--dx-scheduler-animation-top');
+      const animationTop = POM.popup.dxForm.element().style.getPropertyValue('--dx-scheduler-animation-top');
       expect(animationTop).toBe('50px');
     });
   });