@wix/interact 1.92.0 → 1.94.0

package/dist/esm/__tests__/interact.spec.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Interact } from '../core/Interact';
 import { add, addListItems } from '../core/add';
 import { remove } from '../core/remove';
@@ -308,6 +309,18 @@ describe('interact', () => {
       }
     };
 
+    // Mock PointerEvent (not available in JSDOM)
+    window.PointerEvent = class PointerEvent extends MouseEvent {
+      constructor(type, params) {
+        if (params === void 0) {
+          params = {};
+        }
+        super(type, params);
+        _defineProperty(this, "pointerType", void 0);
+        this.pointerType = params.pointerType || '';
+      }
+    };
+
     // Mock adoptedStyleSheets
     if (!document.adoptedStyleSheets) {
       document.adoptedStyleSheets = [];
@@ -675,6 +688,176 @@ describe('interact', () => {
         });
       });
     });
+    describe('null animation handling', () => {
+      it('should not add click handler when getAnimation returns null', () => {
+        Interact.destroy();
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create({
+          interactions: [{
+            trigger: 'click',
+            key: 'null-click-test',
+            effects: [{
+              effectId: 'null-test-effect'
+            }]
+          }],
+          effects: {
+            'null-test-effect': {
+              namedEffect: {
+                type: 'FadeIn'
+              },
+              duration: 500
+            }
+          }
+        });
+        getWebAnimation.mockReturnValueOnce(null);
+        element = document.createElement('interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(element, 'null-click-test');
+        expect(addEventListenerSpy).not.toHaveBeenCalled();
+      });
+      it('should not add hover handler when getAnimation returns null', () => {
+        Interact.destroy();
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create({
+          interactions: [{
+            trigger: 'hover',
+            key: 'null-hover-test',
+            effects: [{
+              effectId: 'null-test-effect'
+            }]
+          }],
+          effects: {
+            'null-test-effect': {
+              namedEffect: {
+                type: 'FadeIn'
+              },
+              duration: 500
+            }
+          }
+        });
+        getWebAnimation.mockReturnValueOnce(null);
+        element = document.createElement('interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(element, 'null-hover-test');
+        expect(addEventListenerSpy).not.toHaveBeenCalled();
+      });
+      it('should not add animationEnd handler when getAnimation returns null', () => {
+        Interact.destroy();
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create({
+          interactions: [{
+            trigger: 'animationEnd',
+            key: 'null-animationend-test',
+            params: {
+              effectId: 'trigger-effect'
+            },
+            effects: [{
+              effectId: 'null-test-effect'
+            }]
+          }],
+          effects: {
+            'null-test-effect': {
+              namedEffect: {
+                type: 'FadeIn'
+              },
+              duration: 500
+            }
+          }
+        });
+        getWebAnimation.mockReturnValueOnce(null);
+        element = document.createElement('interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(element, 'null-animationend-test');
+        expect(addEventListenerSpy).not.toHaveBeenCalled();
+      });
+      it('should not add viewProgress handler when getWebAnimation returns null (ViewTimeline)', () => {
+        Interact.destroy();
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create({
+          interactions: [{
+            trigger: 'viewProgress',
+            key: 'null-viewprogress-test',
+            effects: [{
+              effectId: 'null-scroll-effect'
+            }]
+          }],
+          effects: {
+            'null-scroll-effect': {
+              namedEffect: {
+                type: 'FadeScroll',
+                range: 'in',
+                opacity: 0
+              }
+            }
+          }
+        });
+        getWebAnimation.mockReturnValueOnce(null);
+        element = document.createElement('interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        add(element, 'null-viewprogress-test');
+
+        // getWebAnimation should have been called
+        expect(getWebAnimation).toHaveBeenCalled();
+      });
+      it('should not add viewProgress handler when getScrubScene returns null (polyfill)', () => {
+        // Remove ViewTimeline support to use polyfill path
+        delete window.ViewTimeline;
+        Interact.destroy();
+        const {
+          getScrubScene
+        } = require('@wix/motion');
+        Interact.create({
+          interactions: [{
+            trigger: 'viewProgress',
+            key: 'null-viewprogress-polyfill-test',
+            effects: [{
+              effectId: 'null-scroll-effect'
+            }]
+          }],
+          effects: {
+            'null-scroll-effect': {
+              namedEffect: {
+                type: 'FadeScroll',
+                range: 'in',
+                opacity: 0
+              }
+            }
+          }
+        });
+        getScrubScene.mockReturnValueOnce(null);
+        element = document.createElement('interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        add(element, 'null-viewprogress-polyfill-test');
+
+        // getScrubScene should have been called
+        expect(getScrubScene).toHaveBeenCalled();
+
+        // Restore ViewTimeline
+        window.ViewTimeline = class ViewTimeline {
+          constructor(options) {
+            return {
+              ...options
+            };
+          }
+        };
+      });
+    });
     describe('pointerMove', () => {
       it('should add handler for pointerMove trigger', () => {
         const {
@@ -1933,5 +2116,157 @@ describe('interact', () => {
       });
     });
   });
+  describe('selector condition type', () => {
+    it('should pass selectorCondition to handler when condition type is selector', async () => {
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-test',
+          effects: [{
+            key: 'selector-test',
+            effectId: 'test-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'test-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      testElement.append(div);
+      add(testElement, 'selector-test');
+
+      // The handler should have received selectorCondition
+      // We verify by checking the animation is created (condition doesn't block setup)
+      const {
+        getWebAnimation
+      } = await import('@wix/motion');
+      expect(getWebAnimation).toHaveBeenCalled();
+    });
+    it('should skip handler execution when element does not match selector condition', async () => {
+      const {
+        getWebAnimation
+      } = await import('@wix/motion');
+      const mockAnimation = {
+        play: jest.fn(),
+        cancel: jest.fn(),
+        onFinish: jest.fn(),
+        reverse: jest.fn(),
+        progress: jest.fn(),
+        playState: 'idle',
+        isCSS: false
+      };
+      getWebAnimation.mockReturnValue(mockAnimation);
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-skip-test',
+          effects: [{
+            key: 'selector-skip-test',
+            effectId: 'skip-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'skip-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      // div does NOT have .active class
+      testElement.append(div);
+      add(testElement, 'selector-skip-test');
+
+      // Simulate click - animation should NOT play because element doesn't match .active
+      // Must use PointerEvent with pointerType because click handler filters by pointerType
+      div.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        pointerType: 'mouse'
+      }));
+      expect(mockAnimation.play).not.toHaveBeenCalled();
+    });
+    it('should execute handler when element matches selector condition', async () => {
+      const {
+        getWebAnimation
+      } = await import('@wix/motion');
+      const mockAnimation = {
+        play: jest.fn(),
+        cancel: jest.fn(),
+        onFinish: jest.fn(),
+        reverse: jest.fn(),
+        progress: jest.fn(),
+        playState: 'idle',
+        isCSS: false
+      };
+      getWebAnimation.mockReturnValue(mockAnimation);
+      const config = {
+        conditions: {
+          active: {
+            type: 'selector',
+            predicate: '.active'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'selector-match-test',
+          effects: [{
+            key: 'selector-match-test',
+            effectId: 'match-effect',
+            conditions: ['active']
+          }]
+        }],
+        effects: {
+          'match-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+      Interact.create(config);
+      const testElement = document.createElement('interact-element');
+      const div = document.createElement('div');
+      div.classList.add('active'); // div HAS .active class
+      testElement.append(div);
+      add(testElement, 'selector-match-test');
+
+      // Simulate click - animation SHOULD play because element matches .active
+      // Must use PointerEvent with pointerType because click handler filters by pointerType
+      div.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        pointerType: 'mouse'
+      }));
+      expect(mockAnimation.play).toHaveBeenCalled();
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map