fix: #571 update async for waitForAsync

Author: scastillo-jp

src/app/modules/shared/time-range-form/time-range.component.spec.ts

@@ -1,5 +1,5 @@
 import { ToastrService, IndividualConfig } from 'ngx-toastr';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { TimeRangeFormComponent } from './time-range-form.component';
 import { EntryState } from '../../time-clock/store/entry.reducer';
@@ -39,7 +39,7 @@ describe('Reports Page', () => {
       entriesForReport: [timeEntry],
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [FormsModule, ReactiveFormsModule],
         declarations: [TimeRangeFormComponent, InputDateComponent],

src/app/modules/technology-report/components/technology-report-table/data.json

@@ -1,27 +1,40 @@
-{
-    "data": [
+[
+  {
+    "id": 1,
+    "name_technology": "Superman",
+    "users": [
       {
-        "technology": [
+        "id": 1,
+        "email_user": "[email protected]",
+        "time_spent": 10,
+        "project": [
           {
             "id": 1,
-            "name_technology": "Superman",
-            "users": [
-              {
-                "id": 1,
-                "email_user": "[email protected]",
-                "time_spent": 10,
-                "project": [
-                  {
-                    "id": "1",
-                    "project_name": "Time tracker",
-                    "time_spent": "8"
-                  }
-                ]
-              }
-            ],
-            "time_spent": 10
+            "project_name": "Time tracker",
+            "time_spent": 8
           }
         ]
       }
-    ]
-  }
+    ],
+    "time_spent": 10
+  },
+  {
+    "id": 2,
+    "name_technology": "Tor",
+    "users": [
+      {
+        "id": 1,
+        "email_user": "[email protected]",
+        "time_spent": 10,
+        "project": [
+          {
+            "id": 1,
+            "project_name": "Time tracker",
+            "time_spent": 8
+          }
+        ]
+      }
+    ],
+    "time_spent": 10
+  }
+]

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.html

@@ -9,24 +9,20 @@
     >
       <thead class="thead-blue">
         <tr class="d-flex">
-          <th class="col md-col">User email</th>
-          <th class="none" title="Duration (hours)">Time spend</th>
           <th class="none">Technology</th>
+          <th class="none">Time spend</th>
         </tr>
       </thead>
       <app-loading-bar
         *ngIf="dataSource.isLoading"
       ></app-loading-bar>
-      <tbody *ngIf="!dataSource.isLoading">
+      <tbody>
         <tr
           class="d-flex"
-          *ngFor="let entry of dataSource.data"
+          *ngFor="let data of technologies"
         >
-          <td class="col md-col">{{ entry.owner_email }}</td>
-          <td class="col lg-col">{{ entry.technologies }}</td>
-          <td class="col sm-col">
-            {{ entry.start_date | date: 'MM/dd/yyyy' }}
-          </td>
+          <td class="col md-col">{{ data.name_technology || '' }}</td>
+          <td class="col lg-col">{{ data.time_spent || ''}}</td>
         </tr>
       </tbody>
     </table>

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { Entry } from 'src/app/modules/shared/models';
 import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/substract-date.pipe';
@@ -35,7 +35,7 @@ describe('Reports Page', () => {
       }
     };
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [],
         declarations: [TechnologyReportTableComponent, SubstractDatePipe],
@@ -45,7 +45,7 @@ describe('Reports Page', () => {
 
     }));
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
       fixture = TestBed.createComponent(TechnologyReportTableComponent);
       component = fixture.componentInstance;
       store.setState(state);

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.ts

@@ -6,16 +6,18 @@ import * as moment from 'moment';
 import { Observable, Subject } from 'rxjs';
 import { Entry } from 'src/app/modules/shared/models';
 import { DataSource } from 'src/app/modules/shared/models/data-source.model';
-
 import { EntryState } from '../../../time-clock/store/entry.reducer';
 import { getReportDataSource } from '../../../time-clock/store/entry.selectors';
+import * as  dataMock from './data.json';
 
 @Component({
   selector: 'app-technology-report-table',
   templateUrl: './technology-report-table.component.html',
   styleUrls: ['./technology-report-table.component.scss']
 })
+
 export class TechnologyReportTableComponent implements OnInit, OnDestroy, AfterViewInit {
+
   dtOptions: any = {
     scrollY: '600px',
     paging: false,
@@ -64,14 +66,17 @@ export class TechnologyReportTableComponent implements OnInit, OnDestroy, AfterV
   isLoading$: Observable<boolean>;
   reportDataSource$: Observable<DataSource<Entry>>;
 
+  technologies: any  = (dataMock  as  any).default;
   constructor(private store: Store<EntryState>) {
     this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
   }
 
+
   ngOnInit(): void {
     this.reportDataSource$.subscribe((ds) => {
       this.rerenderDataTable();
     });
+    console.log('data', dataMock);
   }
 
   ngAfterViewInit(): void {

tsconfig.json

@@ -11,6 +11,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
+    "resolveJsonModule": true,
     "allowSyntheticDefaultImports": false,
     "typeRoots": [
       "node_modules/@types"