Jump to content
Search Community

jest testing gsap w/react hooks

RoyM test
Moderator Tag

Recommended Posts

Are there some good examples of testing react hooks with gsap code? I found some older threads on the topic, but got the sense that the Greensock folks seem to prefer the older style (React Classes). Happy to post some examples of my attempts if that helps.

Link to comment
Share on other sites

Over-testing can become an issue more than a problem and I don't recommend testing for example whether or not s GSAP instance is running, or if the target of the GSAP instance was moved to this or that position, rotated or it's opacity changed. The core functionality of an library/framework/app is responsibility of the team that writes that particular code, not the people that uses it. If GSAP does or doesn't do what is supposed to do, the GSAP team should run their own tests to ensure that to the users. In the same way your duty as a developer is to ensure that your apps work the way your clients ask.

 

My advice is to test state/props updates, api calls returning the expected data, etc., and that the side effects of those are actually triggered. Testing what those side effects do is, IMHO, a waste of time and make writing tests even more complex that writing the code itself. I've seen cases were actually writing tests becomes more painful than writing the app which is pure nonsense.

 

With that preface out of the way, the question would be: What exactly you want to test?

  • Like 2
Link to comment
Share on other sites

That's good advice.. my use case is that I have a complex sequence of animations with nested timelines.. kinda like Siggy's tutorial at https://academy.siggyworks.com/p/web-animation-with-svg-and-greensock  and wanted to assert the final state of an svg element. If I could just see an example of how to test the simplest thing, such as that a box is now at 100, 0 (from 0,0).. that would be helpful. My thought is that once you have a complex animation, you should be able to inject/modify the logic and not have to re-run the whole animation to verify your changes, so a way to compress the timeline or mock timers would be needed. thanks

Link to comment
Share on other sites

Hi,

 

This is exactly the type of things I don't test, because if you change the target file, you have to change your assertions and perhaps in different screen sizes you'll have different values, so you'll end up testing in a real browser no matter what. Also is quite logical that you don't want to wait the amount of time the animation, because of that you need to set up a specific duration depending on the process environment, which means either add a conditional logic for every GSAP instance you want to test or create a new master timeline with the main root GSAP instance and set it's duration to 0.1 second or something like that. Then you'd have to get the styles of the element (or perhaps attributes values if you're using the attribute plugin for the SVG elements) and compare them to what you expect them to be.

 

Normally I use the React Testing Library https://testing-library.com/docs/react-testing-library/intro but I run tests for API calls, state and props updates, nothing more than that. Perhaps @elegantseagulls runs tests for GSAP instances, like I said in my previous post, unless my client forces me to do so (no one has so far) I don't run such tests and I don't plan to do it in the near future.

 

Finally you can easily add tests in a codesandbox. Just remember to install the react testing library dependencies:

 

https://codesandbox.io/docs/tests

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

I'm a bit late to the party here but am now looking up testing solutions for GSAP and can think of at least one good reason to automate tests. I've found that results can be rather inconsistent especially when wrangling Safari. Rather going back and forth all the time to make sure that animated elements are it least in the general area you expect it to be (or that it didn't completely crash the browser on mobile safari), it might be nice to automate these things and be alerted to that effect instead. Right now, it is quite a pain to have to verify any change across several mediums for any change, especially when those changes potentially cause regressions by overloading what some browsers are currently capable of handling.

Link to comment
Share on other sites

Hi @dasein and welcome to the GreenSock forums!

 

I don't think unit testing can accommodate for testing specific browser quirks. What you need to check is Selenium testing which is what QA Engineers use for automated testing in the browser, but I have zero experience with it.

 

As I stated before in this thread I'm not a fan of unit testing UI's and certainly not animations, and what you're mentioning are very specific browser problems that normally require manual testing.

 

Sorry I can't be of more assistance regarding this, hopefully another user with more experience can chime in and offer more and better solutions to this.

 

Finally, thanks for being a Club GreenSock member and supporting GSAP!

 

Happy Tweening!

  • Like 2
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...