Scheduler: refactor appointment_popup module (TS)

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

@@ -4,11 +4,11 @@ import $ from '@js/core/renderer';
 import { Deferred } from '@js/core/utils/deferred';
 
 import { mockTimeZoneCalculator } from '../../__mock__/timezone_calculator.mock';
-import { AppointmentForm } from '../../appointment_popup/m_form';
+import { AppointmentForm } from '../../appointment_popup/form';
 import {
   APPOINTMENT_POPUP_CLASS,
   AppointmentPopup,
-} from '../../appointment_popup/m_popup';
+} from '../../appointment_popup/popup';
 import {
   AppointmentDataAccessor,
 } from '../../utils/data_accessor/appointment_data_accessor';
@@ -130,9 +130,10 @@ export const createAppointmentPopup = async (
     getTimeZoneCalculator: (): typeof timeZoneCalculator => timeZoneCalculator,
   };
 
+  // @ts-expect-error // TODO: redo changed Scheduler popup api
   const form = new AppointmentForm(formSchedulerProxy);
 
-  const noop = (): void => {};
+  const noop = (): void => { };
 
   const popupSchedulerProxy = {
     getElement: (): ReturnType<typeof $> => $(container),

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

@@ -1,7 +1,7 @@
 import { within } from '@testing-library/dom';
 import { ToolbarModel } from '@ts/scheduler/__tests__/__mock__/model/toolbar';
 
-import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/m_popup';
+import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/popup';
 import { POPUP_DIALOG_CLASS } from '../../../m_scheduler';
 import type { AppointmentModel } from './appointment';
 import { createAppointmentModel } from './appointment';

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

@@ -109,6 +109,7 @@ describe('Scheduler scrollTo', () => {
     const item = (scheduler as any).getDataSource().items()[0];
     scheduler.showAppointmentPopup(item);
     POM.popup.saveButton.click();
+    await Promise.resolve();
 
     expect(scrollLeftBeforeSave).toBe(0);
     expect(scrollableContainer.scrollLeft).toBeGreaterThan(0);

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

@@ -85,6 +85,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(item);
       POM.popup.setInputValue('subjectEditor', 'New Subject');
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({
         ...commonAppointment,
@@ -121,6 +122,7 @@ describe('Appointment Form', () => {
       POM.popup.setInputValue('subjectEditor', 'New Subject');
       POM.popup.recurrenceSettingsButton.click();
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({
         ...recurringAppointment,
@@ -156,6 +158,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(item);
       POM.popup.selectRepeatValue('daily');
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({
         ...commonAppointment,
@@ -190,6 +193,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(item);
       POM.popup.editSeriesButton.click();
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject(recurringAppointment);
     });
@@ -207,6 +211,7 @@ describe('Appointment Form', () => {
       POM.popup.editSeriesButton.click();
       POM.popup.selectRepeatValue('never');
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({
         ...recurringAppointment,
@@ -231,6 +236,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(appointment);
       POM.popup.setInputValue('subjectEditor', 'Updated subject');
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const items = (scheduler as any).getDataSource().items();
 
@@ -261,6 +267,7 @@ describe('Appointment Form', () => {
       POM.popup.setInputValue('endTimeEditor', new Date(2017, 4, 25, 10, 0));
       POM.popup.setInputValue('descriptionEditor', 'New appointment description');
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const items = (scheduler as any).getDataSource().items();
 
@@ -297,6 +304,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(item);
       POM.popup.setInputValue('roomId', 2);
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(dataSource.items()[0].roomId).toBe(2);
     });
@@ -319,6 +327,7 @@ describe('Appointment Form', () => {
       POM.popup.editAppointmentButton.click();
       POM.popup.setInputValue('subjectEditor', 'single appointment');
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       expect(dataSource.items()).toHaveLength(2);
       expect(dataSource.items()[0]).toEqual({
@@ -344,6 +353,7 @@ describe('Appointment Form', () => {
 
       POM.popup.setInputValue(editorName, null);
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(POM.isPopupVisible()).toBe(true);
     });
@@ -358,6 +368,7 @@ describe('Appointment Form', () => {
       POM.popup.setInputValue(editorName, null);
       POM.popup.selectRepeatValue('daily');
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(POM.isPopupVisible()).toBe(true);
     });
@@ -373,6 +384,7 @@ describe('Appointment Form', () => {
       expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/9/2017');
 
       POM.popup.saveButton.click();
+      await Promise.resolve();
 
       expect(POM.isPopupVisible()).toBe(false);
     });
@@ -477,6 +489,7 @@ describe('Appointment Form', () => {
 
       scheduler.showAppointmentPopup({ ...commonAppointment }, true);
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const item = dataSource.items()[0];
 
@@ -665,6 +678,7 @@ describe('Appointment Form', () => {
 
       POM.popup.setInputValue(editorName, value);
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
       const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
@@ -695,6 +709,7 @@ describe('Appointment Form', () => {
       POM.popup.setInputValue(dateEditorName, value);
       POM.popup.setInputValue(timeEditorName, value);
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
       const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
@@ -719,6 +734,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup();
       POM.popup.selectRepeatValue('daily');
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
       const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
@@ -751,6 +767,7 @@ describe('Appointment Form', () => {
 
       POM.popup.setInputValue(exprValue, 2);
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       const customFieldValue = scheduler.option(`dataSource[0].${exprValue}`);
       const defaultFieldValue = scheduler.option(`dataSource[0].${defaultField}`);
@@ -1888,6 +1905,7 @@ describe('Appointment Form', () => {
 
         scheduler.showAppointmentPopup({ ...commonAppointment }, true);
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         expect(addAppointmentSpy).toHaveBeenCalledTimes(1);
         expect(addAppointmentSpy).toHaveBeenCalledWith(
@@ -1903,6 +1921,7 @@ describe('Appointment Form', () => {
 
         scheduler.showAppointmentPopup({ ...commonAppointment }, true);
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         const dataSource = (scheduler as any).getDataSource();
         expect(dataSource.items().length).toBe(0);
@@ -1916,6 +1935,7 @@ describe('Appointment Form', () => {
 
         scheduler.showAppointmentPopup({ ...commonAppointment }, true);
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         const dataSource = (scheduler as any).getDataSource();
         expect(dataSource.items().length).toBe(1);
@@ -1936,6 +1956,7 @@ describe('Appointment Form', () => {
         scheduler.showAppointmentPopup(updatedItem);
         POM.popup.setInputValue('subjectEditor', 'Updated Subject');
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         expect(updateAppointmentSpy).toHaveBeenCalledTimes(1);
         expect(updateAppointmentSpy).toHaveBeenCalledWith(updatedItem, updatedItem);
@@ -1953,6 +1974,7 @@ describe('Appointment Form', () => {
         scheduler.showAppointmentPopup(updatedItem);
         POM.popup.setInputValue('subjectEditor', 'Updated Subject');
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         expect(dataSource.items()[0]).toEqual(commonAppointment);
       });
@@ -1969,6 +1991,7 @@ describe('Appointment Form', () => {
         scheduler.showAppointmentPopup(updatedItem);
         POM.popup.setInputValue('subjectEditor', 'New Subject');
         POM.popup.saveButton.click();
+        await Promise.resolve();
 
         expect(dataSource.items()[0]).toEqual({
           allDay: false,
@@ -2085,6 +2108,7 @@ describe('Appointment Form', () => {
       scheduler.showAppointmentPopup(item);
       POM.popup.setInputValue('subjectEditor', 'New Subject');
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({ ...commonAppointment, text: 'New Subject' });
     });
@@ -2101,6 +2125,7 @@ describe('Appointment Form', () => {
       POM.popup.selectRepeatValue('weekly');
       POM.popup.setInputValue('recurrenceStartDateEditor', new Date(2024, 4, 25));
       scheduler.hideAppointmentPopup(true);
+      await Promise.resolve();
 
       expect(dataSource.items()[0]).toMatchObject({
         ...commonAppointment,

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

@@ -54,6 +54,7 @@ describe('Isolated AppointmentPopup environment', () => {
     });
 
     POM.saveButton.click();
+    await new Promise(process.nextTick);
 
     expect(callbacks.onSave).toHaveBeenCalledTimes(1);
     expect(callbacks.onSave).toHaveBeenCalledWith(
@@ -75,6 +76,7 @@ describe('Isolated AppointmentPopup environment', () => {
     });
 
     POM.saveButton.click();
+    await new Promise(process.nextTick);
 
     expect(callbacks.addAppointment).not.toHaveBeenCalled();
     expect(callbacks.updateAppointment).not.toHaveBeenCalled();
@@ -139,6 +141,7 @@ describe('Isolated AppointmentPopup environment', () => {
     });
 
     POM.saveButton.click();
+    await new Promise(process.nextTick);
 
     expect(onSave).toHaveBeenCalledTimes(1);
     expect(updateAppointment).toHaveBeenCalledWith(sourceAppointment, updatedAppointment);

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

@@ -2,7 +2,7 @@ import {
   describe, expect, it,
 } from '@jest/globals';
 
-import { type ConfigItem, customizeFormItems, type FormItem } from './m_customize_form_items';
+import { type ConfigItem, customizeFormItems, type FormItem } from './customize_form_items';
 
 const subjectGroup: FormItem = {
   name: 'subjectGroup',