Scheduler - Appointment Form - Reimplement legacy tests for the new form - Part 2 (DevExpress#31807)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__mobile (fluent.blue.light).png

@@ -194,3 +194,32 @@ test.meta({ browserSize: [1500, 1500] })('appointment form readonly state', asyn
     },
   });
 });
+
+test.meta({ browserSize: [450, 1000] })('main form on mobile screen', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  await scheduler.openAppointmentPopup(t, undefined, false);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__appointment__main-form__mobile.png',
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2021, 2, 25),
+  resources: getResources(true),
+  editing: {
+    form: {
+      iconsShowMode: 'both',
+    },
+  },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png

@@ -150,3 +150,32 @@ test('recurrence form readonly state', async (t) => {
     allowUpdating: false,
   },
 }));
+
+test.meta({ browserSize: [450, 1000] })('recurrence form on mobile screen', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  const appointmentPopup = await scheduler.openAppointmentPopup(t, undefined, false);
+  await appointmentPopup.openRecurrenceForm(t, 'Weekly');
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__appointment__recurrence-form__mobile.png',
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2021, 2, 25),
+  editing: {
+    form: {
+      iconsShowMode: 'both',
+    },
+  },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light)_mask.png

@@ -142,17 +142,52 @@ export class PopupModel {
     return this.element.querySelector('.dx-scheduler-form-day-of-year-group');
   }
 
-  getInput = (editorName: string): dxElementWrapper | undefined => {
+  getInput = (editorName: string): dxElementWrapper => {
     const editor = this.form.getEditor(editorName);
-    return editor?.$element().find('input.dx-texteditor-input');
+
+    const textInput = editor?.$element().find('.dx-texteditor-input');
+
+    if (textInput?.length) {
+      return textInput;
+    }
+
+    const input = editor?.$element().find('input');
+
+    if (input?.length) {
+      return input;
+    }
+
+    throw new Error(`Input element of editor with name "${editorName}" not found`);
+  };
+
+  getInputValue = (editorName: string): string => {
+    const $input = this.getInput(editorName);
+    return $input.val() as unknown as string;
+  };
+
+  setInputValue = (editorName: string, value: string | Date | boolean | null): void => {
+    this.form.getEditor(editorName)?.option('value', value);
   };
 
-  getInputValue = (editorName: string): string | undefined => {
-    const result = this.getInput(editorName)?.val();
-    return result as string | undefined;
+  isInputVisible = (editorName: string): boolean => {
+    const editor = this.form.getEditor(editorName);
+
+    if (!editor) {
+      return false;
+    }
+
+    return editor.$element().is(':visible');
   };
 
-  isInputVisible = (editorName: string): boolean => this.getInput(editorName)?.length === 1;
+  getWeekDaysSelection = (): boolean[] => {
+    const buttons = this.element.querySelectorAll('.dx-scheduler-days-of-week-buttons .dx-button');
+
+    if (buttons.length === 0) {
+      throw new Error('Week day buttons not found');
+    }
+
+    return Array.from(buttons).map((button) => button.classList.contains('dx-button-mode-contained'));
+  };
 
   getLabelIdByText = (labelText: string): string => {
     const labels = Array.from(this.element.querySelectorAll('label'));
@@ -252,7 +287,7 @@ export class PopupModel {
   getTitle = (): HTMLElement | null => document.querySelector('.dx-popup-title .dx-toolbar-label');
 
   getSaveButton = (): HTMLButtonElement => {
-    const saveButton = this.element.querySelector('.dx-button.dx-popup-done') as HTMLButtonElement;
+    const saveButton = this.element.querySelector('.dx-button[aria-label="Save"]') as HTMLButtonElement;
     if (!saveButton) {
       throw new Error('Done button not found');
     }
@@ -268,7 +303,7 @@ export class PopupModel {
   };
 
   getCancelButton = (): HTMLButtonElement => {
-    const cancelButton = this.element.querySelector('.dx-button.dx-popup-cancel') as HTMLButtonElement;
+    const cancelButton = this.element.querySelector('.dx-button[aria-label="Cancel"]') as HTMLButtonElement;
     if (!cancelButton) {
       throw new Error('Cancel button not found');
     }
@@ -340,6 +375,7 @@ export class PopupModel {
 
     if (originalOnValueChanged) {
       originalOnValueChanged({
+        component: repeatEditor,
         value,
         previousValue,
         event: new Event('change'),

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts

@@ -53,6 +53,31 @@ export class SchedulerModel {
     return getTexts(cells);
   }
 
+  getDateTableCell(rowIndex = 0, cellIndex = 0): HTMLElement {
+    const rowSelector = `.dx-scheduler-date-table-row:nth-child(${rowIndex + 1})`;
+    const cellSelector = `.dx-scheduler-date-table-cell:nth-child(${cellIndex + 1})`;
+    const selector = `${rowSelector} ${cellSelector}`;
+
+    const result = this.container.querySelector(selector);
+
+    if (!result) {
+      throw new Error(`Date cell in row ${rowIndex} and column ${cellIndex} not found`);
+    }
+
+    return result as HTMLElement;
+  }
+
+  getAllDayTableCell(cellIndex = 0): HTMLElement {
+    const cellSelector = `.dx-scheduler-all-day-table-cell:nth-child(${cellIndex + 1})`;
+    const result = this.container.querySelector(cellSelector);
+
+    if (!result) {
+      throw new Error(`All-day cell in column ${cellIndex} not found`);
+    }
+
+    return result as HTMLElement;
+  }
+
   getHeaderPanelContent(): string[] {
     const cells = this.container.querySelectorAll('.dx-scheduler-header-panel-cell');
     return getTexts(cells);
@@ -80,6 +105,10 @@ export class SchedulerModel {
     return new PopupModel(popupElement);
   }
 
+  isPopupVisible(): boolean {
+    return this.getPopups().length > 0;
+  }
+
   getPopups = (): NodeListOf<Element> => document.querySelectorAll(`.dx-overlay-wrapper.${APPOINTMENT_POPUP_CLASS}, .dx-overlay-wrapper.${POPUP_DIALOG_CLASS}`);
 
   getLoadPanel = (): HTMLElement | null => document.querySelector('.dx-loadpanel');
@@ -98,6 +127,24 @@ export class SchedulerModel {
 
     return appointment;
   }
+
+  dblClickDateTableCell(rowIndex = 0, cellIndex = 0): void {
+    const cellElement = this.getDateTableCell(rowIndex, cellIndex);
+
+    cellElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+    cellElement.click();
+    cellElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+    cellElement.click();
+  }
+
+  dblClickAllDayTableCell(cellIndex = 0): void {
+    const cellElement = this.getAllDayTableCell(cellIndex);
+
+    cellElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+    cellElement.click();
+    cellElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+    cellElement.click();
+  }
 }
 
 export const createSchedulerModel = (container: HTMLDivElement): SchedulerModel => {