chenglou / chenglou/react-motion
how to test animations
- Dominant language
- JavaScript
- Stars
- 21.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I'm using StaggeredMotion and spring to create a basic animation, and I'm trying to implement automated tests to check the animation is running as expected when triggered, however I can't figure out how to correctly implement this.
The idea is doing something like this:
```
describe('test animation', () => {
let clock;
beforeEach(() => {
clock = sinon.useFakeTimers();
})
afterEach(() => {
clock.restore();
});
it('animation should progress', () => {
[...]
clock.tick(200);
// check the state of some nodes here
[...]
});
});
```
But this doesn't seem to work as expected (I'm using a `create-react-app` environment), so I think I'm missing something important. Sorry if the question is dummy but I couldn't find examples about achieving this. I would appreciate if anyone could help ?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the StaggeredMotion and spring example in the create-react-app environment described, using Sinon fake timers as shown. Check how animation updates are scheduled and determine what a working automated test must observe after advancing the clock. Done means documenting a reliable testing approach with a representative example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing-qa
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100