T1255474: fix date calculation if new date is in different timezone because of DST (DevExpress#28973)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/resizeAppointments/T1255474.ts

@@ -0,0 +1,39 @@
+import { compareScreenshot } from 'devextreme-screenshot-comparer';
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { getTimezoneTest, MACHINE_TIMEZONES } from '../../../helpers/machineTimezones';
+import url from '../../../helpers/getPageUrl';
+import createScheduler from './init/widget.setup';
+
+fixture.disablePageReloads`Resize appointment that cross DTC time`
+  .page(url(__dirname, '../../container.html'));
+
+const appointmentText = 'Book Flights to San Fran for Sales Trip';
+
+getTimezoneTest([MACHINE_TIMEZONES.EuropeBerlin])('Resize appointment that cross DTC time', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const appointment = scheduler.getAppointment(appointmentText);
+
+  await t
+    .drag(appointment.resizableHandle.right, 100, 0)
+    .drag(appointment.resizableHandle.right, -100, 0)
+    .expect(
+      await compareScreenshot(t, 'T1255474-resize-all-day-appointment.png', scheduler.element),
+    )
+    .ok();
+}).before(async () => createScheduler({
+  timeZone: 'America/Los_Angeles',
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2021, 2, 28),
+  allDayPanelMode: 'allDay',
+  height: 600,
+  width: 800,
+  firstDayOfWeek: 7,
+  dataSource: [{
+    text: appointmentText,
+    startDate: new Date('2021-03-28T17:00:00.000Z'),
+    endDate: new Date('2021-03-28T18:00:00.000Z'),
+    TimeZone: 'Europe/Belgrade',
+    allDay: true,
+  }],
+}));

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -751,21 +751,37 @@ class SchedulerAppointments extends CollectionWidget {
     });
   }
 
-  updateResizedAppointment($element, dateRange, dataAccessors, timeZoneCalculator) {
+  updateResizedAppointment($element, dateRange: { startDate: Date; endDate: Date }, dataAccessors, timeZoneCalculator) {
     const sourceAppointment = (this as any)._getItemData($element);
 
-    const modifiedAppointmentAdapter = createAppointmentAdapter(
+    const gridAdapter = createAppointmentAdapter(
       sourceAppointment,
       dataAccessors,
       timeZoneCalculator,
-    ).clone();
+    );
+
+    gridAdapter.startDate = new Date(dateRange.startDate);
+    gridAdapter.endDate = new Date(dateRange.endDate);
+
+    /*
+     * T1255474. `dateRange` has dates with 00:00 local time.
+     * If we transform dates fromGrid and back through DST then we'll lose one hour.
+     * TODO(1): refactor computation around DST globally
+     */
+    const convertedBackAdapter = gridAdapter.clone();
+    convertedBackAdapter
+      .calculateDates('fromGrid')
+      .calculateDates('toGrid');
+
+    const startDateDelta = gridAdapter.startDate.getTime() - convertedBackAdapter.startDate.getTime();
+    const endDateDelta = gridAdapter.endDate.getTime() - convertedBackAdapter.endDate.getTime();
 
-    modifiedAppointmentAdapter.startDate = new Date(dateRange.startDate);
-    modifiedAppointmentAdapter.endDate = new Date(dateRange.endDate);
+    gridAdapter.startDate = dateUtilsTs.addOffsets(gridAdapter.startDate, [startDateDelta]);
+    gridAdapter.endDate = dateUtilsTs.addOffsets(gridAdapter.endDate, [endDateDelta]);
 
     this.notifyObserver('updateAppointmentAfterResize', {
       target: sourceAppointment,
-      data: modifiedAppointmentAdapter.clone({ pathTimeZone: 'fromGrid' } as any).source(),
+      data: gridAdapter.calculateDates('fromGrid').source(),
       $appointment: $element,
     });
   }

packages/devextreme/js/__internal/scheduler/m_appointment_adapter.ts

@@ -145,7 +145,7 @@ class AppointmentAdapter {
     });
   }
 
