Scheduler: refactor integration appointment form popup test (#31138)

Author: aleksei-semikozov

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

@@ -14,6 +14,7 @@ export const createScheduler = async (config: Config): Promise<{
   const container = document.createElement('div');
   const scheduler = new Scheduler(container, config);
   await new Promise(process.nextTick);
+  document.body.appendChild(container);
 
   return {
     container,

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

@@ -0,0 +1,136 @@
+export class PopupModel {
+  element: HTMLDivElement;
+
+  constructor(element: HTMLDivElement) {
+    this.element = element;
+  }
+
+  getLabelIdByText = (labelText: string): string => {
+    const labels = Array.from(this.element.querySelectorAll('label'));
+
+    const label = labels.find((l) => l?.textContent?.trim()?.startsWith(labelText));
+
+    if (!label) {
+      throw new Error(`Label with text "${labelText}" not found`);
+    }
+
+    const forId = label.getAttribute('for');
+    if (!forId) {
+      throw new Error(`Label with text "${labelText}" has no "for" attribute`);
+    }
+    return forId;
+  };
+
+  getInputByLabel = (labelText: string): HTMLInputElement => {
+    const forId = this.getLabelIdByText(labelText);
+
+    const input = this.element.querySelector(`input#${forId}`) as HTMLInputElement;
+
+    if (!input) {
+      throw new Error(`Input with id "${forId}" not found`);
+    }
+
+    return input;
+  };
+
+  setInputValueByLabel = (labelText: string, value: string): HTMLInputElement => {
+    const input = this.getInputByLabel(labelText);
+    if (!input) {
+      throw new Error(`Input with label "${labelText}" not found`);
+    }
+    input.value = '';
+
+    value.split('').forEach((char) => {
+      input.value += char;
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: char }));
+      input.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true, key: char }));
+      input.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, key: char }));
+    });
+
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+
+    return input;
+  };
+
+  getSwitchByName = (name: string): HTMLInputElement => {
+    const hiddenInput = this.element.querySelector<HTMLInputElement>(`input[name=${name}]`);
+
+    if (!hiddenInput) {
+      throw new Error(`Switch with name "${name}" not found`);
+    }
+
+    return hiddenInput;
+  };
+
+  selectRadio = (value: string): Element | null => {
+    const group = this.element.querySelector('[role="radiogroup"]');
+    if (!group) throw new Error('Radiogroup not found');
+
+    const radios = Array.from(group.querySelectorAll('[role="radio"]'));
+
+    const target = radios.find((radio) => {
+      const label = radio.getAttribute('aria-label')?.trim();
+      const text = radio.textContent?.trim();
+      return label === value || text === value;
+    });
+
+    if (!target) throw new Error(`Radio with value "${value}" not found`);
+
+    radios.forEach((r) => {
+      r.setAttribute('aria-checked', 'false');
+      r.classList.remove('dx-item-selected', 'dx-radiobutton-checked');
+    });
+
+    target.setAttribute('aria-checked', 'true');
+    target.classList.add('dx-item-selected', 'dx-radiobutton-checked');
+
+    target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    return target;
+  };
+
+  getSelectedRadio = (): HTMLElement | null => this.element.querySelector('[role="radio"][aria-checked="true"]');
+
+  getSelectedRadioValue = (): string | null => {
+    const selected = this.getSelectedRadio();
+    return selected?.getAttribute('aria-label') ?? selected?.textContent?.trim() ?? null;
+  };
+
+  getForm = (): HTMLElement | null => this.element.querySelector('.dx-form');
+
+  getTitle = (): HTMLElement | null => document.querySelector('.dx-popup-title');
+
+  getDoneButton = (): HTMLButtonElement => {
+    const doneButton = this.element.querySelector('.dx-button.dx-popup-done') as HTMLButtonElement;
+    if (!doneButton) {
+      throw new Error('Done button not found');
+    }
+    return doneButton;
+  };
+
+  getCancelButton = (): HTMLButtonElement => {
+    const cancelButton = this.element.querySelector('.dx-button.dx-popup-cancel') as HTMLButtonElement;
+    if (!cancelButton) {
+      throw new Error('Cancel button not found');
+    }
+    return cancelButton;
+  };
+
+  getFormEditor = (fieldName: string): HTMLElement | null => {
+    const form = this.getForm();
+    if (form === null) {
+      return null;
+    }
+    return form.querySelector(`[data-field="${fieldName}"]`);
+  };
+
+  getEditSeriesButton = (): HTMLElement => {
+    const editSeriesButton = document.querySelector('[aria-label="Edit series"]') as HTMLElement;
+    if (!editSeriesButton) {
+      throw new Error('Edit series button not found');
+    }
+    return editSeriesButton;
+  };
+}

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

