Scheduler: fix options updating on view change (T1297019, T1301345) (#30504)

Ambrozy · web-flow · commit ee2ff0e6ba3f · 2025-07-28T11:23:17.000+02:00
Co-authored-by: Vladimir Bushmanov &lt;vladimir.bushmanov@devexpress.com&gt;
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_scheduler.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_scheduler.ts
@@ -0,0 +1,18 @@
+import Scheduler from '@ts/scheduler/m_scheduler';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Config = any;
+
+export const createScheduler = async (config: Config): Promise<{
+  container: HTMLDivElement;
+  scheduler: Scheduler;
+}> => {
+  const container = document.createElement('div');
+  const scheduler = new Scheduler(container, config);
+  await new Promise(process.nextTick);
+
+  return {
+    container,
+    scheduler,
+  };
+};
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/m_mock_scheduler.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/m_mock_scheduler.ts
@@ -3,13 +3,12 @@ import DOMComponent from '@ts/core/widget/dom_component';
 
 import SchedulerWorkSpace from '../../workspaces/m_work_space';
 
-export const setupSchedulerTestEnvironment = ({
-  cellWidth,
-  cellHeight,
-} = {
-  cellWidth: 250,
-  cellHeight: 80,
-}): void => {
+export const setupSchedulerTestEnvironment = (
+  isTimelineView = false,
+): void => {
+  const cellWidth = 250;
+  const cellHeight = isTimelineView ? 450 : 80;
+
   (DOMComponent.prototype as any)._isVisible = jest.fn().mockReturnValue(true);
   SchedulerWorkSpace.prototype._createCrossScrollingConfig = () => ({
     direction: 'both',
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/performance.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/performance.test.ts
@@ -1,10 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   beforeEach, describe, expect, it, jest,
 } from '@jest/globals';
 
-import Scheduler from '../m_scheduler';
 import timezoneUtils from '../m_utils_time_zone';
+import { createScheduler } from './__mock__/create_scheduler';
 
 const startDate = new Date(2025, 0, 6);
 const delta = 15 * 60 * 1000;
@@ -15,8 +14,7 @@ const dataSource = Array.from({ length: 10 }, (_, i) => ({
   text: `Appointment ${i + 1}`,
 }));
 
-// TODO: fix during T1297019
-describe.skip('scheduler', () => {
+describe('scheduler', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -25,8 +23,7 @@ describe.skip('scheduler', () => {
     { timeZone: 'Europe/London' },
     { timeZone: undefined },
   ])('should memo Intl object for timezone: $timeZone', async ({ timeZone }) => {
-    const container = document.createElement('div');
-    const scheduler = new Scheduler(container, {
+    const { container } = await createScheduler({
       dataSource,
       timeZone,
       views: ['week'],
@@ -35,7 +32,7 @@ describe.skip('scheduler', () => {
       startDayHour: 8,
       firstDayOfWeek: 1,
       height: 600,
-    } as any);
+    });
     await timezoneUtils.cacheTimeZones();
 
     expect(container.classList).toContain('dx-scheduler');
@@ -49,6 +46,6 @@ describe.skip('scheduler', () => {
     nextButton.click();
     expect(navigator.querySelector('.dx-scheduler-navigator-caption')?.textContent).toBe('20-26 January 2025');
 
-    expect(Intl.DateTimeFormat).toHaveBeenCalledTimes(0);
+    expect(Intl.DateTimeFormat).toHaveBeenCalledTimes(timeZone ? 0 : 1);
   });
 });
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/resources.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/resources.test.ts
@@ -1,12 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import {
   describe, expect, it,
 } from '@jest/globals';
 import { DataSource } from '@ts/data/data_source/m_data_source';
 import CustomStore from '@ts/data/m_custom_store';
+import { createScheduler } from '@ts/scheduler/__tests__/__mock__/create_scheduler';
 
-import Scheduler from '../m_scheduler';
 import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
 
 const dataSource = [
@@ -21,58 +19,95 @@ const dataSource = [
 const rooms = [
   { id: 1, text: 'Room 2', color: 'rgb(142, 205, 60)' },
 ];
+const rooms2 = [
+  { id: 1, text: 'Room 2', color: 'rgb(60, 154, 205)' },
+];
 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;
+};
 
 describe('Resources', () => {
-  it('should render correct appointment color for remote datasource (T1300252)', async () => {
-    setupSchedulerTestEnvironment();
+  describe.each([
+    'month',
+    'agenda',
+  ])('%s view', (view) => {
+    const getColor = view === 'agenda'
+      ? getAgendaAppointmentColor
+      : getAppointmentColor;
 
-    const dataPromise = new Promise((resolve) => {
-      setTimeout(resolve, 100, rooms);
-    });
-    const container = document.createElement('div');
-    const scheduler = new Scheduler(container, {
-      views: ['month'],
-      currentView: 'month',
-      currentDate: new Date(2024, 8, 8),
-      dataSource,
-      resources: [{
-        fieldExpr: 'roomId',
-        label: 'Room',
-        dataSource: new DataSource({
-          store: new CustomStore({
-            load: () => dataPromise,
+    it('should render correct appointment color for remote datasource (T1300252)', async () => {
+      setupSchedulerTestEnvironment();
+
+      const dataPromise = new Promise((resolve) => {
+        setTimeout(resolve, 100, rooms);
+      });
+      const { container } = await createScheduler({
+        views: [view],
+        currentView: view,
+        currentDate: new Date(2024, 8, 7),
+        dataSource,
+        resources: [{
+          fieldExpr: 'roomId',
+          label: 'Room',
+          dataSource: new DataSource({
+            store: new CustomStore({
+              load: () => dataPromise,
+            }),
+            paginate: false,
           }),
-          paginate: false,
-        }),
-      }],
-    } as any);
-    await dataPromise;
-    await new Promise(process.nextTick);
+        }],
+      });
+      await dataPromise;
+      await new Promise(process.nextTick);
 
-    expect(getAppointmentColor(container)).toBe(rooms[0].color);
-  });
+      expect(getColor(container)).toBe(rooms[0].color);
+    });
 
-  it('should render correct appointment color for local datasource (T1300252)', async () => {
-    setupSchedulerTestEnvironment();
+    it('should render correct appointment color for local datasource (T1300252)', async () => {
+      setupSchedulerTestEnvironment();
 
-    const container = document.createElement('div');
-    const scheduler = new Scheduler(container, {
-      views: ['month'],
-      currentView: 'month',
-      currentDate: new Date(2024, 8, 8),
-      dataSource,
-      resources: [{
+      const { container } = await createScheduler({
+        views: [view],
+        currentView: view,
+        currentDate: new Date(2024, 8, 7),
+        dataSource,
+        resources: [{
+          fieldExpr: 'roomId',
+          label: 'Room',
+          dataSource: rooms,
+        }],
+      });
+
+      expect(getColor(container)).toBe(rooms[0].color);
+    });
+
+    it('should render appointments after resources update (T1301345)', async () => {
+      setupSchedulerTestEnvironment();
+
+      const { container, scheduler } = await createScheduler({
+        views: [view],
+        currentView: view,
+        currentDate: new Date(2024, 8, 7),
+        dataSource,
+        resources: [{
+          fieldExpr: 'roomId',
+          label: 'Room',
+          dataSource: rooms,
+        }],
+      });
+      scheduler.option('resources', [{
         fieldExpr: 'roomId',
         label: 'Room',
-        dataSource: rooms,
-      }],
-    } as any);
-    await new Promise(process.nextTick);
+        dataSource: rooms2,
+      }]);
+      await new Promise(process.nextTick);
 
-    expect(getAppointmentColor(container)).toBe(rooms[0].color);
+      expect(getColor(container)).toBe(rooms2[0].color);
+    });
   });
 });
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/santiago_timezone.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/santiago_timezone.test.ts
@@ -1,13 +1,12 @@
 /**
  * @timezone America/Santiago
  */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 
 import {
   describe, expect, it,
 } from '@jest/globals';
 
-import Scheduler from '../m_scheduler';
+import { createScheduler } from './__mock__/create_scheduler';
 import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
 
 const dataSource = [
@@ -104,22 +103,17 @@ const getTexts = (
 
 describe('scheduler', () => {
   it.each(views)('should render correct workspace in Santiago DST for view: $view.name', async ({ view, result }) => {
-    setupSchedulerTestEnvironment({
-      cellWidth: 250,
-      cellHeight: view.name.includes('Timeline') ? 450 : 80,
-    });
+    setupSchedulerTestEnvironment(true);
 
-    const container = document.createElement('div');
-    const scheduler = new Scheduler(container, {
+    const { container } = await createScheduler({
       views: [view],
       currentView: view.name,
       currentDate: new Date(2024, 8, 8),
       height: 600,
       cellDuration: 60,
       firstDayOfWeek: 1,
       dataSource,
-    } as any);
-    await new Promise(process.nextTick);
+    });
 
     if (result.hasCellContent) {
       const cells = container.querySelectorAll('.dx-scheduler-date-table-cell');
diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/views.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/views.test.ts
@@ -0,0 +1,40 @@
+import {
+  describe, expect, it,
+} from '@jest/globals';
+
+import { createScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+describe('views', () => {
+  it('should render appointment after view change (T1297019)', async () => {
+    setupSchedulerTestEnvironment();
+    const { container, scheduler } = await createScheduler({
+      timeZone: 'Etc/UTC',
+      dataSource: [{
+        text: 'Appointment',
+        startDate: new Date('2021-02-02T08:00:00.000Z'),
+        endDate: new Date('2021-02-02T20:00:00.000Z'),
+        allDay: true,
+      }],
+      views: [{
+        type: 'day',
+        allDayPanelMode: 'hidden',
+      }, {
+        allDayPanelMode: 'all',
+        type: 'timelineDay',
+      }],
+      currentView: 'timelineDay',
+      currentDate: new Date('2021-02-02T10:00:00.000Z'),
+      startDayHour: 8,
+      endDayHour: 20,
+      showAllDayPanel: false,
+      height: 730,
+    });
+
+    scheduler.option('currentView', 'day');
+    await new Promise(process.nextTick);
+
+    const appointment = container.querySelector('.dx-scheduler-appointment');
+    expect(appointment !== null).toBe(true);
+  });
+});
diff --git a/packages/devextreme/js/__internal/scheduler/m_scheduler.ts b/packages/devextreme/js/__internal/scheduler/m_scheduler.ts
@@ -767,7 +767,6 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       allDayPanelMode: () => this.getViewOption('allDayPanelMode'),
       showAllDayPanel: () => this.option('showAllDayPanel'),
       getResourceManager: () => this.resourceManager,
-      getLoadedResources: () => this.option('loadedResources'),
       getIsVirtualScrolling: () => this.isVirtualScrolling(),
       getSupportAllDayRow: () => this._workSpace.supportAllDayRow(),
       getViewType: () => this._workSpace.type,
