How to test angular async function which has await statement in the code block

Question

I am trying to test a simple function in angular using karma and jasmine.

class

export class Acl {
  async caller() {
    console.log("first statement");
    const calledMe = await this.callMe().toPromise();
    return calledMe;
  }

  callMe() {
    return new Observable((observer) => observer.next({ something: "key" }));
  }
}

test file

import { Acl } from "./main";
import { fakeAsync, tick } from "@angular/core/testing";
import { Observable } from "rxjs";

describe("Hello world", () => {
  it("test the async", fakeAsync(() => {
    const t = new Acl();
    spyOn(t, "callMe").and.returnValue(
      new Observable((observer) => observer.next({ something: "key" }))
    );

    const cl = t.caller();

    console.log("a print ", cl);
    tick();
  }));
});

the output for the print statement in the test case is

How to test such functions.

ggradnig · Accepted Answer · 2020-06-11 13:37:39Z

1

Your test should be made up of at least one expectation, else you aren't testing for a specific result but just that the code runs without errors.

In your case I think you could store the spy as a constant and then expect that it has been called after tick, like that:

describe("Hello world", () => {
  it("test the async", fakeAsync(() => {
    const t = new Acl();
    const spy = spyOn(t, "callMe").and.returnValue(
      new Observable((observer) => observer.next({ something: "key" }))
    );

    t.caller();
    tick();

    expect(spy).toHaveBeenCalled()
  }));
});

answered Jun 11, 2020 at 13:37

ggradnig

14.3k4 gold badges43 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ketu Over a year ago

if I add expectation the thing remains the same. the statements after the await do not get executed. I need to test statements after the await call the code I have added is simplified version of what i am trying.

Coderer · Accepted Answer · 2020-10-27 16:50:53Z

The test shown in the other answer is correctly written and should work -- the expect statement should fire and pass.

If it's not passing, it could be due to this Zone.js issue. If your tests are running as native async/await (target ES2017 or higher), Zone cannot hook your await statement, so tick() will not cause it to proceed. You can test this by putting logging statements immediately before and after the await line and the tick() line:

  async caller() {
    console.log("before await");
    const calledMe = await this.callMe().toPromise();
    console.log("after await");
    return calledMe;
  }

  // ...

  it("test the async", fakeAsync(() => {
    const t = new Acl();
    const spy = spyOn(t, "callMe").and.returnValue(
      new Observable((observer) => observer.next({ something: "key" }))
    );

    t.caller();
    console.log("before tick");
    tick();
    console.log("after tick");

    expect(spy).toHaveBeenCalled()
  }));

If you run this with target: "es2015" in your tsconfig, you should see "before await", "before tick", "after await", "after tick", then your test should pass. If you run it with target: "es2017" or later, like 2018/2020/esnext, you should see "before await", "before tick", "after tick", then your test should fail, then "after await" will probably log after the test body function has totally finished executing.

As an aside, this drove me crazy for about 2 days. Users of the ng CLI get a warning when they try to go past es2015, but not if you compile your project using the AngularCompilerPlugin webpack plugin directly, though that should be fixed soon.

Collectives™ on Stack Overflow

How to test angular async function which has await statement in the code block

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related