chore(calendar): fix sample update changelog #7039

Author: hanastasov

CHANGELOG.md

@@ -19,6 +19,11 @@ All notable changes for each version of this project will be documented in this
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 
 ### New Features
+- `IgxCalendar` and `IgxMonthPicker`
+    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
+    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
+    - `viewDate` day value is always 1.
+    - `activeView` setter is now available as an input property.
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
     - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -7,14 +7,16 @@ import {
     Calendar, IgxCalendarComponent, IgxCalendarModule, isLeap,
     monthRange, weekDay, WEEKDAYS
 } from './public_api';
-import { UIInteractions } from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { DateRangeDescriptor, DateRangeType } from '../core/dates/dateRange';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxDayItemComponent } from './days-view/day-item.component';
 import { HelperTestFunctions } from './calendar-helper-utils';
+import { CalendarView } from './month-picker-base';
+import { IViewDateChangeEventArgs } from './calendar-base';
 
-describe('IgxCalendar - ', () => {
+fdescribe('IgxCalendar - ', () => {
 
     it('Should create proper calendar model', () => {
         const calendar = new Calendar();
@@ -1554,41 +1556,66 @@ describe('IgxCalendar - ', () => {
                 dom = fixture.debugElement;
             }));
 
-            it('Should navigate to the previous/next month via KB.', fakeAsync(() => {
+            fit('Should navigate to the previous/next month via KB.', fakeAsync(() => {
+                fixture.detectChanges();
+                const next = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_NEXT_BUTTON_CSSCLASS))[0];
                 const prev = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_PREV_BUTTON_CSSCLASS))[0];
+
+                let previousValue = fixture.componentInstance.calendar.viewDate;
                 prev.nativeElement.focus();
+                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
 
                 expect(prev.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
-                tick(100);
                 fixture.detectChanges();
+                const tt = flush();
+                tick(100);
 
+                let eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(4);
 
-                const next = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_NEXT_BUTTON_CSSCLASS))[0];
                 next.nativeElement.focus();
+                previousValue = fixture.componentInstance.calendar.viewDate;
                 expect(next.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
-                tick(100);
+
                 fixture.detectChanges();
+                tick(100);
 
+                eventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
+
+                previousValue = fixture.componentInstance.calendar.viewDate;
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
-                tick(100);
+
                 fixture.detectChanges();
+                tick(100);
 
+                eventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(6);
             }));
 
-            it('Should open years view, navigate through and select an year via KB.', () => {
+            it('Should open years view, navigate through and select an year via KB.', fakeAsync(() => {
                 const year = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[1];
                 year.nativeElement.focus();
 
                 expect(year.nativeElement).toBe(document.activeElement);
 
+                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
+
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
 
                 const years = dom.queryAll(By.css(HelperTestFunctions.YEAR_CSSCLASS));
                 let currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
@@ -1609,20 +1636,33 @@ describe('IgxCalendar - ', () => {
                 currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
                 expect(currentYear.nativeElement.textContent.trim()).toMatch('2016');
 
+                const previousValue = fixture.componentInstance.calendar.viewDate;
+                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', currentYear.nativeElement);
+
                 fixture.detectChanges();
+                tick();
 
+                const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getFullYear()).toEqual(2016);
-            });
+            }));
 
-            it('Should open months view, navigate through and select a month via KB.', () => {
+            it('Should open months view, navigate through and select a month via KB.', fakeAsync(() => {
                 const month = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0];
                 month.nativeElement.focus();
+                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
 
                 expect(month.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
+
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
 
                 const months = dom.queryAll(By.css(HelperTestFunctions.MONTH_CSSCLASS));
                 const currentMonth = dom.query(By.css(HelperTestFunctions.CURRENT_MONTH_CSSCLASS));
@@ -1651,11 +1691,18 @@ describe('IgxCalendar - ', () => {
 
                 expect(document.activeElement.textContent.trim()).toMatch('Sep');
 
+                const previousValue = fixture.componentInstance.calendar.viewDate;
+                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
+                tick();
 
+                const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(8);
-            });
+            }));
 
             it('Should navigate to the first enabled date from the previous month when using "arrow up" key.', fakeAsync(() => {
                 const dateRangeDescriptors: DateRangeDescriptor[] = [];

src/app/calendar/calendar.sample.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { IgxCalendarComponent, DateRangeType, CalendarView } from 'igniteui-angular';
 import { IViewDateChangeEventArgs } from '../../../projects/igniteui-angular/src/lib/calendar/calendar-base';
-import { CalendarView } from '../../../projects/igniteui-angular/src/lib/calendar/public_api';
 
 @Component({
     selector: 'app-calendar-sample',