Merge pull request #42 from adjsky/master

animation.id, animation.cancel

Author: trurl-master

src/mocks/web-animations-api/Animation.ts

@@ -2,6 +2,7 @@ import { mockKeyframeEffect } from './KeyframeEffect';
 import { mockAnimationPlaybackEvent } from './AnimationPlaybackEvent';
 import { mockDocumentTimeline } from './DocumentTimeline';
 import { getEasingFunctionFromString } from './easingFunctions';
+import { addAnimation, removeAnimation } from './elementAnimations';
 
 type ActiveAnimationTimeline = AnimationTimeline & {
   currentTime: NonNullable<AnimationTimeline['currentTime']>;
@@ -136,15 +137,33 @@ class MockedAnimation extends EventTarget implements Animation {
     return null;
   }
 
+  #addToTarget() {
+    if (!this.#hasKeyframeEffect() || this.effect.target == null) {
+      return;
+    }
+
+    addAnimation(this.effect.target, this);
+  }
+
+  #removeFromTarget() {
+    if (!this.#hasKeyframeEffect() || this.effect.target == null) {
+      return;
+    }
+
+    removeAnimation(this.effect.target, this);
+  }
+
   #getNewFinishedPromise() {
     this.#promiseStates.finished = 'pending';
 
     return new Promise<Animation>((resolve, reject) => {
       this.#resolvers.finished.resolve = (animation) => {
+        this.#removeFromTarget();
         this.#promiseStates.finished = 'resolved';
         resolve(animation);
       };
       this.#resolvers.finished.reject = (error) => {
+        this.#removeFromTarget();
         this.#promiseStates.finished = 'rejected';
         reject(error);
       };
@@ -153,6 +172,7 @@ class MockedAnimation extends EventTarget implements Animation {
 
   #getNewReadyPromise() {
     this.#promiseStates.ready = 'pending';
+    this.#addToTarget();
 
     return new Promise<Animation>((resolve, reject) => {
       this.#resolvers.ready.resolve = (animation) => {

src/mocks/web-animations-api/__tests__/index.test.ts

@@ -35,4 +35,40 @@ describe('Animations API', () => {
     expect(element.getAnimations().length).toBe(0);
     expect(document.getAnimations().length).toBe(0);
   });
+
+  it('should add/delete an animation to/from element and document lists if created manually', async () => {
+    const element = document.createElement('div');
+
+    const keyframeEffect = new KeyframeEffect(element, { opacity: 0 }, 100);
+    const animation = new Animation(keyframeEffect);
+    animation.play();
+
+    expect(element.getAnimations().length).toBe(1);
+    expect(element.getAnimations()).toContain(animation);
+    expect(document.getAnimations().length).toBe(1);
+    expect(document.getAnimations()).toContain(animation);
+
+    await animation.finished;
+
+    expect(element.getAnimations().length).toBe(0);
+    expect(document.getAnimations().length).toBe(0);
+  });
+
+  it('should read id from options and attach it to the returned animation', async () => {
+    const element = document.createElement('div');
+    const testId = 'testId';
+
+    const animation = element.animate({ opacity: 0 }, { id: testId });
+    expect(animation.id).toBe(testId);
+  });
+
+  it('should remove an animation from element if the animation was cancelled', () => {
+    const element = document.createElement('div');
+
+    const animation = element.animate({ opacity: 0 }, 1000);
+    expect(element.getAnimations().length).toBe(1);
+
+    animation.cancel();
+    expect(element.getAnimations().length).toBe(0);
+  });
 });

src/mocks/web-animations-api/elementAnimations.ts

@@ -0,0 +1,32 @@
+const elementAnimations = new Map<Element, Animation[]>();
+
+export function removeAnimation(element: Element, animation: Animation) {
+  const animations = elementAnimations.get(element);
+
+  if (animations) {
+    const index = animations.indexOf(animation);
+
+    if (index !== -1) {
+      animations.splice(index, 1);
+    }
+  }
+}
+
+export function addAnimation(element: Element, animation: Animation) {
+  const animations = elementAnimations.get(element) ?? [];
+  animations.push(animation);
+
+  elementAnimations.set(element, animations);
+}
+
+export function getAnimations(this: Element) {
+  return elementAnimations.get(this) ?? [];
+}
+
+export function getAllAnimations() {
+  return Array.from(elementAnimations.values()).flat();
+}
+
+export function clearAnimations() {
+  elementAnimations.clear();
+}

src/mocks/web-animations-api/index.ts

@@ -1,47 +1,27 @@
 import { mockAnimation } from './Animation';
-
-const elementAnimations = new Map<Element, Animation[]>();
+import {
+  getAnimations,
+  getAllAnimations,
+  clearAnimations,
+} from './elementAnimations';
 
 function animate(
   this: Element,
   keyframes: Keyframe[],
-  options?: number | KeyframeEffectOptions
+  options?: number | KeyframeAnimationOptions
 ) {
   const keyframeEffect = new KeyframeEffect(this, keyframes, options);
 
   const animation = new Animation(keyframeEffect);
-
-  const animations = elementAnimations.get(this) ?? [];
-
-  animations.push(animation);
-
-  elementAnimations.set(this, animations);
-
-  animation.addEventListener('finish', () => {
-    const animations = elementAnimations.get(this);
-
-    if (animations) {
-      const index = animations.indexOf(animation);
-
-      if (index !== -1) {
-        animations.splice(index, 1);
-      }
-    }
-  });
+  if (typeof options == 'object' && options.id) {
+    animation.id = options.id;
+  }
 
   animation.play();
 
   return animation;
 }
 
-function getAnimations(this: Element) {
-  return elementAnimations.get(this) ?? [];
-}
-
-function getAllAnimations() {
-  return Array.from(elementAnimations.values()).flat();
-}
-
 function mockAnimationsApi() {
   const savedAnimate = Element.prototype.animate;
   const savedGetAnimations = Element.prototype.getAnimations;
@@ -69,7 +49,7 @@ function mockAnimationsApi() {
   });
 
   afterEach(() => {
-    elementAnimations.clear();
+    clearAnimations();
   });
 
   afterAll(() => {