How to test the following async function in angular?

Question

code to test:

async showSuccess() {
  this.msgs.push({severity: 'success', summary: 'Success.'});
  await delay(1000);
  this.msgs = [];
}

here's the test I tried but await delay(1000) isn't covered and so isn't this.msgs = []

it('should show message', async() => {
        spyOn(component, 'showSuccess');
        component.showSuccess();
        expect(component.showSuccess).toHaveBeenCalled();
    });

The method signature line is covered and the msgs being pushed is covered but not the last two lines.

Wait that show success was actually called before verifying it: await component.showSuccess(); — fjc
– fjc, Commented Aug 1, 2019 at 15:01
Also, I want to quickly point out that with this test, you are essentially testing whether JavaScript executes some method when it is expected to execute that method. This test says nothing about your business logics, but just that JS is able to properly execute a random method. — fjc
– fjc, Commented Aug 1, 2019 at 15:05
@fjc I tried doing it('should show message', () => { component.showSuccess(); expect(component.msgs = []).toBeTruthy(); }); but I got the same result. — nolanite1
– nolanite1, Commented Aug 1, 2019 at 15:11
You did not follow my recommendation to await component.showSuccess(). Also, you are expecting an assignment to a variable to be truthy. I don't know that that makes sense. — fjc
– fjc, Commented Aug 1, 2019 at 15:14
it('should show message', async() => { spyOn(component, 'showSuccess'); component.showSuccess(); expect(component.showSuccess).toHaveBeenCalled(); }); — nolanite1
– nolanite1, Commented Aug 1, 2019 at 15:19

fjc · Accepted Answer · 2019-08-01 15:36:25Z

So here's a complete Mocha/Chai based example that works and should show how you can implement a test like you are trying to:

const chai = require('chai');
const spies = require('chai-spies');
chai.use(spies);
const expect = chai.expect;

class ClassThatDoesStuff {

    randomArray = [];

    async doStuff() {
        console.log('Do stuff...');
        await new Promise((resolve) => setTimeout(resolve, 1000));
        this.randomArray.push('random entry');
        console.log('Done doing stuff');
    }
}

describe('Async Function Testing', () => {
    let objectThatDoesStuff = new ClassThatDoesStuff();

    it('should do things', async () => {
        const spy = chai.spy.on(objectThatDoesStuff, 'doStuff');
        await objectThatDoesStuff.doStuff();
        expect(spy).to.have.been.called();
        expect(objectThatDoesStuff.randomArray).to.contain('random entry');
    });
});

The most important point is: Before you assert that something was done by an asynchronous function, make sure to wait for that function to complete (in this case using await objectThatDoesStuff.doStuff(), in your case using await component.showSuccess()).

Collectives™ on Stack Overflow

How to test the following async function in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related