From 3a17cc35fa518d7cfaf3f0654f7be9551b49da4e Mon Sep 17 00:00:00 2001 From: Johns Mathew Date: Wed, 5 Dec 2018 18:06:17 +0530 Subject: [PATCH] =?UTF-8?q?fix(datepicker):=20select=20correct=20month=20a?= =?UTF-8?q?nd=20year=20from=20month=20picker=20view=E2=80=A6=20(#4501)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- src/datepicker/bs-datepicker.spec.ts | 84 +++++++++++++++++++ .../reducer/bs-datepicker.effects.ts | 30 +++---- 2 files changed, 100 insertions(+), 14 deletions(-) create mode 100644 src/datepicker/bs-datepicker.spec.ts 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' }) );