-  clone(options: any = undefined) {
+  clone(options?: { pathTimeZone: string }) {
     const result = new AppointmentAdapter(
       deepExtendArraySafe({}, this.rawAppointment, false, false, false, true),
       this.dataAccessors,
@@ -154,13 +154,19 @@ class AppointmentAdapter {
     );
 
     if (options?.pathTimeZone) {
-      result.startDate = result.calculateStartDate(options.pathTimeZone);
-      result.endDate = result.calculateEndDate(options.pathTimeZone);
+      result.calculateDates(options.pathTimeZone);
     }
 
     return result;
   }
 
+  calculateDates(pathTimeZoneConversion) {
+    this.startDate = this.calculateStartDate(pathTimeZoneConversion);
+    this.endDate = this.calculateEndDate(pathTimeZoneConversion);
+
+    return this;
+  }
+
   source(serializeDate = false) {
     if (serializeDate) {
       // TODO: hack for use dateSerializationFormat

packages/devextreme/js/__internal/scheduler/r1/timezone_calculator/__tests__/timeZoneCalculator.test.ts

@@ -1,7 +1,7 @@
 import {
   beforeEach, describe, expect, it, jest,
 } from '@jest/globals';
-import dateUtils from '@js/core/utils/date';
+import { createTimeZoneCalculator } from '@ts/scheduler/r1/timezone_calculator';
 
 import { TimeZoneCalculator } from '../calculator';
 import type { PathTimeZoneConversion } from '../const';
@@ -46,94 +46,48 @@ describe('TimeZoneCalculator', () => {
     });
 
     [
-      'America/Los_Angeles',
-      undefined,
-    ].forEach((appointmentTimezone) => {
-      ['toGrid', 'fromGrid'].forEach((path) => {
-        it(`should use common time zone [path: ${path}
-        if converting to common timezone, appointmentTimezone: ${appointmentTimezone}]`, () => {
-          const calculator = new TimeZoneCalculator(mock);
-
-          const spy = jest.spyOn(calculator, 'getConvertedDateByOffsets');
-
-          calculator.createDate(
-            sourceDate,
-            {
-              path: path as PathTimeZoneConversion,
-              appointmentTimeZone: appointmentTimezone,
-            },
-          );
-
-          expect(spy)
-            .toBeCalledTimes(1);
-
-          const isBackDirection = path === 'fromGrid';
-
-          expect(spy)
-            .toBeCalledWith(
-              sourceDate,
-              -localOffset / dateUtils.dateToMilliseconds('hour'),
-              commonOffset,
-              isBackDirection,
-            );
-        });
+      { path: 'toGrid' as PathTimeZoneConversion, appointmentTimezone: 'America/Los_Angeles', timezone: 'common' },
+      { path: 'toGrid' as PathTimeZoneConversion, appointmentTimezone: undefined, timezone: 'common' },
+      { path: 'fromGrid' as PathTimeZoneConversion, appointmentTimezone: 'America/Los_Angeles', timezone: 'common' },
+      { path: 'fromGrid' as PathTimeZoneConversion, appointmentTimezone: undefined, timezone: 'common' },
+      { path: 'toAppointment' as PathTimeZoneConversion, appointmentTimezone: 'America/Los_Angeles', timezone: 'appointment' },
+      { path: 'toAppointment' as PathTimeZoneConversion, appointmentTimezone: undefined, timezone: 'common' },
+      { path: 'fromAppointment' as PathTimeZoneConversion, appointmentTimezone: 'America/Los_Angeles', timezone: 'appointment' },
+      { path: 'fromAppointment' as PathTimeZoneConversion, appointmentTimezone: undefined, timezone: 'common' },
+    ].forEach(({ path, appointmentTimezone, timezone }) => {
+      it(`should use ${timezone} timezone [path: ${path}, appointmentTimezone: ${appointmentTimezone}]`, () => {
+        const calculator = createTimeZoneCalculator('America/Los_Angeles');
+        const clientMock = jest.fn().mockReturnValue(0);
+        const commonMock = jest.fn().mockReturnValue(0);
+        const appointmentMock = jest.fn().mockReturnValue(0);
+
+        jest.spyOn(calculator, 'getOffsets').mockImplementation(() => ({
+          get client(): number { return clientMock() as number; },
+          get common(): number { return commonMock() as number; },
+          get appointment(): number { return appointmentMock() as number; },
+        }));
+
+        calculator.createDate(sourceDate, { path, appointmentTimeZone: appointmentTimezone });
+
+        expect(clientMock).toHaveBeenCalledTimes(1);
+        expect(commonMock).toHaveBeenCalledTimes(timezone === 'common' ? 1 : 0);
+        expect(appointmentMock).toHaveBeenCalledTimes(timezone === 'appointment' ? 1 : 0);
       });
     });
 
-    [
-      'America/Los_Angeles',
-      undefined,
-    ].forEach((appointmentTimezone) => {
-      [
-        'toAppointment',
-        'fromAppointment',
-      ].forEach((path) => {
-        it(`if converting to appointment timezone, should use appointment time zone
-              [path: ${path}, appointmentTimezone: ${appointmentTimezone}]`, () => {
-          const calculator = new TimeZoneCalculator(mock);
-
-          const spy = jest.spyOn(calculator, 'getConvertedDateByOffsets');
-
-          calculator.createDate(
-            sourceDate,
-            {
-              path: path as PathTimeZoneConversion,
-              appointmentTimeZone: appointmentTimezone,
-            },
-          );
-
-          expect(spy)
-            .toBeCalledTimes(1);
-
-          const isBackDirectionArg = path === 'fromAppointment';
-          const commonOffsetArg = appointmentTimezone === undefined
-            ? commonOffset
-            : appointmentOffset;
-
-          expect(spy)
-            .toBeCalledWith(
-              sourceDate,
-              -localOffset / dateUtils.dateToMilliseconds('hour'),
-              commonOffsetArg,
-              isBackDirectionArg,
-            );
-        });
-      });
-
-      it('createDate should throw error if wrong path', () => {
-        const calculator = new TimeZoneCalculator(mock);
+    it('createDate should throw error if wrong path', () => {
+      const calculator = new TimeZoneCalculator(mock);
 
-        expect(() => {
-          calculator.createDate(
-            sourceDate,
-            {
-              path: 'WrongPath' as PathTimeZoneConversion,
-              appointmentTimeZone: appointmentTimezone,
-            },
-          );
-        })
-          .toThrow('not specified pathTimeZoneConversion');
-      });
+      expect(() => {
+        calculator.createDate(
+          sourceDate,
+          {
+            path: 'WrongPath' as PathTimeZoneConversion,
+            appointmentTimeZone: 'America/Los_Angeles',
+          },
+        );
+      })
+        .toThrow('not specified pathTimeZoneConversion');
     });
   });
 

packages/devextreme/js/__internal/scheduler/r1/timezone_calculator/calculator.ts

@@ -24,16 +24,16 @@ export class TimeZoneCalculator {
 
     switch (info.path) {
       case PathTimeZoneConversion.fromSourceToAppointment:
-        return this.getConvertedDate(date, info.appointmentTimeZone, true, false);
+        return this.getConvertedDate(date, info.appointmentTimeZone, false);
 
       case PathTimeZoneConversion.fromAppointmentToSource:
-        return this.getConvertedDate(date, info.appointmentTimeZone, true, true);
+        return this.getConvertedDate(date, info.appointmentTimeZone, true);
 
       case PathTimeZoneConversion.fromSourceToGrid:
-        return this.getConvertedDate(date, info.appointmentTimeZone, false, false);
+        return this.getConvertedDate(date, undefined, false);
 
       case PathTimeZoneConversion.fromGridToSource:
-        return this.getConvertedDate(date, info.appointmentTimeZone, false, true);
+        return this.getConvertedDate(date, undefined, true);
 
       default:
         throw new Error('not specified pathTimeZoneConversion');
@@ -52,32 +52,6 @@ export class TimeZoneCalculator {
     };
   }
 
-  // QUnit tests are checked call of this method
-  // eslint-disable-next-line class-methods-use-this
-  getConvertedDateByOffsets(
-    date: Date,
-    clientOffset: number,
-    targetOffset: number,
-    isBack: boolean,
-  ): Date {
-    const direction = isBack
-      ? -1
-      : 1;
-
-    const resultDate = new Date(date);
-    return dateUtilsTs.addOffsets(resultDate, [
-      direction * (toMs('hour') * targetOffset),
-      -direction * (toMs('hour') * clientOffset),
-    ]);
-
-    // V1
-    // NOTE: Previous date calculation engine.
-    // Engine was changed after fix T1078292.
-    // eslint-disable-next-line max-len
-    // const utcDate = date.getTime() - direction * clientOffset * dateUtils.dateToMilliseconds('hour');
-    // return new Date(utcDate + direction * targetOffset * dateUtils.dateToMilliseconds('hour'));
-  }
-
   getOriginStartDateOffsetInMs(
     date: Date,
     timezone: string | undefined,
@@ -123,16 +97,16 @@ export class TimeZoneCalculator {
   protected getConvertedDate(
     date: Date,
     appointmentTimezone: string | undefined,
-    useAppointmentTimeZone: boolean,
     isBack: boolean,
   ): Date {
     const newDate = new Date(date.getTime());
     const offsets = this.getOffsets(newDate, appointmentTimezone);
+    const targetOffsetName = appointmentTimezone ? 'appointment' : 'common';
+    const direction = isBack ? -1 : 1;
 
-    if (useAppointmentTimeZone && !!appointmentTimezone) {
-      return this.getConvertedDateByOffsets(date, offsets.client, offsets.appointment, isBack);
-    }
-
-    return this.getConvertedDateByOffsets(date, offsets.client, offsets.common, isBack);
+    return dateUtilsTs.addOffsets(newDate, [
+      direction * toMs('hour') * offsets[targetOffsetName],
+      -direction * toMs('hour') * offsets.client,
+    ]);
   }
 }