migrating onAbort fix from wow-libs + tests (#163)

* migrating onAbort fix from wow-libs + tests

* remove redundant viewEnter test + dispatching event

* adding back the test

* format

Author: ameerabuf

packages/interact/src/handlers/effectHandlers.ts

@@ -62,11 +62,14 @@ export function createTimeEffectHandler(
         animation.progress(0);
         delete element.dataset.interactEnter;
         if (animation.isCSS) {
-          animation.onFinish(() => {
+          const setEnterDone = () => {
             fastdom.mutate(() => {
               element.dataset.interactEnter = 'done';
             });
-          });
+          };
+
+          animation.onFinish(setEnterDone);
+          animation.onAbort(setEnterDone);
         }
         animation.play();
       }

packages/interact/src/handlers/viewEnter.ts

@@ -181,11 +181,14 @@ function addViewEnterHandler(
               requestAnimationFrame(setEnterStart);
             });
 
-            animation.onFinish(() => {
+            const setEnterDone = () => {
               fastdom.mutate(() => {
                 target.dataset.interactEnter = 'done';
               });
-            });
+            };
+
+            animation.onFinish(setEnterDone);
+            animation.onAbort(setEnterDone);
           } else {
             fastdom.mutate(setEnterStart);
           }

packages/interact/test/viewEnter.spec.ts

@@ -5,6 +5,7 @@ vi.mock('@wix/motion', () => ({
     play: vi.fn(),
     cancel: vi.fn(),
     onFinish: vi.fn(),
+    onAbort: vi.fn(),
     pause: vi.fn(),
     reverse: vi.fn(),
     progress: vi.fn(),
@@ -592,4 +593,80 @@ describe('viewEnter handler', () => {
       expect(observeSpy).not.toHaveBeenCalled();
     });
   });
+
+  describe('CSS animation abort handling', () => {
+    it('should set interactEnter to done when CSS animation is aborted', async () => {
+      let rejectFinished: (error: DOMException) => void;
+      const finishedPromise = new Promise((_resolve, reject) => {
+        rejectFinished = reject;
+      });
+
+      const cssAnimation = {
+        play: vi.fn(),
+        ready: Promise.resolve(),
+        finished: finishedPromise,
+        cancel: vi.fn(() => {
+          rejectFinished(new DOMException('The animation was aborted.', 'AbortError'));
+        }),
+      };
+
+      const mockAnimationGroup = {
+        animations: [cssAnimation],
+        isCSS: true,
+        ready: Promise.resolve(),
+        async play(callback?: () => void) {
+          for (const a of this.animations) {
+            a.play();
+          }
+          await Promise.all(this.animations.map((a: any) => a.ready));
+          callback?.();
+        },
+        async onFinish(callback: () => void) {
+          try {
+            await Promise.all(this.animations.map((a: any) => a.finished));
+            callback();
+          } catch (_error) {
+            /* empty */
+          }
+        },
+        async onAbort(callback: () => void) {
+          try {
+            await Promise.all(this.animations.map((a: any) => a.finished));
+          } catch (error: any) {
+            if (error.name === 'AbortError') {
+              callback();
+            }
+          }
+        },
+        cancel: vi.fn(),
+        pause: vi.fn(),
+        reverse: vi.fn(),
+        progress: vi.fn(),
+        persist: vi.fn(),
+        playState: 'idle',
+      };
+
+      viewEnterHandler.add(
+        element,
+        target,
+        { duration: 1000, namedEffect: { type: 'FadeIn' } },
+        { type: 'once' },
+        { animation: mockAnimationGroup as any },
+      );
+
+      const entry = createEntry({ isIntersecting: true });
+      getMainObserverCallback()([entry]);
+
+      // Wait for play's async callback to be invoked
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      // Cancel the CSSAnimation directly, simulating the browser aborting the animation
+      cssAnimation.cancel();
+
+      // Wait for onAbort to process the AbortError and set interactEnter
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(target.dataset.interactEnter).toBe('done');
+    });
+  });
 });

packages/motion/src/AnimationGroup.ts

@@ -107,6 +107,27 @@ export class AnimationGroup {
     }
   }
 
+  async onAbort(callback: () => void): Promise<void> {
+    try {
+      await Promise.all(this.animations.map((animation) => animation.finished));
+    } catch (error: any) {
+      if (error.name === 'AbortError') {
+        const a = this.animations[0];
+
+        if (a && !this.isCSS) {
+          const target = (a.effect as KeyframeEffect)?.target;
+
+          if (target) {
+            const cancelEvent = new Event('animationcancel');
+            target.dispatchEvent(cancelEvent);
+          }
+        }
+
+        callback();
+      }
+    }
+  }
+
   get finished() {
     return Promise.all(this.animations.map((animation) => animation.finished));
   }

packages/motion/test/AnimationGroup.spec.ts

@@ -929,6 +929,90 @@ describe('AnimationGroup', () => {
     });
   });
 
+  describe('onAbort()', () => {
+    test('should execute callback when a CSSAnimation is cancelled externally (not via AnimationGroup.cancel)', async () => {
+      const callback = vi.fn();
+      let rejectFinished: (error: any) => void;
+
+      const finishedPromise = new Promise<Animation>((_resolve, reject) => {
+        rejectFinished = reject;
+      });
+
+      const mockAnimation = createMockAnimation({
+        finished: finishedPromise,
+        cancel: vi.fn(() => {
+          rejectFinished(new DOMException('The animation was aborted.', 'AbortError'));
+        }),
+      });
+
+      const animationGroup = new AnimationGroup([mockAnimation]);
+      const abortPromise = animationGroup.onAbort(callback);
+
+      expect(callback).not.toHaveBeenCalled();
+
+      // Cancel the inner CSSAnimation directly, simulating the browser
+      // removing the animation (e.g. a viewEnter effect going out of range)
+      mockAnimation.cancel();
+
+      await abortPromise;
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    test('should execute callback when one of multiple animations is cancelled externally', async () => {
+      const callback = vi.fn();
+      let rejectFinished: (error: any) => void;
+
+      const cancelledAnimation = createMockAnimation({
+        finished: new Promise<Animation>((_resolve, reject) => {
+          rejectFinished = reject;
+        }),
+        cancel: vi.fn(() => {
+          rejectFinished(new DOMException('The animation was aborted.', 'AbortError'));
+        }),
+      });
+
+      const normalAnimation = createMockAnimation({
+        finished: new Promise<Animation>(() => {}),
+      });
+
+      const animationGroup = new AnimationGroup([normalAnimation, cancelledAnimation]);
+      const abortPromise = animationGroup.onAbort(callback);
+
+      cancelledAnimation.cancel();
+
+      await abortPromise;
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    test('should not execute callback for non-AbortError rejections', async () => {
+      const callback = vi.fn();
+
+      const mockAnimation = createMockAnimation({
+        finished: Promise.reject(new Error('Some other error')),
+      });
+
+      const animationGroup = new AnimationGroup([mockAnimation]);
+      await animationGroup.onAbort(callback);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    test('should not execute callback when animations finish successfully', async () => {
+      const callback = vi.fn();
+
+      const mockAnimation = createMockAnimation({
+        finished: Promise.resolve(undefined as any),
+      });
+
+      const animationGroup = new AnimationGroup([mockAnimation]);
+      await animationGroup.onAbort(callback);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
   describe('playState getter', () => {
     test('should return playState from first animation', () => {
       const mockAnimation1 = createMockAnimation({