Test fixes for date-range using selection model (#13919)

* adds an abstract date selection model and a single date and range implementation

* moves adapter to contructor

* adds asDate and asRange convertions

* adds explicit constructors to concrete implementations

* Adds an abstract date selection model (#13033)

This PR also includes a single date implementation of the selection model and the range implementation.

* WIP uses date selectio in calendar

* Observable in MatDateSelection (#13037)

This change adds an observable to the date selection. This allows the usage of a single date selection instance instead of creating multiple.

* test fixes

* small cleanup

* cleanup

* improves calendar body test spec

* fixes tests in month view

* fixes matCalendar tests

* cleared up calendar body tests with date injection

* indent

* cleaning up some nits

* fixes the final tests

* update today programatically

* remove unused file

* nits

Author: roboshoes

src/dev-app/tsconfig-aot.json

@@ -1,5 +1,5 @@
 // TypeScript config that extends the dev-app tsconfig file. This config compiles the
-// "main-aot.ts" file and also enables templage code generation / AOT.
+// "main-aot.ts" file and also enables template code generation / AOT.
 {
   "extends": "./tsconfig-build",
   "compilerOptions": {

src/lib/core/datetime/date-selection-model.ts

@@ -83,8 +83,10 @@ export class MatSingleDateSelectionModel<D> extends MatDateSelectionModel<D> {
    * simply replacing the current selection with the given selection.
    */
   add(date: D) {
-    this.date = date;
-    this.selectionChange.next();
+    if (!this.adapter.sameDate(date, this.date)) {
+      this.date = date;
+      this.selectionChange.next();
+    }
   }
 
   clone(): MatDateSelectionModel<D> {

src/lib/datepicker/calendar-body.spec.ts

@@ -1,12 +1,16 @@
 import {Component} from '@angular/core';
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
+import {MatNativeDateModule, DateAdapter} from '@angular/material/core';
 import {MatCalendarBody, MatCalendarCell} from './calendar-body';
 
 
 describe('MatCalendarBody', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        MatNativeDateModule,
+      ],
       declarations: [
         MatCalendarBody,
 
@@ -32,7 +36,10 @@ describe('MatCalendarBody', () => {
       cellEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'));
     }
 
-    beforeEach(() => {
+    beforeEach(inject([DateAdapter], (adapter: DateAdapter<Date>) => {
+      const fakeToday = new Date(2017, 0, 3);
+      spyOn(adapter, 'today').and.callFake(() => fakeToday);
+
       fixture = TestBed.createComponent(StandardCalendarBody);
       fixture.detectChanges();
 
@@ -41,7 +48,7 @@ describe('MatCalendarBody', () => {
       testComponent = fixture.componentInstance;
 
       refreshElementLists();
-    });
+    }));
 
     it('creates body', () => {
       expect(rowEls.length).toBe(3);
@@ -140,7 +147,7 @@ class StandardCalendarBody {
 
 function createCell(value: number, cellClasses?: MatCalendarCellCssClasses) {
   return new MatCalendarCell(
-      {start: new Date(value), end: new Date(value)},
+      {start: new Date(2017, 0, value), end: new Date(2017, 0, value)},
       `${value}`,
       `${value}-label`,
       true,

src/lib/datepicker/calendar-body.ts

@@ -17,6 +17,8 @@ import {
   ViewEncapsulation,
   OnChanges,
   SimpleChanges,
+  ChangeDetectorRef,
+  OnDestroy,
 } from '@angular/core';
 import {
   DateAdapter,
@@ -25,6 +27,7 @@ import {
   MatSingleDateSelectionModel
 } from '@angular/material/core';
 import {take} from 'rxjs/operators';
+import {Subscription} from 'rxjs';
 
 /**
  * Extra CSS classes that can be associated with a calendar cell.
@@ -71,7 +74,7 @@ export class MatCalendarCell<D = unknown> {
   providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER],
 })
 // @breaking-change 9.0.0 remove generic default type
-export class MatCalendarBody<D = unknown> implements OnChanges {
+export class MatCalendarBody<D = unknown> implements OnChanges, OnDestroy {
   /** The label for the table. (e.g. "Jan 2017"). */
   @Input() label: string;
 
@@ -154,18 +157,21 @@ export class MatCalendarBody<D = unknown> implements OnChanges {
   _cellWidth: string;
 
   private _today: D;
+  private _selectionSubscription: Subscription;
 
   constructor(private _elementRef: ElementRef<HTMLElement>,
               private _ngZone: NgZone,
+              private _cdr: ChangeDetectorRef,
               private _dateAdapter: DateAdapter<D>,
               readonly _selectionModel: MatDateSelectionModel<D>) {
-    this._today = this._dateAdapter.today();
-    // Note(mmalerba): This is required to zero out the time portion of the date.
-    // Revisit this when we support time picking.
-    this._today = this._dateAdapter.createDate(
-        this._dateAdapter.getYear(this._today),
-        this._dateAdapter.getMonth(this._today),
-        this._dateAdapter.getDate(this._today));
+    this._updateToday();
+
+    this._selectionSubscription =
+        this._selectionModel.selectionChange.subscribe(() => this._cdr.markForCheck());
+  }
+
+  ngOnDestroy() {
+    this._selectionSubscription.unsubscribe();
   }
 
   _cellClicked(cell: MatCalendarCell<D>): void {
@@ -215,9 +221,8 @@ export class MatCalendarBody<D = unknown> implements OnChanges {
   }
 
   _isToday(item: MatCalendarCell<D>): boolean {
-    const today = this._dateAdapter.today();
-    return this._dateAdapter.compareDate(item.range.start, today) <= 0 &&
-        this._dateAdapter.compareDate(item.range.end, today) >= 0;
+    return this._dateAdapter.compareDate(item.range.start, this._today) <= 0 &&
+        this._dateAdapter.compareDate(item.range.end, this._today) >= 0;
   }
 
   /** Focuses the active cell after the microtask queue is empty. */
@@ -234,6 +239,16 @@ export class MatCalendarBody<D = unknown> implements OnChanges {
     });
   }
 
+  _updateToday() {
+    this._today = this._dateAdapter.today();
+    // Note(mmalerba): This is required to zero out the time portion of the date.
+    // Revisit this when we support time picking.
+    this._today = this._dateAdapter.createDate(
+        this._dateAdapter.getYear(this._today),
+        this._dateAdapter.getMonth(this._today),
+        this._dateAdapter.getDate(this._today));
+  }
+
   // @breaking-change 9.0.0 remove when deprecated properties relying on it are removed.
   private _getFirstCellRange() {
     return (this.rows && this.rows[0] && this.rows[0][0] && this.rows[0][0].range);

src/lib/datepicker/calendar.ts

@@ -186,6 +186,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   _calendarHeaderPortal: Portal<any>;
 
   private _intlChanges: Subscription;
+  private _selectionSubscription: Subscription;
 
   /**
    * Used for scheduling that focus should be moved to the active cell on the next tick.
@@ -240,7 +241,11 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   /** Function that can be used to add custom CSS classes to dates. */
   @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
 
-  /** Emits when the currently selected date changes. */
+  /**
+   * Emits when the currently selected date changes.
+   * @deprecated Listen to selectionModel valueChange.
+   * @breaking-change 9.0.0
+   */
   @Output() readonly selectedChange = new EventEmitter<D>();
 
   /**
@@ -309,13 +314,18 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
       _changeDetectorRef.markForCheck();
       this.stateChanges.next();
     });
+
+    // This should no longer be needed after deprecation of selectedChange
+    this._selectionSubscription = selectionModel.selectionChange.subscribe(() => {
+      this.selectedChange.emit(selectionModel.getFirstSelectedDate() || undefined);
+    });
   }
 
   ngAfterContentInit() {
     this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);
     this.activeDate = this.startAt || this._dateAdapter.today();
 
-    // Assign to the private property since we don't want to move focus on init.
+    // Assign to the private property since we don't want to move on init.
     this._currentView = this.startView;
   }
 
@@ -328,6 +338,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
 
   ngOnDestroy() {
     this._intlChanges.unsubscribe();
+    this._selectionSubscription.unsubscribe();
     this.stateChanges.complete();
   }
 

src/lib/datepicker/datepicker-content.html

@@ -9,7 +9,6 @@
     [headerComponent]="datepicker.calendarHeaderComponent"
     [dateClass]="datepicker.dateClass"
     [@fadeInCalendar]="'enter'"
-    (selectedChange)="datepicker.select($event)"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
     (_userSelection)="datepicker.close()">

src/lib/datepicker/datepicker-input.ts

@@ -109,13 +109,19 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     this._datepicker = value;
     this._datepicker._registerInput(this);
     this._datepickerSubscription.unsubscribe();
+
+    if (this._isSelectionInitialized) {
+      this._isSelectionInitialized = false;
+      this._selectionModel.ngOnDestroy();
+    }
+
     this._selectionModel = this._datepicker._dateSelection;
 
-    this._formatValue(this._selectionModel.getFirstSelectedDate());
+    this._formatValue(this._selectionModel.getSelection());
 
     this._datepickerSubscription = this._datepicker._dateSelection.selectionChange.subscribe(() => {
-      this._formatValue(this._selectionModel.getFirstSelectedDate());
-      this._cvaOnChange(this._selectionModel.getFirstSelectedDate());
+      this._formatValue(this._selectionModel.getSelection());
+      this._cvaOnChange(this._selectionModel.getSelection());
       this._onTouched();
       this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
       this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
@@ -134,22 +140,23 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
   /** The value of the input. */
   @Input()
   get value(): D | null {
-    return this._selectionModel ? this._selectionModel.getFirstSelectedDate() : null;
+    return this._selectionModel ? this._selectionModel.getSelection() : null;
   }
   set value(value: D | null) {
-    const oldDate = this._selectionModel.getFirstSelectedDate();
+    value = this._dateAdapter.deserialize(value);
+    const oldDate = this._selectionModel.getSelection();
 
     if (!this._selectionModel) {
       throw new Error('Input has no MatDatePicker associated with it.');
     }
 
-    if (!this._dateAdapter.sameDate(value, this._selectionModel.getFirstSelectedDate())) {
+    if (!this._dateAdapter.sameDate(value, oldDate)) {
       this._selectionModel.setSelection(value);
     }
 
-    this._lastValueValid = !this._selectionModel || this._selectionModel.isValid();
+    this._lastValueValid = this._selectionModel.isValid();
 
-    this._formatValue(this._selectionModel.getFirstSelectedDate());
+    this._formatValue(this._selectionModel.getSelection());
 
     if (!this._dateAdapter.sameDate(value, oldDate)) {
       this._valueChange.emit(value);
@@ -221,6 +228,8 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
 
   private _localeSubscription = Subscription.EMPTY;
 
+  private _isSelectionInitialized = true;
+
   /** The form control validator for whether the input parses. */
   private _parseValidator: ValidatorFn = (): ValidationErrors | null => {
     return this._lastValueValid ?
@@ -274,6 +283,10 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
       this.value = this.value;
     });
+
+    // Set a default model to prevent failure when reading value. Gets overridden when the
+    // datepicker is set.
+    this._selectionModel = new MatSingleDateSelectionModel(_dateAdapter);
   }
 
   ngOnDestroy() {
@@ -339,17 +352,14 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
   }
 
   _onInput(value: string) {
-    const date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
-    const current = this._selectionModel.getFirstSelectedDate();
-
-    if (!date) {
-      return;
-    }
+    let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
+    const current = this._selectionModel.getSelection();
+    date = this._getValidDateOrNull(date);
 
     if (!this._dateAdapter.sameDate(current, date)) {
-      this._selectionModel.add(date);
-      this._cvaOnChange(this._selectionModel.getFirstSelectedDate());
-      this._valueChange.emit(this._selectionModel.getFirstSelectedDate());
+      this._selectionModel.setSelection(date);
+      this._formatValue(date);
+      this._cvaOnChange(date);
       this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
     }
   }
@@ -380,7 +390,8 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     }
 
     this._elementRef.nativeElement.value =
-        value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
+        value && this._getValidDateOrNull(value) ?
+            this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
   }
 
   /**

src/lib/datepicker/datepicker.spec.ts

@@ -654,6 +654,7 @@ describe('MatDatepicker', () => {
         fakeAsync(() => {
           expect(testComponent.onMultiYearSelection).not.toHaveBeenCalled();
 
+
           testComponent.datepicker.open();
           fixture.detectChanges();
 

src/lib/datepicker/datepicker.ts

@@ -273,7 +273,7 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   private _focusedElementBeforeOpen: HTMLElement | null = null;
 
   /** Subscription to value changes in the associated input element. */
-  private _inputSubscription = Subscription.EMPTY;
+  private _subscriptions = new Subscription();
 
   /** The input element this datepicker is associated with. */
   _datepickerInput: MatDatepickerInput<D>;
@@ -299,11 +299,15 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
     }
 
     this._scrollStrategy = scrollStrategy;
+
+    this._subscriptions.add(_dateSelection.selectionChange.subscribe(() => {
+      this._selectedChanged.next(_dateSelection.getSelection() || undefined);
+    }));
   }
 
   ngOnDestroy() {
     this.close();
-    this._inputSubscription.unsubscribe();
+    this._subscriptions.unsubscribe();
     this._disabledChange.complete();
 
     if (this._popupRef) {
@@ -315,9 +319,8 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   /** Selects the given date */
   select(date: D): void {
     let oldValue = this._dateSelection.getSelection();
-    if (!this._dateAdapter.sameDate(oldValue, this._dateSelection.getSelection())) {
+    if (!this._dateAdapter.sameDate(oldValue, date)) {
       this._dateSelection.add(date);
-      this._selectedChanged.next(this._dateSelection.getSelection() || undefined);
     }
   }
 

src/lib/datepicker/month-view.ts

@@ -88,7 +88,7 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   get selected(): D | null { return this._selectionModel.getFirstSelectedDate(); }
   set selected(value: D | null) {
     if (this._selectionModel instanceof MatSingleDateSelectionModel) {
-      this._selectionModel.setSelection(value);
+      this._selectionModel.add(value);
       this.extractDate();
     }
   }
@@ -179,6 +179,7 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
+    this._matCalendarBody._updateToday();
     this._init();
   }