feat: #310 Fixing some unit tests

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -1,6 +1,6 @@
 <div class="activity-list">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Activity</th>
         <th class="col-3 text-center"></th>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -1,5 +1,5 @@
 <table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
-  <thead class="thead-orange">
+  <thead class="thead-blue">
     <tr class="d-flex">
       <th class="col-9">Name</th>
       <th class="col-3 text-center">Options</th>

src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html

@@ -1,6 +1,6 @@
 <div class="project-type-list-div">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Project type</th>
         <th class="col-3 text-center"></th>

src/app/modules/customer-management/components/projects/components/project-list/project-list.component.html

@@ -1,6 +1,6 @@
 <div class="project-list">
   <table class="table table-sm table-bordered table-striped">
-    <thead class="thead-orange">
+    <thead class="thead-blue">
       <tr class="d-flex">
         <th class="col-9">Project</th>
         <th class="col-3 text-center"></th>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -1,27 +1,29 @@
-<div class="container-flex m-5">
-<table class="table table-sm table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
-  <thead class="thead-orange">
-  <tr class="d-flex">
-    <th class="col md-col">Date</th>
-    <th class="col sm-col">Duration</th>
-    <th class="col md-col">Project</th>
-    <th class="col md-col">Ticket</th>
-    <th class="col lg-col" >Description</th>
-    <th class="col lg-col">Technologies</th>
-  </tr>
-  </thead>
-  <tbody>
-  <tr
-    class="d-flex"
-    *ngFor="let entry of data"
-  >
-    <td class="col md-col"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
-    <td class="col sm-col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
-    <td class="col md-col"> {{ entry.project_name }} </td>
-    <td class="col md-col"> {{ entry.uri }} </td>
-    <td class="col lg-col multiline-col"> {{ entry.description }} </td>
-    <td class="col lg-col multiline-col"> {{ entry.technologies }} </td>
-  </tr>
-  </tbody>
-</table>
+<div class="row mt-5">
+  <div class="col">
+    <table class="table table-sm table-striped" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
+      <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col md-col">Date</th>
+        <th class="col sm-col">Duration</th>
+        <th class="col md-col">Project</th>
+        <th class="col md-col">Ticket</th>
+        <th class="col lg-col">Description</th>
+        <th class="col lg-col">Technologies</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr
+        class="d-flex"
+        *ngFor="let entry of data"
+      >
+        <td class="col md-col"> {{ entry.start_date | date: 'dd/MM/yyyy' }} </td>
+        <td class="col sm-col"> {{ entry.end_date | substractDate: entry.start_date }} </td>
+        <td class="col md-col"> {{ entry.project_name }} </td>
+        <td class="col md-col"> {{ entry.uri }} </td>
+        <td class="col lg-col multiline-col"> {{ entry.description }} </td>
+        <td class="col lg-col multiline-col"> {{ entry.technologies }} </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
 </div>

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -7,7 +7,7 @@
 }
 
 .lg-col{
-  min-width: 20em;
+  width: 15em;
 }
 
 .multiline-col{

src/app/modules/reports/components/time-range-form/time-range-form.component.html

@@ -1,26 +1,25 @@
-<div class="container-flex">
-  <form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
-    <div class="row">
-      <div class="col">
-        <div class="input-group">
-          <app-input-label text="Start Date"></app-input-label>
-          <app-input-date formControlName="startDate" required="true"></app-input-date>
-        </div>
-      </div>
-      <div class="col">
-        <div class="input-group">
-          <app-input-label text="End Date"></app-input-label>
-          <app-input-date formControlName="endDate" required="true"></app-input-date>
-        </div>
+<form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
+  <div class="row">
+    <div class="col">
+      <div class="input-group">
+        <app-input-label text="Start Date"></app-input-label>
+        <app-input-date formControlName="startDate" required="true"></app-input-date>
       </div>
     </div>
-    <div class="row">
-      <div class="col">
-        <button type="submit" class="btn btn-primary float-right"
-                [disabled]="!(reportForm.touched && reportForm.valid)">Search
-        </button>
+    <div class="col">
+      <div class="input-group">
+        <app-input-label text="End Date"></app-input-label>
+        <app-input-date formControlName="endDate" required="true"></app-input-date>
       </div>
     </div>
-  </form>
-</div>
+  </div>
+  <div class="row mt-3">
+    <div class="col">
+      <button type="submit" class="btn btn-primary float-right"
+              [disabled]="!(reportForm.touched && reportForm.valid)">Search
+      </button>
+    </div>
+  </div>
+</form>
+
 

src/app/modules/reports/pages/reports.component.html

@@ -1,4 +1,3 @@
-<div class="w-100">
-  <app-time-range-form></app-time-range-form>
-  <app-time-entries-table></app-time-entries-table>
-</div>
+<app-time-range-form></app-time-range-form>
+<app-time-entries-table></app-time-entries-table>
+

src/app/modules/reports/pages/reports.component.spec.ts

@@ -6,17 +6,11 @@ describe('ReportsComponent', () => {
   let component: ReportsComponent;
   let fixture: ComponentFixture<ReportsComponent>;
 
-  function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
-    const fixture = TestBed.createComponent(ReportsComponent);
-    const app = fixture.debugElement.componentInstance;
-    return { fixture, app };
-  }
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ReportsComponent],
     }).compileComponents();
