Adding minor improvements to stories, visibleMonths setter and tests

Author: Ivan Kitanov

src/components/calendar/helpers.ts

@@ -93,16 +93,14 @@ export function convertToDateRange(
 
   if (isString(value)) {
     const obj = JSON.parse(value);
-    if (obj.start && obj.end) {
-      return {
-        start: isValidDate(new Date(obj.start)),
-        end: isValidDate(new Date(obj.end)),
-      };
-    }
-  } else {
-    return value;
+    const start = isValidDate(new Date(obj.start));
+    const end = isValidDate(new Date(obj.end));
+    return {
+      start: start ? CalendarDay.from(start).native : null,
+      end: end ? CalendarDay.from(end).native : null,
+    };
   }
-  return null;
+  return value;
 }
 
 /**

src/components/date-range-picker/date-range-picker.spec.ts

@@ -717,6 +717,7 @@ describe('Date range picker', () => {
 
         dateTimeInputs[1].focus();
         // first arrow sets today, second sets aMonthAgo
+        dateTimeInputs[1].setSelectionRange(0, 1); // make sure caret is on the month part (MM/dd/yyyy)
         simulateKeyboard(dateTimeInputs[1], arrowDown);
         simulateKeyboard(dateTimeInputs[1], arrowDown);
         await elementUpdated(picker);
@@ -1259,14 +1260,99 @@ describe('Date range picker', () => {
         simulateKeyboard(dateTimeInputs[0], arrowUp);
         await elementUpdated(picker);
 
-        expect(eventSpy).calledWith('igcInput');
+        expect(eventSpy).calledWith('igcInput', {
+          detail: { start: today.native, end: null },
+        });
         eventSpy.resetHistory();
 
+        dateTimeInputs[0].setSelectionRange(0, 1); // make sure caret is on the month part (MM/dd/yyyy)
         simulateKeyboard(dateTimeInputs[0], arrowDown);
         await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput', {
+          detail: { start: today.add('month', -1).native, end: null },
+        });
+        eventSpy.resetHistory();
+
+        dateTimeInputs[0].blur();
+        expect(eventSpy).calledWith('igcChange', {
+          detail: { start: today.add('month', -1).native, end: null },
+        });
       });
 
-      it('should set the calendar active date to the start of the range while typing', async () => {});
+      it('should set the calendar active date to the altered date of the range while typing', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        const aMonthAgo = today.add('month', -1);
+        const twoMonthsAgo = today.add('month', -2);
+        picker.value = null;
+        picker.open = true;
+        await elementUpdated(picker);
+
+        dateTimeInputs[0].focus();
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+
+        dateTimeInputs[0].setSelectionRange(0, 1); // make sure caret is on the month part (MM/dd/yyyy)
+        simulateKeyboard(dateTimeInputs[0], arrowDown);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        eventSpy.resetHistory();
+        checkDatesEqual(dateTimeInputs[0].value!, today.native);
+        // typing a single date does not select a range in the calendar
+        checkSelectedRange(picker, { start: null, end: null });
+        checkDatesEqual(calendar.activeDate, today.native);
+
+        dateTimeInputs[1].focus();
+        expect(isFocused(dateTimeInputs[1])).to.be.true;
+
+        dateTimeInputs[1].setSelectionRange(0, 1);
+        simulateKeyboard(dateTimeInputs[1], arrowDown);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        eventSpy.resetHistory();
+        checkDatesEqual(dateTimeInputs[1].value!, today.native);
+        // typing the end date as well results in a selected range of a single date
+        checkSelectedRange(picker, { start: today.native, end: today.native });
+        checkDatesEqual(calendar.activeDate, today.native);
+
+        simulateKeyboard(dateTimeInputs[1], arrowDown);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        eventSpy.resetHistory();
+        checkDatesEqual(dateTimeInputs[1].value!, aMonthAgo.native);
+        // changing the end date while typing alters the selected range
+        // the active date is set to the typed date, in this case the end one
+        checkSelectedRange(picker, {
+          start: today.native,
+          end: aMonthAgo.native,
+        });
+        checkDatesEqual(calendar.activeDate, aMonthAgo.native);
+
+        // on losing focus of the end input, the dates are swapped since end is earlier than start
+        dateTimeInputs[0].focus();
+        expect(isFocused(dateTimeInputs[0])).to.be.true;
+        await elementUpdated(picker);
+
+        checkSelectedRange(picker, {
+          start: aMonthAgo.native,
+          end: today.native,
+        });
+        checkDatesEqual(calendar.activeDate, aMonthAgo.native);
+
+        dateTimeInputs[0].setSelectionRange(0, 1);
+        simulateKeyboard(dateTimeInputs[0], arrowDown);
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcInput');
+        checkDatesEqual(dateTimeInputs[0].value!, twoMonthsAgo.native);
+        checkSelectedRange(picker, {
+          start: twoMonthsAgo.native,
+          end: today.native,
+        });
+        checkDatesEqual(calendar.activeDate, twoMonthsAgo.native);
+      });
     });
   });
   describe('Slots', () => {

src/components/date-range-picker/date-range-picker.ts

@@ -317,11 +317,11 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   public get value(): DateRangeValue | null {
-    if (!this._formValue.value) {
-      return { start: null, end: null }; // TODO what should the default value be? null?
-    }
-
-    return this._formValue.value;
+    // TODO what should the default value be? null?
+    return {
+      start: this._formValue?.value?.start ?? null,
+      end: this._formValue?.value?.end ?? null,
+    };
   }
   /**
    * Renders chips with custom ranges based on the elements of the array.
@@ -671,7 +671,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       event.preventDefault();
       return;
     }
-    const newValue = (event.target as IgcDateTimeInputComponent).value;
+    const input = event.target as IgcDateTimeInputComponent;
+    const newValue = input.value ? CalendarDay.from(input.value).native : null;
 
     if (event.target === this._inputs[0]) {
       this._startDate = newValue;
@@ -687,7 +688,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   protected handleInputChangeEvent(event: CustomEvent<Date | null>) {
     event.stopPropagation();
     this._swapDatesFlag = false;
-    const newValue = (event.target as IgcDateTimeInputComponent).value;
+
+    const input = event.target as IgcDateTimeInputComponent;
+    const newValue = input.value ? CalendarDay.from(input.value).native : null;
+
     if (event.target === this._inputs[0]) {
       this._startDate = newValue;
     } else {
@@ -876,21 +880,22 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
     const calendarDayStart = toCalendarDay(this._startDate);
     const calendarDayEnd = toCalendarDay(this._endDate);
+    const isStartEarlierThanEnd = calendarDayStart.lessThan(calendarDayEnd);
 
     // dates should not be swapped while typing
-    if (!this._swapDatesFlag && calendarDayStart.greaterThan(calendarDayEnd)) {
+    if (!this._swapDatesFlag && !isStartEarlierThanEnd) {
       this.swapDates();
     }
     if (!calendarDayStart.equalTo(calendarDayEnd)) {
       const range = Array.from(
         calendarRange({ start: this._startDate, end: this._endDate })
       );
-      range.push(last(range).add('day', 1));
+      // calendarRange is non-inclusive
+      range.push(last(range).add('day', isStartEarlierThanEnd ? 1 : -1));
       this._calendar.values = range.map((d) => d.native);
     } else {
       this._calendar.values = [this._startDate];
     }
-    this._calendar.activeDate = this._startDate ?? this._calendar.activeDate;
   }
 
   private swapDates() {
@@ -916,6 +921,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   private _select(value: DateRangeValue | null, emitEvent = false) {
     this.value = value;
+    this._calendar.activeDate = this._startDate ?? this._calendar.activeDate;
     if (emitEvent) {
       this.emitEvent('igcChange', { detail: this.value });
     }