diff --git a/src/datepicker/bs-datepicker.spec.ts b/src/datepicker/bs-datepicker.spec.ts
new file mode 100644
index 0000000000..f73eb76a9d
--- /dev/null
+++ b/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: ``
+})
+class TestComponent {
+ @ViewChild(BsDatepickerDirective) datepicker: BsDatepickerDirective;
+ bsConfig: Partial = {
+ displayMonths: 2
+ };
+}
+
+type TestFixture = ComponentFixture;
+
+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());
+ });
+ });
+});
diff --git a/src/datepicker/reducer/bs-datepicker.effects.ts b/src/datepicker/reducer/bs-datepicker.effects.ts
index aeafd4a5fa..25fb25b572 100644
--- a/src/datepicker/reducer/bs-datepicker.effects.ts
+++ b/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'
})
);