Scheduler: Add testing library helper

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

@@ -1,8 +1,13 @@
+import { within } from '@testing-library/dom';
+
 export class PopupModel {
   element: HTMLDivElement;
 
+  private readonly queries: ReturnType<typeof within>;
+
   constructor(element: HTMLDivElement) {
     this.element = element;
+    this.queries = within(element);
   }
 
   getLabelIdByText = (labelText: string): string => {
@@ -104,27 +109,25 @@ export class PopupModel {
 
   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;
   };
 
-  getCloseButton = (): HTMLButtonElement => {
-    const closeButton = this.element.querySelector('.dx-closebutton.dx-button') as HTMLButtonElement;
-    if (!closeButton) {
-      throw new Error('Close button not found');
-    }
-    return closeButton;
-  };
+  getCloseButton = (): HTMLButtonElement => this.queries.getByRole('button', { name: 'Close' }) as HTMLButtonElement;
 
   getFormEditor = (fieldName: string): HTMLElement | null => {
     const form = this.getForm();
@@ -134,11 +137,5 @@ export class PopupModel {
     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;
-  };
+  getEditSeriesButton = (): HTMLElement => this.queries.getByRole('button', { name: 'Edit series' }) as HTMLElement;
 }

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

@@ -1,3 +1,4 @@
+import { within } from '@testing-library/dom';
 import { ToolbarModel } from '@ts/scheduler/__tests__/__mock__/model/toolbar';
 
 import { APPOINTMENT_POPUP_CLASS } from '../../../appointment_popup/m_popup';
@@ -7,40 +8,51 @@ import { createAppointmentModel } from './appointment';
 import { PopupModel } from './popup';
 
 const getTexts = (
-  cells: NodeListOf<Element>,
+  cells: ArrayLike<Element>,
 ): string[] => Array.from(cells).map((cell) => cell.textContent?.trim() ?? '');
 
 export class SchedulerModel {
   container: HTMLDivElement;
 
+  private readonly queries: ReturnType<typeof within>;
+
   constructor(container: HTMLDivElement) {
     this.container = container;
+    this.queries = within(container);
   }
 
   get popup(): PopupModel {
     return this.getPopup();
   }
 
   get toolbar(): ToolbarModel {
-    return new ToolbarModel(this.container.querySelector('.dx-scheduler-header'));
+    return new ToolbarModel(this.queries.getByRole('toolbar'));
   }
 
   getStatusContent(): string {
-    return this.container.querySelector('.dx-scheduler-a11y-status-container')?.textContent ?? '';
+    const statusElement = this.container.querySelector('.dx-scheduler-a11y-status-container');
+    return statusElement?.textContent ?? '';
   }
 
   getAppointment(text?: string): AppointmentModel<HTMLDivElement | null> {
     if (!text) {
-      return createAppointmentModel(this.container.querySelector('.dx-scheduler-appointment'));
+      const appointments = this.getAppointments();
+      return appointments.length > 0 ? appointments[0] : createAppointmentModel(null);
     }
     return this.getAppointments()
       .find((appointment) => appointment.getText() === text) ?? createAppointmentModel(null);
   }
 
   getAppointments(): AppointmentModel[] {
-    return [...this.container.querySelectorAll('.dx-scheduler-appointment')].map(
-      (element) => createAppointmentModel(element as HTMLDivElement),
-    );
+    const allButtons = this.queries.queryAllByRole('button') as HTMLElement[];
+    const appointments = allButtons.filter((btn) => btn.classList.contains('dx-scheduler-appointment'));
+    return appointments.map((element) => createAppointmentModel(element as HTMLDivElement));
+  }
+
+  getCollectorTexts(): string[] {
+    const allButtons = this.queries.queryAllByRole('button') as HTMLElement[];
+    const collectors = allButtons.filter((btn) => btn.classList.contains('dx-scheduler-appointment-collector'));
+    return getTexts(collectors);
   }
 
   getDateTableContent(): string[] {

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

@@ -1,15 +1,20 @@
+import { within } from '@testing-library/dom';
+
 export class ToolbarModel {
-  element: HTMLDivElement | null;
+  element: HTMLElement;
+
+  private readonly queries: ReturnType<typeof within>;
 
-  constructor(element: HTMLDivElement | null) {
+  constructor(element: HTMLElement) {
     this.element = element;
+    this.queries = within(element);
   }
 
-  getPrevButton(): HTMLDivElement | null | undefined {
-    return this.element?.querySelector('.dx-scheduler-navigator-previous');
+  getPrevButton(): HTMLElement {
+    return this.queries.getByRole('button', { name: 'Previous page' }) as HTMLElement;
   }
 
-  getNextButton(): HTMLDivElement | null | undefined {
-    return this.element?.querySelector('.dx-scheduler-navigator-next');
+  getNextButton(): HTMLElement {
+    return this.queries.getByRole('button', { name: 'Next page' }) as HTMLElement;
   }
 }

packages/devextreme/package.json

@@ -84,6 +84,9 @@
     "@jest/globals": "29.7.0",
     "@stylistic/eslint-plugin": "catalog:",
     "@testcafe-community/axe": "3.5.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/enzyme": "3.10.18",
     "@types/jquery": "3.5.29",
     "@types/react": "16.14.34",