using async helper function

Author: devpato

src/app/hero-detail/hero-detail.component.spec.ts

@@ -3,7 +3,8 @@ import {
   ComponentFixture,
   fakeAsync,
   tick,
-  flush
+  flush,
+  async
 } from "@angular/core/testing"; // for integration test
 import { HeroDetailComponent } from "./hero-detail.component";
 import { ActivatedRoute } from "@angular/router";
@@ -52,33 +53,47 @@ describe(`Hero Detail Component`, () => {
     ); //assert;
   });
 
-  it(`should call updateHero when save is called`, done => {
-    //now the test will wait until the async code its called
-    mockHeroService.updateHero.and.returnValue(of({}));
+  // it(`should call updateHero when save is called`, done => {
+  //   //now the test will wait until the async code its called
+  //   mockHeroService.updateHero.and.returnValue(of({}));
 
-    fixture.detectChanges(); //at
+  //   fixture.detectChanges(); //at
 
-    fixture.componentInstance.save();
+  //   fixture.componentInstance.save();
 
-    setTimeout(() => {
-      //bacause we set 250 on the heroDeatails deboucen cal function
-      expect(mockHeroService.updateHero).toHaveBeenCalled();
-      done();
-    }, 300);
-  });
+  //   setTimeout(() => {
+  //     //bacause we set 250 on the heroDeatails deboucen cal function
+  //     expect(mockHeroService.updateHero).toHaveBeenCalled();
+  //     done();
+  //   }, 300);
+  // });
+
+  // it("should call updateHero when save is called", fakeAsync(() => {
+  //   //now the test will wait until the async code its called
+  //   mockHeroService.updateHero.and.returnValue(of({}));
 
-  it("should call updateHero when save is called", fakeAsync(() => {
+  //   fixture.detectChanges(); //at
+
+  //   fixture.componentInstance.save();
+  //   //bacause we set 250 on the heroDeatails deboucen cal function
+
+  //   flush(); //look at the zone to see if there any task waiting
+
+  //   //tick(250); //control of zone.js can be manipulate the time inside of it thanks to thick
+  //   expect(mockHeroService.updateHero).toHaveBeenCalled();
+  // }));
+
+  it("should call updateHero when save is called", async(() => {
     //now the test will wait until the async code its called
     mockHeroService.updateHero.and.returnValue(of({}));
 
     fixture.detectChanges(); //at
 
     fixture.componentInstance.save();
-    //bacause we set 250 on the heroDeatails deboucen cal function
 
-    flush(); //look at the zone to see if there any task waiting
-
-    //tick(250); //control of zone.js can be manipulate the time inside of it thanks to thick
-    expect(mockHeroService.updateHero).toHaveBeenCalled();
+    fixture.whenStable().then(() => {
+      //checks for promises if they are all resolve
+      expect(mockHeroService.updateHero).toHaveBeenCalled();
+    });
   }));
 });

src/app/hero-detail/hero-detail.component.ts

@@ -32,15 +32,22 @@ export class HeroDetailComponent implements OnInit {
     this.location.back();
   }
 
+  // save(): void {
+  //   debounce(
+  //     //this makes our code async
+  //     () => {
+  //       this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
+  //     },
+  //     250,
+  //     false
+  //   )();
+  // }
+
   save(): void {
-    debounce(
-      //this makes our code async
-      () => {
-        this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
-      },
-      250,
-      false
-    )();
+    const p = new Promise(resolve => {
+      this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
+      resolve();
+    });
   }
 }