+    fixture = TestBed.createComponent(ReportsComponent);
   }));
 
   beforeEach(() => {
@@ -30,16 +24,11 @@ describe('ReportsComponent', () => {
   });
 
   it('should have form and datatable components', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { fixture } = setup();
-
     fixture.detectChanges();
 
     const compile = fixture.debugElement.nativeElement;
-    const div = compile.querySelector('div');
     const reportForm = compile.querySelector('app-time-range-form');
     const reportDataTable = compile.querySelector('app-time-entries-table');
-    expect(div).toBeTruthy();
     expect(reportForm).toBeTruthy();
     expect(reportDataTable).toBeTruthy();
   }));

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

@@ -1,7 +1,7 @@
 import {TestBed} from '@angular/core/testing';
 import {provideMockActions} from '@ngrx/effects/testing';
 import {EntryEffects} from './entry.effects';
-import {Observable, of} from 'rxjs';
+import {Observable, of, throwError} from 'rxjs';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {ToastrModule} from 'ngx-toastr';
 import {Action} from '@ngrx/store';
@@ -34,7 +34,7 @@ describe('TimeEntryActionEffects', () => {
     expect(effects).toBeTruthy();
   });
 
-  it('When the service returns a value, then LOAD_ENTRIES_BY_TIME_RANGE_SUCCESS should be triggered', async () => {
+  it('When the service returns a value, then LOAD_ENTRIES_BY_TIME_RANGE_SUCCESS should be triggered',  () => {
     const timeRange: TimeEntriesTimeRange = {start_date: new Date(), end_date: new Date()};
     actions$ = of({type: EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE, timeRange});
     const serviceSpy = spyOn(service, 'loadEntriesByTimeRange');
@@ -44,20 +44,16 @@ describe('TimeEntryActionEffects', () => {
       expect(action.type).toEqual(EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE_SUCCESS);
     });
 
-    expect(service.loadEntriesByTimeRange).toHaveBeenCalledWith(timeRange);
   });
 
   it('When the service fails, then LOAD_ENTRIES_BY_TIME_RANGE_FAIL should be triggered', async () => {
-    const timeRange: TimeEntriesTimeRange = {start_date: new Date(), end_date: new Date()};
-    actions$ = of({type: EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE, timeRange});
-    const serviceSpy = spyOn(service, 'loadEntriesByTimeRange');
-    serviceSpy.and.throwError('error getting time entries');
-
-    effects.loadEntriesByTimeRange$.subscribe(action => {
-      expect(action.type).toEqual(EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE_FAIL);
-    });
+      const timeRange: TimeEntriesTimeRange = {start_date: new Date(), end_date: new Date()};
+      actions$ = of({type: EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE, timeRange});
+      spyOn(service, 'loadEntriesByTimeRange').and.returnValue(throwError('any error'));
 
-    expect(service.loadEntriesByTimeRange).toHaveBeenCalledWith(timeRange);
+      effects.loadEntriesByTimeRange$.subscribe(action => {
+        expect(action.type).toEqual(EntryActionTypes.LOAD_ENTRIES_BY_TIME_RANGE_FAIL);
+      });
   });
 
   // TODO Implement the remaining unit tests for the other effects.

src/app/modules/time-entries/pages/time-entries.component.html

@@ -1,4 +1,4 @@
-<div class="container-time-entries">
+<div>
   <div class="row">
     <div class="col">
       <button
@@ -17,7 +17,7 @@
     <div style="height: 15px;"></div>
 
     <table class="table table-sm table-striped mb-0">
-      <thead class="thead-orange">
+      <thead class="thead-blue">
         <tr class="d-flex">
           <th class="col">Date</th>
           <th class="col">Time in - out</th>

src/styles/colors.scss

@@ -37,7 +37,7 @@ $info: #00BAEE;
 }
 
 
-.thead-orange {
+.thead-blue {
   background-color: $primary;
   color: white;
 }