Fix date picker timezone issue

projects/components/src/datetime-picker/datetime-picker.component.test.ts

@@ -1,41 +1,38 @@
 import { Time } from '@hypertrace/common';
+import { DatetimePickerComponent, InputComponent, LabelComponent, TimePickerComponent } from '@hypertrace/components';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
-import { InputComponent } from '../input/input.component';
-import { LabelComponent } from './../label/label.component';
-import { TimePickerComponent } from './../time-picker/time-picker.component';
-import { DatetimePickerComponent } from './datetime-picker.component';
 
 describe('Date Time Picker Component', () => {
   let spectator: SpectatorHost<DatetimePickerComponent>;
-
+  const onDateChangeSpy = jest.fn();
+  const initDate = new Date();
   const createHost = createHostFactory({
     component: DatetimePickerComponent,
     shallow: true,
     declarations: [MockComponent(LabelComponent), MockComponent(InputComponent), MockComponent(TimePickerComponent)]
   });
 
-  test('should render all elements correctly', () => {
-    const onDateChangeSpy = jest.fn();
-    const date = new Date();
-
+  beforeEach(() => {
     spectator = createHost(
       `<ht-datetime-picker [date]="date" [showTimeTriggerIcon]="showTimeTriggerIcon" (dateChange)="onDateChange($event)"></ht-datetime-picker>`,
       {
         hostProps: {
-          date: date,
+          date: initDate,
           showTimeTriggerIcon: false,
           onDateChange: onDateChangeSpy
         }
       }
     );
+  });
 
+  test('should render all elements correctly', () => {
     expect(spectator.query(LabelComponent)).not.toExist();
-    expect(spectator.query(InputComponent)?.value).toEqual(date.toISOString().slice(0, 10));
+    expect(spectator.query(InputComponent)?.value).toEqual(initDate.toISOString().slice(0, 10));
 
     const timePicker = spectator.query(TimePickerComponent);
     expect(timePicker).toExist();
-    expect(timePicker?.time).toEqual(new Time(date.getHours(), date.getMinutes()));
+    expect(timePicker?.time).toEqual(new Time(initDate.getHours(), initDate.getMinutes()));
     expect(timePicker?.showTimeTriggerIcon).toEqual(false);
 
     spectator.triggerEventHandler(InputComponent, 'valueChange', '2020-10-10');
@@ -48,4 +45,38 @@ describe('Date Time Picker Component', () => {
     changedDate.setMinutes(changedTime.minutes);
     expect(onDateChangeSpy).toHaveBeenCalledWith(changedDate);
   });
+
+  test('date should not get effected when time is updated', () => {
+    const validationSet = [
+      {
+        date: new Date('2020-10-10'),
+        time: new Time(18, 10, 0, 0, true),
+        expected: '2020-10-10'
+      },
+      {
+        date: new Date('2020-1-1'),
+        time: new Time(0, 30, 0, 0, true),
+        expected: '2020-01-01'
+      },
+      {
+        date: new Date('2020-1-1'),
+        time: new Time(23, 59, 0, 0, true),
+        expected: '2020-01-01'
+      },
+      {
+        date: new Date('2020-1-1'),
+        time: new Time(0, 0, 0, 0, true),
+        expected: '2020-01-01'
+      }
+    ];
+
+    validationSet.forEach(({ date, time, expected }) => {
+      spectator.setHostInput({ date: date });
+      spectator.triggerEventHandler(TimePickerComponent, 'timeChange', time);
+      const changedDate = new Date(date.valueOf());
+      changedDate.setHours(time.hours, time.minutes);
+      expect(onDateChangeSpy).toHaveBeenCalledWith(changedDate);
+      expect(spectator.component.getInputDate()).toEqual(expected);
+    });
+  });
 });

projects/components/src/datetime-picker/datetime-picker.component.ts

@@ -71,7 +71,7 @@ export class DatetimePickerComponent implements OnChanges {
 
   public onTimeChange(time: Time): void {
     this.time = time;
-    this.date?.setHours(time.hours, time.minutes, time.seconds, time.milliseconds);
+    this.date?.setUTCHours(time.hours, time.minutes, time.seconds, time.milliseconds);
     this.dateChange.emit(this.date);
   }
 }

projects/components/src/time-range/predefined-time.service.ts

@@ -16,8 +16,8 @@ export class PredefinedTimeService {
 
     for (let hour = 0; hour < 24; hour++) {
       // Could have an inner loop here, but this seems fine.
-      times.push(new Time(hour, 0));
-      times.push(new Time(hour, 30));
+      times.push(new Time(hour, 0, 0, 0, true));
+      times.push(new Time(hour, 30, 0, 0, true));
     }
 
     return times;