TT-39 fix: creating test

Author: scastillo-jp

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

@@ -1,31 +1,22 @@
-<div class="month-picker">
-	<div class="card">
-		<div class="card-header">
-			<div class="d-flex align-items-center">
-				<button class="btn mr-auto" (click)="decrement()">
-          <i class="fa fa-chevron-left"></i>
-        </button>
-				<p>
-					{{selectedYearText}}
-				</p>
-				<button class="btn ml-auto" (click)="increment()">
-          <i class="fa fa-chevron-right"></i>
-        </button>
-			</div>
-		</div>
-
-		<div class="card-body">
-				<div class="row">
-					<div class="col-sm-2" *ngFor="let month of months; let i = index">
-						<div class="month-picker-cell">
-							<button class="btn"
-              [ngClass]="{'btn-primary': isSelectedMonth(i)}"
-							 (click)="selectMonth(i)">
-                <small>{{ month }}</small>
-              </button>
-						</div>
-					</div>
-				</div>
-		</div>
-	</div>
+<div class="card-header">
+  <div class="d-flex align-items-center">
+    <button class="btn mr-auto" (click)="decrement()">
+      <i class="fa fa-chevron-left"></i>
+    </button>
+    <p>
+      {{selectedYearText}}
+    </p>
+    <button class="btn ml-auto" (click)="increment()">
+      <i class="fa fa-chevron-right"></i>
+    </button>
+  </div>
 </div>
+<div class="row">
+  <div class="spacing col-xl-1 col-lg-1 col-md-2 col-sm-2 col-xs-4" *ngFor="let month of months; let i = index">
+    <button class="btn btn-light btn-block"
+      [ngClass]="{'btn-primary': isSelectedMonth(i)}"
+      (click)="selectMonth(i)">
+      <small>{{ month.slice(0, 3) }}</small>
+    </button>
+  </div>
+</div>

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

@@ -21,5 +21,7 @@
   @include highlight();
   border-radius: 0.2em;
   text-decoration: underline;
-
 }
+.spacing {
+  padding: 0.1em;
+}

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

@@ -1,3 +1,4 @@
+import { SubstractDatePipe } from './../../pipes/substract-date/substract-date.pipe';
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import * as moment from 'moment';
 
