Scheduler: refactor recurrence tests by jest

Author: Ambrozy

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

@@ -1,4 +1,5 @@
 import { jest } from '@jest/globals';
+import { logger } from '@ts/core/utils/m_console';
 import DOMComponent from '@ts/core/widget/dom_component';
 
 import SchedulerWorkSpace from '../../workspaces/m_work_space';
@@ -16,6 +17,7 @@ export const setupSchedulerTestEnvironment = ({
   width = DEFAULT_CELL_WIDTH,
   height = DEFAULT_CELL_HEIGHT,
 }: SetupSchedulerTestEnvironmentOptions = {}): void => {
+  jest.spyOn(logger, 'warn').mockImplementation(() => {});
   DOMComponent.prototype._isVisible = jest.fn((): boolean => true);
   SchedulerWorkSpace.prototype._createCrossScrollingConfig = (): {
     direction: string;

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

@@ -0,0 +1,63 @@
+const EMPTY_POSITION = {
+  top: 0, left: 0, width: 0, height: 0,
+};
+
+type Position = typeof EMPTY_POSITION;
+export interface AppointmentModel<T = HTMLDivElement> {
+  element: T;
+  getText: () => string;
+  getDisplayDate: () => string;
+  getAriaLabel: () => string;
+  getGeometry: () => Position;
+  getColor: (view: string) => string | undefined;
+  getSnapshot: () => object;
+}
+
+const getColor = (appointment: HTMLDivElement): string => appointment.style.backgroundColor;
+const getAgendaColor = (appointment: HTMLDivElement): string => {
+  const marker = appointment.querySelector('.dx-scheduler-agenda-appointment-marker') as HTMLDivElement;
+  return getColor(marker);
+};
+const getText = (element: HTMLDivElement | null): string => element?.querySelector('.dx-scheduler-appointment-title')?.textContent ?? '';
+const getDisplayDate = (element: HTMLDivElement | null): string => element?.querySelector('.dx-scheduler-appointment-content-date')?.textContent ?? '';
+const getGeometry = (element: HTMLDivElement | null): Position => {
+  if (!element) {
+    return EMPTY_POSITION;
+  }
+
+  const match = /translate\(([0-9.]*)px, ([0-9.]*)px\)/.exec(element.style.transform);
+  if (!match) {
+    return EMPTY_POSITION;
+  }
+
+  return {
+    top: parseInt(match[2], 10),
+    left: parseInt(match[1], 10),
+    width: parseInt(element.style.width, 10),
+    height: parseInt(element.style.height, 10),
+  };
+};
+
+export const createAppointmentModel = <T extends HTMLDivElement | null>(
+  element: T,
+): AppointmentModel<T> => ({
+    element,
+    getText: () => getText(element),
+    getDisplayDate: () => getDisplayDate(element),
+    getAriaLabel: () => element?.getAttribute('aria-label') ?? '',
+    getGeometry: () => getGeometry(element),
+    getColor(view: string): string | undefined {
+      if (!element) {
+        return undefined;
+      }
+
+      return view === 'agenda'
+        ? getAgendaColor(element)
+        : getColor(element);
+    },
+    getSnapshot: (): object => ({
+      text: getText(element),
+      date: getDisplayDate(element),
+      ...getGeometry(element),
+    }),
+  });

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

@@ -1,36 +1,27 @@
-const getAppointmentColor = (container: HTMLDivElement): string => {
-  const appointment = container.querySelector('.dx-scheduler-appointment') as HTMLDivElement;
-  return appointment.style.backgroundColor;
-};
-const getAgendaAppointmentColor = (container: HTMLDivElement): string => {
-  const appointment = container.querySelector('.dx-scheduler-agenda-appointment-marker') as HTMLDivElement;
-  return appointment.style.backgroundColor;
-};
+import type { AppointmentModel } from './appointment';
+import { createAppointmentModel } from './appointment';
+
 const getTexts = (
   cells: NodeListOf<Element>,
 ): string[] => Array.from(cells).map((cell) => cell.textContent?.trim() ?? '');
 
 export interface SchedulerModel {
-  getAppointment: () => HTMLDivElement | null;
-  getAppointments: () => NodeListOf<HTMLDivElement>;
-  getAppointmentColor: (view: string) => string;
+  getAppointment: () => AppointmentModel<HTMLDivElement | null>;
+  getAppointments: () => AppointmentModel[];
   getDateTableContent: () => string[];
   getHeaderPanelContent: () => string[];
   getTimePanelContent: () => string[];
   getGroupTableContent: () => string[];
 }
 
 export const createSchedulerModel = (container: HTMLDivElement): SchedulerModel => ({
-  getAppointment(): HTMLDivElement | null {
-    return container.querySelector('.dx-scheduler-appointment');
-  },
-  getAppointments(): NodeListOf<HTMLDivElement> {
-    return container.querySelectorAll('.dx-scheduler-appointment');
+  getAppointment(): AppointmentModel<HTMLDivElement | null> {
+    return createAppointmentModel(container.querySelector('.dx-scheduler-appointment'));
   },
-  getAppointmentColor(view: string): string {
-    return view === 'agenda'
-      ? getAgendaAppointmentColor(container)
-      : getAppointmentColor(container);
+  getAppointments(): AppointmentModel[] {
+    return [...container.querySelectorAll('.dx-scheduler-appointment')].map(
+      (element) => createAppointmentModel(element as HTMLDivElement),
+    );
   },
   getDateTableContent(): string[] {
     const cells = container.querySelectorAll('.dx-scheduler-date-table-cell');

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

@@ -20,6 +20,6 @@ describe('Appointments', () => {
     });
 
     const appointment = POM.getAppointment();
-    expect(appointment && !appointment.classList.contains('dx-resizable')).toBe(true);
+    expect(appointment.element && !appointment.element.classList.contains('dx-resizable')).toBe(true);
   });
 });

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

@@ -0,0 +1,31 @@
+/**
+ * @timezone Pacific/Auckland
+ */
+
+import {
+  describe, expect, it,
+} from '@jest/globals';
+
+import { createScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+describe('Recurrence appointments', () => {
+  it('Weekly appointment should show in correct day and hours (T1185479)', async () => {
+    setupSchedulerTestEnvironment();
+    const { POM } = await createScheduler({
+      dataSource: [{
+        startDate: new Date(2023, 3, 27, 1),
+        endDate: new Date(2023, 3, 27, 2),
+        allDay: false,
+        text: 'Weekly meeting',
+        recurrenceRule: 'FREQ=WEEKLY;BYDAY=TH',
+      }],
+      currentView: 'week',
+      currentDate: new Date(2023, 3, 27),
+    });
+
+    const appointment = POM.getAppointment();
+    expect(appointment.getAriaLabel()).toBe('Weekly meeting: April 27, 2023, 1:00 AM - 2:00 AM');
+    expect(appointment.getDisplayDate()).toBe('1:00 AM - 2:00 AM');
+  });
+});

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

@@ -53,7 +53,7 @@ describe('Resources', () => {
       await dataPromise;
       await new Promise(process.nextTick);
 
-      expect(POM.getAppointmentColor(view)).toBe(rooms[0].color);
+      expect(POM.getAppointment().getColor(view)).toBe(rooms[0].color);
     });
 
     it('should render correct appointment color for local datasource (T1300252)', async () => {
@@ -71,7 +71,7 @@ describe('Resources', () => {
         }],
       });
 
-      expect(POM.getAppointmentColor(view)).toBe(rooms[0].color);
+      expect(POM.getAppointment().getColor(view)).toBe(rooms[0].color);
     });
 
     it('should render appointments after resources update (T1301345)', async () => {
@@ -95,7 +95,7 @@ describe('Resources', () => {
       }]);
       await new Promise(process.nextTick);
 
-      expect(POM.getAppointmentColor(view)).toBe(rooms2[0].color);
+      expect(POM.getAppointment().getColor(view)).toBe(rooms2[0].color);
     });
   });
 });

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

@@ -35,7 +35,7 @@ describe('views', () => {
     await new Promise(process.nextTick);
 
     const appointment = POM.getAppointment();
-    expect(appointment !== null).toBe(true);
+    expect(appointment.element !== null).toBe(true);
   });
 
   it('should render all-day appointment correctly with fractional cell values', async () => {

packages/devextreme/js/__internal/scheduler/m_recurrence.pacific.test.ts

@@ -0,0 +1,5 @@
+/**
+ * @timezone America/Los_Angeles
+ */
+
+import './m_recurrence.test';