fix(datepicker): select correct month and year from month picker view… (#4501)

* fix(datepicker): select correct month and year from month picker view when displayMonths > 1

* test(datepicker): select correct year on month selection

* test(datepicker): add test for show and hide

* fix(tslint): fix tslint errors

* feat(common): clean up

Author: johnsmathew

src/datepicker/bs-datepicker.spec.ts

@@ -0,0 +1,84 @@
+import { Component, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BsDatepickerConfig, BsDatepickerDirective, BsDatepickerModule } from '.';
+import { CalendarCellViewModel } from './models';
+import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
+
+@Component({
+  selector: 'test-cmp',
+  template: `<input type="text" bsDatepicker [bsConfig]="bsConfig">`
+})
+class TestComponent {
+  @ViewChild(BsDatepickerDirective) datepicker: BsDatepickerDirective;
+  bsConfig: Partial<BsDatepickerConfig> = {
+      displayMonths: 2
+  };
+}
+
+type TestFixture = ComponentFixture<TestComponent>;
+
+function getDatepickerDirective(fixture: TestFixture): BsDatepickerDirective {
+  const datepicker: BsDatepickerDirective = fixture.componentInstance.datepicker;
+
+  return datepicker;
+}
+
+function showDatepicker(fixture: TestFixture): BsDatepickerDirective {
+  const datepicker = getDatepickerDirective(fixture);
+  datepicker.show();
+  fixture.detectChanges();
+
+  return datepicker;
+}
+
+function hideDatepicker(fixture: TestFixture): BsDatepickerDirective {
+  const datepicker = getDatepickerDirective(fixture);
+  datepicker.hide();
+  fixture.detectChanges();
+
+  return datepicker;
+}
+
+function getDatepickerContainer(datepicker: BsDatepickerDirective): BsDatepickerContainerComponent | null {
+  return datepicker[`_datepickerRef`] ? datepicker[`_datepickerRef`].instance : null;
+}
+
+describe('datepicker:', () => {
+  let fixture: TestFixture;
+  beforeEach(
+      async(() => TestBed.configureTestingModule({
+          declarations: [TestComponent],
+          imports: [BsDatepickerModule.forRoot()]
+      }).compileComponents()
+      ));
+  beforeEach(() => {
+      fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+  });
+
+  it('should display datepicker on show', () => {
+      const datepicker = showDatepicker(fixture);
+      expect(getDatepickerContainer(datepicker)).toBeDefined();
+  });
+
+  it('should hide datepicker on hide', () => {
+      const datepicker = hideDatepicker(fixture);
+      expect(getDatepickerContainer(datepicker)).toBeNull();
+  });
+
+  it('should select correct year when a month other than selected year is chosen', () => {
+      const datepicker = showDatepicker(fixture);
+      const datepickerContainerInstance = getDatepickerContainer(datepicker);
+      const yearSelection: CalendarCellViewModel = { date: new Date(2017, 1, 1), label: 'label' };
+      const monthSelection: CalendarCellViewModel = { date: new Date(2018, 1, 1), label: 'label' };
+      datepickerContainerInstance.yearSelectHandler(yearSelection);
+      datepickerContainerInstance.monthSelectHandler(monthSelection);
+      fixture.detectChanges();
+      datepickerContainerInstance[`_store`]
+          .select(state => state.view)
+          .subscribe(view => {
+              expect(view.date.getFullYear()).toEqual(monthSelection.date.getFullYear());
+          });
+  });
+});

src/datepicker/reducer/bs-datepicker.effects.ts

@@ -1,8 +1,16 @@
 import { Injectable } from '@angular/core';
+
 import { Observable, Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
 import { getFullYear, getMonth } from 'ngx-bootstrap/chronos';
+
 import { BsDatepickerAbstractComponent } from '../base/bs-datepicker-container';
+import { BsDatepickerActions } from './bs-datepicker.actions';
 import { BsDatepickerConfig } from '../bs-datepicker.config';
+import { BsDatepickerStore } from './bs-datepicker.store';
+import { BsLocaleService } from '../bs-locale.service';
+
 import {
   BsDatepickerViewMode,
   BsNavigationEvent,
@@ -14,10 +22,7 @@ import {
   MonthsCalendarViewModel,
   YearsCalendarViewModel
 } from '../models';
-import { BsDatepickerActions } from './bs-datepicker.actions';
-import { BsDatepickerStore } from './bs-datepicker.store';
-import { BsLocaleService } from '../bs-locale.service';
-import { filter, map } from 'rxjs/operators';
+
 
 @Injectable()
 export class BsDatepickerEffects {
@@ -136,21 +141,16 @@ export class BsDatepickerEffects {
       event.cell.isHovered = event.isHovered;
     };
 
-    /** select handlers */
-    // container.daySelectHandler = (day: DayViewModel): void => {
-    //   if (day.isOtherMonth || day.isDisabled) {
-    //     return;
-    //   }
-    //   this._store.dispatch(this._actions.select(day.date));
-    // };
-
     container.monthSelectHandler = (event: CalendarCellViewModel): void => {
       if (event.isDisabled) {
         return;
       }
       this._store.dispatch(
         this._actions.navigateTo({
-          unit: {month: getMonth(event.date)},
+          unit: {
+            month: getMonth(event.date),
+            year: getFullYear(event.date)
+          },
           viewMode: 'day'
         })
       );
@@ -162,7 +162,9 @@ export class BsDatepickerEffects {
       }
       this._store.dispatch(
         this._actions.navigateTo({
-          unit: {year: getFullYear(event.date)},
+          unit: {
+            year: getFullYear(event.date)
+          },
           viewMode: 'month'
         })
       );