@@ -1,42 +1,92 @@
+import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/m_popup';
+import { POPUP_DIALOG_CLASS } from '../../../m_scheduler';
 import type { AppointmentModel } from './appointment';
 import { createAppointmentModel } from './appointment';
+import { PopupModel } from './popup';
 
 const getTexts = (
   cells: NodeListOf<Element>,
 ): string[] => Array.from(cells).map((cell) => cell.textContent?.trim() ?? '');
 
-export interface SchedulerModel {
-  getAppointment: () => AppointmentModel<HTMLDivElement | null>;
-  getAppointments: () => AppointmentModel[];
-  getDateTableContent: () => string[];
-  getHeaderPanelContent: () => string[];
-  getTimePanelContent: () => string[];
-  getGroupTableContent: () => string[];
-}
+export class SchedulerModel {
+  container: HTMLDivElement;
+
+  constructor(container: HTMLDivElement) {
+    this.container = container;
+  }
+
+  get popup(): PopupModel {
+    return this.getPopup();
+  }
+
+  getAppointment(text?: string): AppointmentModel<HTMLDivElement | null> {
+    if (!text) {
+      return createAppointmentModel(this.container.querySelector('.dx-scheduler-appointment'));
+    }
+    return this.getAppointments()
+      .find((appointment) => appointment.getText() === text) ?? createAppointmentModel(null);
+  }
 
-export const createSchedulerModel = (container: HTMLDivElement): SchedulerModel => ({
-  getAppointment(): AppointmentModel<HTMLDivElement | null> {
-    return createAppointmentModel(container.querySelector('.dx-scheduler-appointment'));
-  },
   getAppointments(): AppointmentModel[] {
-    return [...container.querySelectorAll('.dx-scheduler-appointment')].map(
+    return [...this.container.querySelectorAll('.dx-scheduler-appointment')].map(
       (element) => createAppointmentModel(element as HTMLDivElement),
     );
-  },
+  }
+
   getDateTableContent(): string[] {
-    const cells = container.querySelectorAll('.dx-scheduler-date-table-cell');
+    const cells = this.container.querySelectorAll('.dx-scheduler-date-table-cell');
     return getTexts(cells);
-  },
+  }
+
   getHeaderPanelContent(): string[] {
-    const cells = container.querySelectorAll('.dx-scheduler-header-panel-cell');
+    const cells = this.container.querySelectorAll('.dx-scheduler-header-panel-cell');
     return getTexts(cells);
-  },
+  }
+
   getTimePanelContent(): string[] {
-    const cells = container.querySelectorAll('.dx-scheduler-time-panel-cell');
+    const cells = this.container.querySelectorAll('.dx-scheduler-time-panel-cell');
     return getTexts(cells);
-  },
+  }
+
   getGroupTableContent(): string[] {
-    const cells = container.querySelectorAll('.dx-scheduler-group-header');
+    const cells = this.container.querySelectorAll('.dx-scheduler-group-header');
     return getTexts(cells);
-  },
-});
+  }
+
+  private getPopup(): PopupModel {
+    const elements = this.getPopups();
+
+    if (elements.length === 0) {
+      throw new Error('Popup is not rendered');
+    }
+
+    const popupElement = elements[0] as HTMLDivElement;
+
+    return new PopupModel(popupElement);
+  }
+
+  getPopups = (): NodeListOf<Element> => document.querySelectorAll(`.dx-overlay-wrapper.${APPOINTMENT_POPUP_CLASS}, .dx-overlay-wrapper.${POPUP_DIALOG_CLASS}`);
+
+  getLoadPanel = (): HTMLElement | null => document.querySelector('.dx-loadpanel');
+
+  getTooltipAppointment = (): HTMLElement | null => document.querySelector('.dx-tooltip-appointment-item');
+
+  openPopupByDblClick(text?: string): AppointmentModel {
+    const appointment = this.getAppointment(text) as AppointmentModel;
+
+    if (!appointment?.element) {
+      throw new Error(`Appointment "${text}" not found`);
+    }
+
+    appointment.element.click();
+    appointment.element.click();
+
+    return appointment;
+  }
+}
+
+export const createSchedulerModel = (container: HTMLDivElement): SchedulerModel => {
+  const model = new SchedulerModel(container);
+
+  return model;
+};