Skip to content

Commit 4b01968

Browse files
author
Sepand Parhami
committed
Add docs for animation test controller.
1 parent 4e65097 commit 4b01968

File tree

1 file changed

+52
-0
lines changed

1 file changed

+52
-0
lines changed

docs/animation-test-controller.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Animation Test Controller
2+
3+
## Overview
4+
5+
Helper test functions for controlling the state of CSS-based animations during tests. This allows you to move animations to a particular point in time so that you can verify the animations are working correctly.
6+
7+
## Usage
8+
9+
```javascript
10+
import {
11+
setup as setupAnimations,
12+
tearDown as tearDownAnimations,
13+
offset,
14+
} from '@ampproject/animations/dist/src/testing/animation-test-controller.js';
15+
16+
17+
describe('Some animation', () => {
18+
before(() => {
19+
setupAnimations();
20+
});
21+
22+
after(() => {
23+
tearDownAnimations();
24+
});
25+
26+
it('should render recorrectly 50ms in', () => {
27+
const animatingElement = …;
28+
doSomethingStartingAnAnimation();
29+
30+
offset(50);
31+
const {top} = animatingElement.getBoundingClientRect();
32+
expect(top).to.be.closeTo(100, 0.1);
33+
34+
offset(100); // Note, sets to t=100, not 150
35+
36+
});
37+
});
38+
```
39+
40+
The `offset` function takes an optional second argument that restricts the animation offsetting to just a single DOM subtree. This is useful if your test page has multiple animations, but you only really want to test a single one. For example:
41+
42+
```javascript
43+
it('should render the the interesting subtree correctly', () => {
44+
const interestingSubtree = document.querySelector('.interesting');
45+
offset(50, interestingSubtree);
46+
47+
});
48+
```
49+
50+
## How it works
51+
52+
The setup call will pause all animations on the page by setting their `animation-play-state` to `paused`. This applies to both existing animations and those that are defined in the future. Once setup, the `offset` function moves all animations within a subtree to a specific time by specifying a negative `animation-duration`. This works correctly, even if you have already specified an `animation-delay` on an Element. The offset specified takes into account any existing animation delay, so it will work correctly if some of your animations already have delays.

0 commit comments

Comments
 (0)