test: ioet#402 Fixing flaky test

Author: Juan Gabriel Guzman

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -1,9 +1,10 @@
-import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { formatDate } from '@angular/common';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActionsSubject } from '@ngrx/store';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
+import { AutocompleteLibModule } from 'angular-ng-autocomplete';
+import * as moment from 'moment';
 import { IndividualConfig, ToastrService } from 'ngx-toastr';
 import { getCreateError, getUpdateError } from 'src/app/modules/time-clock/store/entry.selectors';
 import { ProjectState } from '../../../customer-management/components/projects/components/store/project.reducer';
@@ -17,6 +18,7 @@ import { TechnologiesComponent } from './../technologies/technologies.component'
 import { DetailsFieldsComponent } from './details-fields.component';
 import { SaveEntryEvent } from './save-entry-event';
 
+
 describe('DetailsFieldsComponent', () => {
   type Merged = TechnologyState & ProjectState & EntryState;
   let component: DetailsFieldsComponent;
@@ -304,16 +306,15 @@ describe('DetailsFieldsComponent', () => {
     expect(component.saveEntry.emit).toHaveBeenCalledWith(data);
   });
 
-  // TODO Fix this test since it is failing.
-  // it('displays error message when the date selected is in the future', () => {
-  //   spyOn(toastrServiceStub, 'error');
+  it('displays error message when the date selected is in the future', () => {
+    spyOn(toastrServiceStub, 'error');
 
-  //   const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
-  //   component.entryForm.setValue({ ...formValues, entry_date: futureDate });
-  //   component.onSubmit();
+    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
+    component.entryForm.setValue({ ...formValues, entry_date: futureDate });
+    component.onSubmit();
 
-  //   expect(toastrServiceStub.error).toHaveBeenCalled();
-  // });
+    expect(toastrServiceStub.error).toHaveBeenCalled();
+  });
 
   /*
    TODO As part of https://github.com/ioet/time-tracker-ui/issues/424 a new parameter was added to the details-field-component,

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -2,6 +2,7 @@ import { formatDate } from '@angular/common';
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActionsSubject, select, Store } from '@ngrx/store';
+import * as moment from 'moment';
 import { ToastrService } from 'ngx-toastr';
 import { filter } from 'rxjs/operators';
 import { getCreateError, getUpdateError } from 'src/app/modules/time-clock/store/entry.selectors';
@@ -16,6 +17,7 @@ import { TechnologyState } from '../../store/technology.reducers';
 import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
 import { SaveEntryEvent } from './save-entry-event';
 
+
 type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
 @Component({
   selector: 'app-details-fields',
@@ -203,8 +205,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     if (this.goingToWorkOnThis) {
       delete entry.end_date;
     }
-
-    const isEntryDateInTheFuture = new Date(entryDate) > new Date();
+    const isEntryDateInTheFuture = moment(entryDate).isAfter(moment());
     if (isEntryDateInTheFuture) {
       this.toastrService.error('You cannot start a time-entry in the future');
       return;