refactor: TT-304 Handle message: Making readonly variables, new methods and tests

Author: Edgar Guaman

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

@@ -54,13 +54,13 @@
             <th class="col"></th>
           </tr>
         </thead>
-        <tr *ngIf="dataSource.isLoading">
-          <td class="text-center" colspan="7">No data available in table</td>
+        <tr *ngIf="checkIfDataSourceIsLoading(dataSource)">
+          <td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
         </tr>
         <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
         <tbody *ngIf="!dataSource.isLoading">
-          <tr *ngIf="dataSource?.data.length === 0">
-            <td class="text-center" colspan="7">No data available in table</td>
+          <tr *ngIf="checkIfDataSourceIsEmpty(dataSource)">
+            <td class="text-center" colspan="7">{{NO_DATA_MESSAGE}}</td>
           </tr>
           <tr class="d-flex" *ngFor="let entry of dataSource.data">
             <td class="col">{{ entry.start_date | date: 'MM/dd/yyyy' }}</td>

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

@@ -668,4 +668,16 @@ describe('TimeEntriesComponent', () => {
 
     expect(HTMLTimeEntriesView).not.toBeNull();
   });
+
+  it('checkIfDataSourceIsLoading should be false when dataSource.isLoading is false', () => {
+    const expectedValue = false;
+
+    expect(component.checkIfDataSourceIsLoading(state.timeEntriesDataSource)).toEqual(expectedValue);
+  });
+
+  it('checkIfDataSourceIsEmpty should be false when dataSource.data.length is not zero', () => {
+    const expectedValue = false;
+
+    expect(component.checkIfDataSourceIsEmpty(state.timeEntriesDataSource)).toEqual(expectedValue);
+  });
 });

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

@@ -38,6 +38,8 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
   selectedYear: number;
   selectedMonthAsText: string;
   isActiveEntryOverlapping = false;
+  readonly NO_DATA_MESSAGE: string = 'No data available in table';
+  timeEntry: DataSource<Entry>;
   constructor(
     private store: Store<EntryState>,
     private toastrService: ToastrService,
@@ -216,4 +218,18 @@ export class TimeEntriesComponent implements OnInit, OnDestroy {
       });
     }
   }
+
+  checkIfDataSourceIsLoading(data: DataSource<Entry>): boolean {
+    if (data.isLoading) {
+      return true;
+    }
+    return false;
+  }
+
+  checkIfDataSourceIsEmpty(data: DataSource<Entry>): boolean {
+    if (data.data.length === 0) {
+      return true;
+    }
+    return false;
+  }
 }