Move the logic responsible for associating animations with elements inside the Animation class itself

Author: adjsky

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

@@ -36,6 +36,24 @@ describe('Animations API', () => {
     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';

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,18 +1,9 @@
 import { mockAnimation } from './Animation';
-
-const elementAnimations = new Map<Element, Animation[]>();
-
-function removeFromAnimations(element: Element, animation: Animation) {
-  const animations = elementAnimations.get(element);
-
-  if (animations) {
-    const index = animations.indexOf(animation);
-
-    if (index !== -1) {
-      animations.splice(index, 1);
-    }
-  }
-}
+import {
+  getAnimations,
+  getAllAnimations,
+  clearAnimations,
+} from './elementAnimations';
 
 function animate(
   this: Element,
@@ -26,32 +17,11 @@ function animate(
     animation.id = options.id;
   }
 
-  const animations = elementAnimations.get(this) ?? [];
-
-  animations.push(animation);
-
-  elementAnimations.set(this, animations);
-
-  animation.addEventListener('finish', () =>
-    removeFromAnimations(this, animation)
-  );
-  animation.addEventListener('cancel', () =>
-    removeFromAnimations(this, animation)
-  );
-
   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;
@@ -79,7 +49,7 @@ function mockAnimationsApi() {
   });
 
   afterEach(() => {
-    elementAnimations.clear();
+    clearAnimations();
   });
 
   afterAll(() => {