From 4d29715df67a32084e5a2126f45d5ce4f4f2d17e Mon Sep 17 00:00:00 2001 From: mmalerba Date: Fri, 3 Mar 2017 09:28:10 -0800 Subject: [PATCH] feat(datepicker): wire up selected value propagation (#3330) * enable value propagation through various components & directives * add tests * fix lint * addressed comments * addressed feedback * fix lint * make datepicker selected property internal * add test for pristine after ngModel change --- src/demo-app/datepicker/datepicker-demo.html | 7 +- src/demo-app/datepicker/datepicker-demo.ts | 4 +- src/lib/datepicker/calendar-table.spec.ts | 9 +- src/lib/datepicker/calendar.spec.ts | 17 +- src/lib/datepicker/datepicker-input.ts | 85 ++++++- src/lib/datepicker/datepicker.html | 4 +- src/lib/datepicker/datepicker.spec.ts | 244 ++++++++++++++++++- src/lib/datepicker/datepicker.ts | 51 +++- src/lib/datepicker/index.ts | 21 +- src/lib/datepicker/month-view.spec.ts | 17 +- src/lib/datepicker/year-view.spec.ts | 17 +- 11 files changed, 421 insertions(+), 55 deletions(-) diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index 70a7cc1e6556..f974fc7228c7 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -1,11 +1,6 @@

Work in progress, not ready for use.

- - -
-
{{selected?.toNativeDate()}}
- - + diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 240e721a5ef9..214febf1eff0 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -9,7 +9,5 @@ import {SimpleDate} from '@angular/material'; styleUrls: ['datepicker-demo.css'], }) export class DatepickerDemo { - startAt = new SimpleDate(2017, 0, 1); - date = SimpleDate.today(); - selected: SimpleDate; + date: SimpleDate; } diff --git a/src/lib/datepicker/calendar-table.spec.ts b/src/lib/datepicker/calendar-table.spec.ts index fb9869bda99a..3ebf0dbce262 100644 --- a/src/lib/datepicker/calendar-table.spec.ts +++ b/src/lib/datepicker/calendar-table.spec.ts @@ -1,15 +1,16 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MdDatepickerModule} from './index'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; -import {MdCalendarTable, MdCalendarCell} from './calendar-table'; +import {MdCalendarCell, MdCalendarTable} from './calendar-table'; import {By} from '@angular/platform-browser'; describe('MdCalendarTable', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDatepickerModule], declarations: [ + MdCalendarTable, + + // Test components. StandardCalendarTable, ], }); diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts index 27608c2b655b..e0de6b649550 100644 --- a/src/lib/datepicker/calendar.spec.ts +++ b/src/lib/datepicker/calendar.spec.ts @@ -1,16 +1,27 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MdDatepickerModule} from './index'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; import {SimpleDate} from '../core/datetime/simple-date'; import {MdCalendar} from './calendar'; import {By} from '@angular/platform-browser'; +import {MdMonthView} from './month-view'; +import {MdYearView} from './year-view'; +import {MdCalendarTable} from './calendar-table'; +import {DatetimeModule} from '../core/datetime/index'; describe('MdCalendar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDatepickerModule], + imports: [ + DatetimeModule, + ], declarations: [ + MdCalendar, + MdCalendarTable, + MdMonthView, + MdYearView, + + // Test components. StandardCalendar, ], }); diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 84290461e160..f7be57566e25 100644 --- a/src/lib/datepicker/datepicker-input.ts +++ b/src/lib/datepicker/datepicker-input.ts @@ -1,23 +1,100 @@ -import {Directive, ElementRef, Input} from '@angular/core'; +import { + AfterContentInit, Directive, ElementRef, forwardRef, Input, OnDestroy, + Renderer +} from '@angular/core'; import {MdDatepicker} from './datepicker'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; +import {SimpleDate} from '../core/datetime/simple-date'; +import {CalendarLocale} from '../core/datetime/calendar-locale'; +import {Subscription} from 'rxjs'; + + +export const MD_DATEPICKER_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MdDatepickerInput), + multi: true +}; /** Directive used to connect an input to a MdDatepicker. */ @Directive({ selector: 'input[mdDatepicker], input[matDatepicker]', + providers: [MD_DATEPICKER_VALUE_ACCESSOR], + host: { + '(input)': '_onChange($event.target.value)', + '(blur)': '_onTouched()', + } }) -export class MdDatepickerInput { +export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor, OnDestroy { @Input() set mdDatepicker(value: MdDatepicker) { if (value) { this._datepicker = value; - this._datepicker._registerInput(this._elementRef); + this._datepicker._registerInput(this); } } private _datepicker: MdDatepicker; + @Input() + get value(): SimpleDate { + return this._value; + } + set value(value: SimpleDate) { + this._value = this._locale.parseDate(value); + const stringValue = this._value == null ? '' : this._locale.formatDate(this._value); + this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', stringValue); + } + private _value: SimpleDate; + @Input() set matDatepicker(value: MdDatepicker) { this.mdDatepicker = value; } - constructor(private _elementRef: ElementRef) {} + _onChange = (value: any) => {}; + + _onTouched = () => {}; + + private _datepickerSubscription: Subscription; + + constructor(private _elementRef: ElementRef, private _renderer: Renderer, + private _locale: CalendarLocale) {} + + ngAfterContentInit() { + if (this._datepicker) { + this._datepickerSubscription = + this._datepicker.selectedChanged.subscribe((selected: SimpleDate) => { + this.value = selected; + this._onChange(selected); + }); + } + } + + ngOnDestroy() { + if (this._datepickerSubscription) { + this._datepickerSubscription.unsubscribe(); + } + } + + getPopupConnectionElementRef(): ElementRef { + return this._elementRef; + } + + // Implemented as part of ControlValueAccessor + writeValue(value: SimpleDate): void { + this.value = value; + } + + // Implemented as part of ControlValueAccessor + registerOnChange(fn: (value: any) => void): void { + this._onChange = value => fn(this._locale.parseDate(value)); + } + + // Implemented as part of ControlValueAccessor + registerOnTouched(fn: () => void): void { + this._onTouched = fn; + } + + // Implemented as part of ControlValueAccessor + setDisabledState(disabled: boolean): void { + this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', disabled); + } } diff --git a/src/lib/datepicker/datepicker.html b/src/lib/datepicker/datepicker.html index 389890cfa5e2..c7cf5a083d31 100644 --- a/src/lib/datepicker/datepicker.html +++ b/src/lib/datepicker/datepicker.html @@ -1,6 +1,8 @@ diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index b6dbfab95629..45923506150a 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -1,16 +1,25 @@ -import {TestBed, async, ComponentFixture} from '@angular/core/testing'; +import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {MdDatepickerModule} from './index'; import {Component, ViewChild} from '@angular/core'; import {MdDatepicker} from './datepicker'; +import {MdDatepickerInput} from './datepicker-input'; +import {SimpleDate} from '../core/datetime/simple-date'; +import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {By} from '@angular/platform-browser'; +import {dispatchFakeEvent} from '../core/testing/dispatch-events'; + describe('MdDatepicker', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDatepickerModule], + imports: [MdDatepickerModule, FormsModule, ReactiveFormsModule], declarations: [ StandardDatepicker, MultiInputDatepicker, NoInputDatepicker, + DatepickerWithStartAt, + DatepickerWithNgModel, + DatepickerWithFormControl, ], }); @@ -46,7 +55,7 @@ describe('MdDatepicker', () => { expect(document.querySelector('md-dialog-container')).not.toBeNull(); }); - it('close should close popup', () => { + it('close should close popup', async(() => { testComponent.datepicker.openStandardUi(); fixture.detectChanges(); @@ -57,10 +66,12 @@ describe('MdDatepicker', () => { testComponent.datepicker.close(); fixture.detectChanges(); - expect(parseInt(getComputedStyle(popup).height)).toBe(0); - }); + fixture.whenStable().then(() => { + expect(parseInt(getComputedStyle(popup).height)).toBe(0); + }); + })); - it('close should close dialog', () => { + it('close should close dialog', async(() => { testComponent.datepicker.openTouchUi(); fixture.detectChanges(); @@ -69,7 +80,30 @@ describe('MdDatepicker', () => { testComponent.datepicker.close(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + fixture.whenStable().then(() => { + expect(document.querySelector('md-dialog-container')).toBeNull(); + }); + })); + + it('setting selected should update input and close calendar', async(() => { + testComponent.datepicker.openTouchUi(); + fixture.detectChanges(); + + expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(testComponent.datepickerInput.value).toEqual(new SimpleDate(2020, 0, 1)); + + let selected = new SimpleDate(2017, 0, 1); + testComponent.datepicker._selected = selected; + fixture.detectChanges(); + + fixture.whenStable().then(() => { + expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(testComponent.datepickerInput.value).toEqual(selected); + }); + })); + + it('startAt should fallback to input value', () => { + expect(testComponent.datepicker.startAt).toEqual(new SimpleDate(2020, 0, 1)); }); }); @@ -95,14 +129,170 @@ describe('MdDatepicker', () => { expect(() => testComponent.datepicker.openStandardUi()).toThrow(); }); }); + + describe('datepicker with startAt', () => { + let fixture: ComponentFixture; + let testComponent: DatepickerWithStartAt; + + beforeEach(() => { + fixture = TestBed.createComponent(DatepickerWithStartAt); + fixture.detectChanges(); + + testComponent = fixture.componentInstance; + }); + + it('explicit startAt should override input value', () => { + expect(testComponent.datepicker.startAt).toEqual(new SimpleDate(2010, 0, 1)); + }); + }); + + describe('datepicker with ngModel', () => { + let fixture: ComponentFixture; + let testComponent: DatepickerWithNgModel; + + beforeEach(fakeAsync(() => { + fixture = TestBed.createComponent(DatepickerWithNgModel); + detectModelChanges(fixture); + + testComponent = fixture.componentInstance; + })); + + it('should update datepicker when model changes', fakeAsync(() => { + expect(testComponent.datepickerInput.value).toBeNull(); + expect(testComponent.datepicker._selected).toBeNull(); + + let selected = new SimpleDate(2017, 0, 1); + testComponent.selected = selected; + detectModelChanges(fixture); + + expect(testComponent.datepickerInput.value).toEqual(selected); + expect(testComponent.datepicker._selected).toEqual(selected); + })); + + it('should update model when date is selected', fakeAsync(() => { + expect(testComponent.selected).toBeNull(); + expect(testComponent.datepickerInput.value).toBeNull(); + + let selected = new SimpleDate(2017, 0, 1); + testComponent.datepicker._selected = selected; + detectModelChanges(fixture); + + expect(testComponent.selected).toEqual(selected); + expect(testComponent.datepickerInput.value).toEqual(selected); + })); + + it('should mark input dirty after input event', () => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + + expect(inputEl.classList).toContain('ng-pristine'); + + dispatchFakeEvent(inputEl, 'input'); + fixture.detectChanges(); + + expect(inputEl.classList).toContain('ng-dirty'); + }); + + it('should mark input dirty after date selected', fakeAsync(() => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + + expect(inputEl.classList).toContain('ng-pristine'); + + testComponent.datepicker._selected = new SimpleDate(2017, 0, 1); + detectModelChanges(fixture); + + expect(inputEl.classList).toContain('ng-dirty'); + })); + + it('should not mark dirty after model change', fakeAsync(() => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + + expect(inputEl.classList).toContain('ng-pristine'); + + testComponent.selected = new SimpleDate(2017, 0, 1); + detectModelChanges(fixture); + + expect(inputEl.classList).toContain('ng-pristine'); + })); + + it('should mark input touched on blur', () => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + + expect(inputEl.classList).toContain('ng-untouched'); + + dispatchFakeEvent(inputEl, 'focus'); + fixture.detectChanges(); + + expect(inputEl.classList).toContain('ng-untouched'); + + dispatchFakeEvent(inputEl, 'blur'); + fixture.detectChanges(); + + expect(inputEl.classList).toContain('ng-touched'); + }); + }); + + describe('datepicker with formControl', () => { + let fixture: ComponentFixture; + let testComponent: DatepickerWithFormControl; + + beforeEach(() => { + fixture = TestBed.createComponent(DatepickerWithFormControl); + fixture.detectChanges(); + + testComponent = fixture.componentInstance; + }); + + it('should update datepicker when formControl changes', () => { + expect(testComponent.datepickerInput.value).toBeNull(); + expect(testComponent.datepicker._selected).toBeNull(); + + let selected = new SimpleDate(2017, 0, 1); + testComponent.formControl.setValue(selected); + fixture.detectChanges(); + + expect(testComponent.datepickerInput.value).toEqual(selected); + expect(testComponent.datepicker._selected).toEqual(selected); + }); + + it('should update formControl when date is selected', () => { + expect(testComponent.formControl.value).toBeNull(); + expect(testComponent.datepickerInput.value).toBeNull(); + + let selected = new SimpleDate(2017, 0, 1); + testComponent.datepicker._selected = selected; + fixture.detectChanges(); + + expect(testComponent.formControl.value).toEqual(selected); + expect(testComponent.datepickerInput.value).toEqual(selected); + }); + + it('should disable input when form control disabled', () => { + let inputEl = fixture.debugElement.query(By.css('input')).nativeElement; + + expect(inputEl.disabled).toBe(false); + + testComponent.formControl.disable(); + fixture.detectChanges(); + + expect(inputEl.disabled).toBe(true); + }); + }); }); +function detectModelChanges(fixture: ComponentFixture) { + fixture.detectChanges(); + tick(); + fixture.detectChanges(); +} + + @Component({ - template: ``, + template: ``, }) class StandardDatepicker { @ViewChild('d') datepicker: MdDatepicker; + @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; } @@ -111,9 +301,7 @@ class StandardDatepicker { `, }) -class MultiInputDatepicker { - @ViewChild('d') datepicker: MdDatepicker; -} +class MultiInputDatepicker {} @Component({ @@ -122,3 +310,37 @@ class MultiInputDatepicker { class NoInputDatepicker { @ViewChild('d') datepicker: MdDatepicker; } + + +@Component({ + template: ` + + + `, +}) +class DatepickerWithStartAt { + @ViewChild('d') datepicker: MdDatepicker; +} + + +@Component({ + template: `` +}) +class DatepickerWithNgModel { + selected: SimpleDate = null; + @ViewChild('d') datepicker: MdDatepicker; + @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; +} + + +@Component({ + template: ` + + + ` +}) +class DatepickerWithFormControl { + formControl = new FormControl(); + @ViewChild('d') datepicker: MdDatepicker; + @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; +} diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index 417fe8e514ad..27a325bb0d73 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -1,9 +1,9 @@ import { ChangeDetectionStrategy, - Component, - ElementRef, + Component, EventEmitter, + Input, OnDestroy, - Optional, + Optional, Output, TemplateRef, ViewChild, ViewContainerRef, @@ -22,6 +22,9 @@ import { OriginConnectionPosition, OverlayConnectionPosition } from '../core/overlay/position/connected-position'; +import {SimpleDate} from '../core/datetime/simple-date'; +import {MdDatepickerInput} from './datepicker-input'; +import {CalendarLocale} from '../core/datetime/calendar-locale'; /** Component responsible for managing the datepicker popup/dialog. */ @@ -34,6 +37,32 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, }) export class MdDatepicker implements OnDestroy { + /** The date to open the calendar to initially. */ + @Input() + get startAt(): SimpleDate { + // If an explicit startAt is set we start there, otherwise we start at whatever the currently + // selected value is. + if (this._startAt) { + return this._startAt; + } + if (this._datepickerInput) { + return this._datepickerInput.value; + } + return null; + } + set startAt(date: SimpleDate) { this._startAt = this._locale.parseDate(date); } + private _startAt: SimpleDate; + + @Output() selectedChanged = new EventEmitter(); + + get _selected(): SimpleDate { + return this._datepickerInput ? this._datepickerInput.value : null; + } + set _selected(value: SimpleDate) { + this.selectedChanged.emit(value); + this.close(); + } + /** * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather * than a popup and elements have more padding to allow for bigger touch targets. @@ -53,10 +82,11 @@ export class MdDatepicker implements OnDestroy { private _calendarPortal: TemplatePortal; /** The input element this datepicker is associated with. */ - private _inputElementRef: ElementRef; + private _datepickerInput: MdDatepickerInput; constructor(private _dialog: MdDialog, private _overlay: Overlay, - private _viewContainerRef: ViewContainerRef, @Optional() private _dir: Dir) {} + private _viewContainerRef: ViewContainerRef, private _locale: CalendarLocale, + @Optional() private _dir: Dir) {} ngOnDestroy() { this.close(); @@ -69,11 +99,11 @@ export class MdDatepicker implements OnDestroy { * Register an input with this datepicker. * @param inputElementRef An ElementRef for the input. */ - _registerInput(inputElementRef: ElementRef): void { - if (this._inputElementRef) { + _registerInput(input: MdDatepickerInput): void { + if (this._datepickerInput) { throw new MdError('An MdDatepicker can only be associated with a single input.'); } - this._inputElementRef = inputElementRef; + this._datepickerInput = input; } /** Opens the calendar in standard UI mode. */ @@ -91,7 +121,7 @@ export class MdDatepicker implements OnDestroy { * @param touchUi Whether to use the touch UI. */ private _open(touchUi = false): void { - if (!this._inputElementRef) { + if (!this._datepickerInput) { throw new MdError('Attempted to open an MdDatepicker with no associated input.'); } @@ -150,6 +180,7 @@ export class MdDatepicker implements OnDestroy { private _createPopupPositionStrategy(): PositionStrategy { let origin = {originX: 'start', originY: 'bottom'} as OriginConnectionPosition; let overlay = {overlayX: 'start', overlayY: 'top'} as OverlayConnectionPosition; - return this._overlay.position().connectedTo(this._inputElementRef, origin, overlay); + return this._overlay.position().connectedTo( + this._datepickerInput.getPopupConnectionElementRef(), origin, overlay); } } diff --git a/src/lib/datepicker/index.ts b/src/lib/datepicker/index.ts index 5f6c2f471738..b8138a0fd46c 100644 --- a/src/lib/datepicker/index.ts +++ b/src/lib/datepicker/index.ts @@ -20,8 +20,23 @@ export * from './year-view'; @NgModule({ - imports: [CommonModule, DatetimeModule, MdDialogModule, OverlayModule], - exports: [MdCalendar, MdCalendarTable, MdDatepicker, MdDatepickerInput, MdMonthView, MdYearView], - declarations: [MdCalendar, MdCalendarTable, MdDatepicker, MdDatepickerInput, MdMonthView, MdYearView], + imports: [ + CommonModule, + DatetimeModule, + MdDialogModule, + OverlayModule, + ], + exports: [ + MdDatepicker, + MdDatepickerInput, + ], + declarations: [ + MdCalendar, + MdCalendarTable, + MdDatepicker, + MdDatepickerInput, + MdMonthView, + MdYearView, + ], }) export class MdDatepickerModule {} diff --git a/src/lib/datepicker/month-view.spec.ts b/src/lib/datepicker/month-view.spec.ts index c9a7badd5f92..3b19a23401ce 100644 --- a/src/lib/datepicker/month-view.spec.ts +++ b/src/lib/datepicker/month-view.spec.ts @@ -1,16 +1,23 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MdDatepickerModule} from './index'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdMonthView} from './month-view'; import {SimpleDate} from '../core/datetime/simple-date'; +import {MdCalendarTable} from './calendar-table'; +import {DatetimeModule} from '../core/datetime/index'; describe('MdMonthView', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDatepickerModule], + imports: [ + DatetimeModule, + ], declarations: [ + MdCalendarTable, + MdMonthView, + + // Test components. StandardMonthView, ], }); @@ -32,9 +39,9 @@ describe('MdMonthView', () => { testComponent = fixture.componentInstance; }); - it('has correct year label', () => { + it('has correct month label', () => { let labelEl = monthViewNativeElement.querySelector('.mat-calendar-table-label'); - expect(labelEl.innerHTML.trim()).toBe('Jan 2017'); + expect(labelEl.innerHTML.trim()).toBe('JAN'); }); it('has 31 days', () => { diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index a60febe29320..b86294299b0e 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/src/lib/datepicker/year-view.spec.ts @@ -1,16 +1,23 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MdDatepickerModule} from './index'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdYearView} from './year-view'; import {SimpleDate} from '../core/datetime/simple-date'; +import {MdCalendarTable} from './calendar-table'; +import {DatetimeModule} from '../core/datetime/index'; describe('MdYearView', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDatepickerModule], + imports: [ + DatetimeModule, + ], declarations: [ + MdCalendarTable, + MdYearView, + + // Test components. StandardYearView, ], }); @@ -44,7 +51,7 @@ describe('MdYearView', () => { it('shows selected month if in same year', () => { let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-table-selected'); - expect(selectedEl.innerHTML.trim()).toBe('Mar'); + expect(selectedEl.innerHTML.trim()).toBe('MAR'); }); it('does not show selected month if in different year', () => { @@ -61,7 +68,7 @@ describe('MdYearView', () => { fixture.detectChanges(); let selectedEl = yearViewNativeElement.querySelector('.mat-calendar-table-selected'); - expect(selectedEl.innerHTML.trim()).toBe('Dec'); + expect(selectedEl.innerHTML.trim()).toBe('DEC'); }); }); });