TT-39 fix: default month when changing year

Author: Guido Quezada

src/app/modules/shared/components/month-picker/month-picker.component.html

@@ -1,12 +1,12 @@
 <div class="card-header">
   <div class="d-flex align-items-center">
-    <button class="btn mr-auto" (click)="decrement()">
+    <button class="btn mr-auto" (click)="changeYear('subtract')">
       <i class="fa fa-chevron-left"></i>
     </button>
     <p>
       {{selectedYearText}}
     </p>
-    <button class="btn ml-auto" (click)="increment()">
+    <button class="btn ml-auto" (click)="changeYear('add')">
       <i class="fa fa-chevron-right"></i>
     </button>
   </div>

src/app/modules/shared/components/month-picker/month-picker.component.spec.ts

@@ -37,11 +37,11 @@ describe('MonthPickerComponent', () => {
   it('should add a year to current year', () => {
     component.selectedYearMoment = moment();
     const incrementYear = moment().add(1, 'year').format('Y');
-    spyOn(component, 'increment').and.callThrough();
+    spyOn(component, 'changeYear').and.callThrough();
 
-    component.increment();
+    component.changeYear('add');
 
-    expect(component.increment).toHaveBeenCalled();
+    expect(component.changeYear).toHaveBeenCalled();
     expect(component.selectedYearText).toEqual(incrementYear);
     expect(component.selectedYearMoment.format('Y')).toEqual(incrementYear);
   });
@@ -50,21 +50,19 @@ describe('MonthPickerComponent', () => {
   it('should subtract a year to current year', () => {
     component.selectedYearMoment = moment();
     const decrementYear = moment().subtract(1, 'year').format('Y');
-    spyOn(component, 'decrement').and.callThrough();
+    spyOn(component, 'changeYear').and.callThrough();
 
-    component.decrement();
+    component.changeYear('subtract');
 
-    expect(component.decrement).toHaveBeenCalled();
+    expect(component.changeYear).toHaveBeenCalled();
     expect(component.selectedYearMoment.format('Y')).toEqual(decrementYear);
   });
 
 
-  it('selectMonth should call selectDates', () => {
+  it('selectMonth should call selectDate', () => {
     spyOn(component, 'selectDate');
-
-    component.selectMonth(8);
-
-    expect(component.selectDate).toHaveBeenCalledWith(8, 2020);
+    component.selectMonth(10);
+    expect(component.selectDate).toHaveBeenCalledWith(10, 2020);
   });
 
 });

src/app/modules/shared/components/month-picker/month-picker.component.ts

@@ -6,7 +6,7 @@ import * as moment from 'moment';
   templateUrl: './month-picker.component.html',
   styleUrls: ['./month-picker.component.scss']
 })
-export class MonthPickerComponent implements OnInit {
+export class MonthPickerComponent implements OnInit{
   @Output() dateSelected = new EventEmitter<{
     monthIndex: number;
     year: number;
@@ -19,38 +19,31 @@ export class MonthPickerComponent implements OnInit {
 
   selectedYearText: string;
   months: Array<string> = [];
-  years: Array<number> = [];
 
   constructor() {
     this.selectedYearMoment = moment();
     this.selectedMonthMoment = moment();
     this.months = moment.months();
     this.selectedMonthIndex = this.selectedMonthMoment.month();
+    this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
     this.selectedYear = this.selectedYearMoment.year();
-    this.updateYearText();
   }
 
   ngOnInit() {
     this.selectDate(this.selectedMonthIndex, this.selectedYear);
   }
 
-  updateYearText() {
-    this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
-  }
-
-  increment() {
-    this.selectedYearMoment = this.selectedYearMoment.add(1, 'year');
-    this.updateYearText();
-  }
+  changeYear(changeAction: string) {
+    this.selectedYearMoment[changeAction](1, 'year');
+    this.selectedYear = this.selectedYearMoment.year();
 
-  decrement() {
-    this.selectedYearMoment = this.selectedYearMoment.subtract(1, 'year');
-    this.updateYearText();
+    const monthIndex = changeAction === 'add' ? 0 : 11;
+    this.selectMonth(monthIndex);
+    this.selectedYearText = moment(this.selectedYearMoment).format('YYYY');
   }
 
   selectMonth(monthIndex: number) {
     this.selectedMonthIndex = monthIndex;
-    this.selectedYear = this.selectedYearMoment.year();
     this.selectDate(this.selectedMonthIndex, this.selectedYear);
   }
 
@@ -65,4 +58,3 @@ export class MonthPickerComponent implements OnInit {
     this.dateSelected.emit({ monthIndex, year });
   }
 }
-