Jump to content
Search Community

Gsap `.then()` callback func doesn't get triggered when running tests

Hashira test
Moderator Tag

Go to solution Solved by Hashira,

Recommended Posts

Hi there,

So I am using gsap for animation in a NextJs project and there are some component that has little animations that I am trying to test.

To be direct I stimulate a user click interaction in the test and check to see if the  "aria-*" attribute or "data-*" attribute has been updated to the correct state when the animation is done but all test fails. I am using the gsap `.then` callback to trigger this update when the animation is done.

It works fine in the dev and prod env but the `.then` callback function fails to run in a test env.

I have created a minimal demo of my issue, please find the link below
https://stackblitz.com/edit/stackblitz-starters-mvcff3?file=app%2Fpage.test.tsx


Thank you.

Link to comment
Share on other sites

Hi,

 

Sorry about the issues, but honestly I've never been to keen on unit testing, even less GSAP instances or effects of it, I just don't see the need for it, but that's just me.

 

I fiddled around with your demo and the issue here is that the test seems to run and finish before the GSAP instance is completed, I added a dummy test assertion:

expect("true").toMatch("true");

So the test will always succeed, and added this to the GSAP code:

console.log('click handler'); // <- YES
// Animate box
gsap
  .to(boxRef.current, {
  x: 120,
  rotation: 360,
  onStart: () => {
    console.log('tween started', Date.now());// <- YES
  },
  onComplete: () => {
    boxRef.current.setAttribute('data-animated', 'true');
    console.log('complete', Date.now()); // <- NO
  },
})
  .then(() => {
  console.log('THEN CALLBACK', Date.now()); // <- NO
});

So I see the first two logs in the terminal running the test but not the other two. That clearly means that the GSAP instance is not being completed in the test environment. I even tried returning the GSAP instance, expecting that returning the promise could work with the test but it didn't work. The fact that the onStart callback is working tells me that the test environment is running this code, the async/await is not waiting for the GSAP instance to be completed.

 

In fact running this on the test file:

// Stimulate user interactions
console.log("before", Date.now());// before 1714688301281
await user.click(screen.getByRole('button'));
console.log("AFTER", Date.now());// AFTER 1714688301370

// 1714688301370 - 1714688301281  = 89

As you can see only 89 milliseconds elapsed , while the GSAP instance has a default duration of 500 MS, that confirms that the test is not really waiting for the animation to be completed.

 

I wish I knew what the issue is here but is clearly not a GSAP related one, as far as I can see. Sorry I can't be of more assistance.

 

Happy Tweening!

Link to comment
Share on other sites

  • Solution

Thank you @Rodrigo

I have been able to solve the issue, but your explanation nudged me in the right direction on solving the issue.

Since I had to wait for GSAP instance to complete running. I was able to solve this by putting the test assertion in a waitFor function.

So by doing this

 

 await waitFor(() => {
            const element = screen.getByText("String")
 
            expect(element).toHaveAttribute("aria-current", "page")
        })


All test passed

  • Like 1
Link to comment
Share on other sites

Hey, is great to hear that you were able to solve this. Honestly I never used Vitest before, the few times I worked with Jest and before that with Mocha and Chai.

 

Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity ?

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...