@@ -7,8 +8,10 @@ import * as moment from 'moment';
   styleUrls: ['./month-picker.component.scss']
 })
 export class MonthPickerComponent implements OnInit {
-
-  @Output() dateSelected = new EventEmitter<{ monthIndex: number; year: number; }>();
+  @Output() dateSelected = new EventEmitter<{
+    monthIndex: number;
+    year: number;
+  }>();
 
   selectedMonthMoment: moment.Moment;
   selectedMonthIndex: number;

src/app/modules/time-clock/components/entry-fields/entry-fields.component.ts

@@ -50,7 +50,7 @@ export class EntryFieldsComponent implements OnInit {
 
   ngOnInit(): void {
     this.store.dispatch(new LoadActivities());
-    this.store.dispatch(new entryActions.LoadEntries(new Date().getMonth() + 1));
+    this.store.dispatch(new entryActions.LoadEntries(12, 2020));
     this.actionsSubject$
       .pipe(filter((action: any) => action.type === ActivityManagementActionTypes.LOAD_ACTIVITIES_SUCCESS))
       .subscribe((action) => {

src/app/modules/time-clock/services/entry.service.spec.ts

@@ -54,11 +54,13 @@ describe('EntryService', () => {
   });
 
   it('load all Entries', () => {
+    const year = new Date().getFullYear();
     const month = new Date().getMonth();
+
     const timezoneOffset = new Date().getTimezoneOffset();
-    service.loadEntries(month).subscribe();
+    service.loadEntries(year, month).subscribe();
 
-    const loadEntryRequest = httpMock.expectOne(`${service.baseUrl}?month=${month}&timezone_offset=${timezoneOffset}`);
+    const loadEntryRequest = httpMock.expectOne(`${service.baseUrl}?month=${month}&year=${year}&timezone_offset=${timezoneOffset}`);
     expect(loadEntryRequest.request.method).toBe('GET');
 
   });

src/app/modules/time-clock/services/entry.service.ts

@@ -23,9 +23,9 @@ export class EntryService {
     return this.http.get(`${this.baseUrl}/running`);
   }
 
-  loadEntries(month): Observable<any> {
+  loadEntries(year, month): Observable<any> {
     const timezoneOffset = new Date().getTimezoneOffset();
-    return this.http.get(`${this.baseUrl}?month=${month}&timezone_offset=${timezoneOffset}`);
+    return this.http.get(`${this.baseUrl}?month=${month}&year=${year}&timezone_offset=${timezoneOffset}`);
   }
 
   createEntry(entryData): Observable<any> {

src/app/modules/time-clock/store/entry.actions.ts

@@ -99,7 +99,7 @@ export class LoadActiveEntryFail implements Action {
 export class LoadEntries implements Action {
   public readonly type = EntryActionTypes.LOAD_ENTRIES;
 
-  constructor(public month: number) {
+  constructor(public month: number, public year: number) {
   }
 }
 

src/app/modules/time-clock/store/entry.effects.ts

@@ -87,16 +87,18 @@ export class EntryEffects {
   @Effect()
   loadEntries$: Observable<Action> = this.actions$.pipe(
     ofType(actions.EntryActionTypes.LOAD_ENTRIES),
-    map((action: actions.LoadEntries) => action.month),
-    mergeMap((month) =>
-      this.entryService.loadEntries(month).pipe(
+    // tslint:disable-next-line:no-unused-expression
+    map((action: actions.LoadEntries) => (action.month, action.year)),
+    mergeMap((month, year) =>
+      this.entryService.loadEntries(month, year).pipe(
         map((entries) => new actions.LoadEntriesSuccess(entries)),
         catchError((error) => {
           this.toastrService.warning(`The data could not be loaded`);
           return of(new actions.LoadEntriesFail(error));
         })
       )
     )
+
   );
 
   @Effect()

src/app/modules/time-clock/store/entry.reducer.spec.ts

@@ -107,7 +107,9 @@ describe('entryReducer', () => {
   });
 
   it('on LoadEntries, isLoading is true', () => {
-    const action = new actions.LoadEntries(new Date().getMonth() + 1);
+    const month = 12;
+    const year = 2020;
+    const action = new actions.LoadEntries(month, year);
     const state = entryReducer(initialState, action);
     expect(state.timeEntriesDataSource.isLoading).toEqual(true);
   });

src/app/modules/time-entries/pages/time-entries.component.spec.ts

@@ -127,7 +127,8 @@ describe('TimeEntriesComponent', () => {
   }));
 
   it('when create time entries, the time entries should be queried', () => {
-    const currentMonth = new Date().getMonth() + 1;
+    const currentMonth = new Date().getMonth();
+    const year = new Date().getFullYear();
     const entryToSave = {
       entry: {
         project_id: 'project-id',
@@ -142,7 +143,7 @@ describe('TimeEntriesComponent', () => {
 
     component.saveEntry(entryToSave);
     expect(store.dispatch).toHaveBeenCalledWith(new entryActions.CreateEntry(entryToSave.entry));
-    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(currentMonth));
+    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(currentMonth, year));
   });
 
   it('when creating a new entry, then entryId should be null', () => {
@@ -324,11 +325,12 @@ describe('TimeEntriesComponent', () => {
   });
 
   it('should get the entry List by Month and year', () => {
-    const month = 1;
-    const year = 2020;
+    const month = new Date().getMonth();
+    const year = new Date().getFullYear();
+
     spyOn(store, 'dispatch');
-    component.dateSelected({monthIndex: month, year: 2020});
-    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(month));
+    component.dateSelected({monthIndex: month, year: year});
+    expect(store.dispatch).toHaveBeenCalledWith(new entryActions.LoadEntries(month + 1, year));
   });
 
   it('doSave when activeTimeEntry === null', waitForAsync(() => {