@wix/interact 1.66.0

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

@@ -0,0 +1,944 @@
+"use strict";
+
+var _interact = require("../interact");
+var _utilities = require("../handlers/utilities");
+// Mock @wix/motion module
+jest.mock('@wix/motion', () => ({
+  getWebAnimation: jest.fn().mockReturnValue({
+    play: jest.fn(),
+    cancel: jest.fn()
+  }),
+  getScrubScene: jest.fn().mockReturnValue({}),
+  getEasing: jest.fn().mockImplementation(v => v)
+}));
+
+// Mock kuliso module
+jest.mock('kuliso', () => ({
+  Pointer: jest.fn().mockImplementation(() => ({
+    start: jest.fn(),
+    destroy: jest.fn()
+  }))
+}));
+
+// Mock fizban module
+jest.mock('fizban', () => ({
+  Scroll: jest.fn().mockImplementation(() => ({
+    start: jest.fn(),
+    end: jest.fn()
+  }))
+}));
+describe('interact', () => {
+  let element;
+  const mockConfig = {
+    interactions: [{
+      trigger: 'viewEnter',
+      source: '#logo-entrance',
+      params: {
+        threshold: 0.2
+      },
+      effects: [{
+        target: '#logo-entrance',
+        effectId: 'logo-arc-in'
+      }, {
+        target: '#logo-click',
+        effectId: 'logo-bounce'
+      }]
+    }, {
+      trigger: 'pageVisible',
+      source: '#logo-loop',
+      effects: [{
+        target: '#logo-loop',
+        effectId: 'logo-poke'
+      }]
+    }, {
+      trigger: 'animationEnd',
+      source: '#logo-animation-end',
+      params: {
+        effectId: 'logo-arc-in'
+      },
+      effects: [{
+        target: '#logo-animation-end',
+        effectId: 'logo-poke'
+      }]
+    }, {
+      trigger: 'pointerMove',
+      source: '#logo-mouse',
+      params: {
+        hitArea: 'root'
+      },
+      effects: [{
+        target: '#logo-mouse',
+        effectId: 'logo-track-mouse'
+      }]
+    }, {
+      trigger: 'click',
+      source: '#logo-click',
+      params: {
+        type: 'alternate'
+      },
+      effects: [{
+        target: '#logo-click',
+        effectId: 'logo-bounce'
+      }]
+    }, {
+      trigger: 'click',
+      source: '#logo-click',
+      params: {
+        method: 'toggle'
+      },
+      effects: [{
+        target: '#logo-click',
+        effectId: 'logo-transition-hover'
+      }]
+    }, {
+      trigger: 'hover',
+      source: '#logo-hover',
+      params: {
+        type: 'alternate'
+      },
+      effects: [{
+        target: '#logo-hover',
+        effectId: 'logo-arc-in'
+      }, {
+        target: '#logo-hover',
+        effectId: 'logo-arc-in',
+        namedEffect: {
+          type: 'ArcIn',
+          direction: 'left',
+          power: 'hard'
+        }
+      }]
+    }, {
+      trigger: 'hover',
+      source: '#logo-hover',
+      params: {
+        method: 'toggle'
+      },
+      effects: [{
+        target: '#logo-hover',
+        effectId: 'logo-transition-hover'
+      }]
+    }, {
+      trigger: 'viewProgress',
+      source: '#logo-scroll',
+      effects: [{
+        target: '#logo-scroll',
+        effectId: 'logo-fade-scroll'
+      }]
+    }],
+    effects: {
+      'logo-arc-in': {
+        namedEffect: {
+          type: 'ArcIn',
+          direction: 'right',
+          power: 'medium'
+        },
+        duration: 1200
+      },
+      'logo-arc-in-with-target': {
+        target: '#logo-hover',
+        namedEffect: {
+          type: 'ArcIn',
+          direction: 'right',
+          power: 'medium'
+        },
+        duration: 1200
+      },
+      'logo-track-mouse': {
+        namedEffect: {
+          type: 'TrackMouse',
+          distance: {
+            value: 20,
+            type: 'px'
+          },
+          axis: 'both',
+          power: 'medium'
+        },
+        transitionDuration: 300,
+        transitionEasing: 'easeOut',
+        centeredToTarget: true
+      },
+      'logo-bounce': {
+        namedEffect: {
+          type: 'BounceIn',
+          power: 'hard',
+          direction: 'center',
+          distanceFactor: 1.2
+        },
+        duration: 500
+      },
+      'logo-fade-scroll': {
+        namedEffect: {
+          type: 'FadeScroll',
+          range: 'in',
+          opacity: 0
+        },
+        rangeStart: {
+          name: 'contain',
+          offset: {
+            value: -10,
+            type: 'percentage'
+          }
+        },
+        rangeEnd: {
+          name: 'contain',
+          offset: {
+            value: 110,
+            type: 'percentage'
+          }
+        }
+      },
+      'logo-transition-hover': {
+        transition: {
+          duration: 300,
+          styleProperties: [{
+            name: 'opacity',
+            value: '0'
+          }]
+        }
+      },
+      'logo-poke': {
+        namedEffect: {
+          type: 'Poke',
+          direction: 'left',
+          power: 'medium'
+        },
+        duration: 500
+      }
+    }
+  };
+  beforeEach(() => {
+    element = document.createElement('wix-interact-element');
+    const div = document.createElement('div');
+    element.append(div);
+
+    // Mock Web Animations API
+    window.KeyframeEffect = class KeyframeEffect {
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      constructor(element, keyframes, options) {
+        return {
+          element,
+          keyframes,
+          options
+        };
+      }
+    };
+
+    // Mock ViewTimeline
+    window.ViewTimeline = class ViewTimeline {
+      constructor(options) {
+        return {
+          ...options
+        };
+      }
+    };
+
+    // Mock Animation
+    window.Animation = class Animation {
+      constructor(effect, timeline) {
+        return {
+          effect,
+          timeline,
+          play: jest.fn()
+        };
+      }
+    };
+
+    // Mock IntersectionObserver
+    window.IntersectionObserver = class IntersectionObserver {
+      constructor(callback, options) {
+        return {
+          callback,
+          options,
+          observe: jest.fn(),
+          unobserve: jest.fn()
+        };
+      }
+    };
+
+    // Mock CSSStyleSheet
+    window.CSSStyleSheet = class CSSStyleSheet {
+      constructor(_) {
+        return {
+          replace: jest.fn()
+        };
+      }
+    };
+
+    // Mock adoptedStyleSheets
+    if (!document.adoptedStyleSheets) {
+      document.adoptedStyleSheets = [];
+    }
+
+    // Mock matchMedia for condition testing
+    mockMatchMedia();
+  });
+  function mockMatchMedia(matchingQueries = []) {
+    const queryRule = `(${matchingQueries.join(') and (')})`;
+    const mockMQL = query => {
+      return {
+        matches: queryRule === query,
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn()
+      };
+    };
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(mockMQL)
+    });
+  }
+  function createCascadingTestConfig(conditions = {}, matchingConditions = []) {
+    mockMatchMedia(matchingConditions);
+    return {
+      conditions: {
+        desktop: {
+          type: 'media',
+          predicate: 'min-width: 1024px'
+        },
+        mobile: {
+          type: 'media',
+          predicate: 'max-width: 767px'
+        },
+        tablet: {
+          type: 'media',
+          predicate: '(min-width: 768px) and (max-width: 1023px)'
+        },
+        ...conditions
+      },
+      interactions: [{
+        trigger: 'click',
+        source: '#cascade-source',
+        effects: [{
+          target: '#cascade-target',
+          effectId: 'default-effect'
+        }, {
+          target: '#cascade-target',
+          effectId: 'default-effect',
+          conditions: ['desktop'],
+          namedEffect: {
+            type: 'SlideIn',
+            direction: 'right',
+            power: 'medium'
+          },
+          duration: 800
+        }, {
+          target: '#cascade-target',
+          effectId: 'default-effect',
+          conditions: ['mobile'],
+          namedEffect: {
+            type: 'BounceIn',
+            direction: 'center',
+            power: 'hard'
+          },
+          duration: 600
+        }]
+      }],
+      effects: {
+        'default-effect': {
+          namedEffect: {
+            type: 'FadeIn',
+            power: 'medium'
+          },
+          duration: 500
+        }
+      }
+    };
+  }
+  afterEach(() => {
+    jest.clearAllMocks();
+    (0, _interact.remove)('#logo-entrance');
+    (0, _interact.remove)('#logo-loop');
+    (0, _interact.remove)('#logo-animation-end');
+    (0, _interact.remove)('#logo-mouse');
+    (0, _interact.remove)('#logo-click');
+    (0, _interact.remove)('#logo-hover');
+    (0, _interact.remove)('#logo-scroll');
+    // Clean up cascading test elements
+    (0, _interact.remove)('#cascade-source');
+    (0, _interact.remove)('#cascade-target');
+    (0, _interact.remove)('#cascade-target-1');
+    (0, _interact.remove)('#cascade-target-2');
+    (0, _interact.remove)('#multi-source-1');
+    (0, _interact.remove)('#multi-source-2');
+    // Clear Interact instances to ensure test isolation
+    _interact.Interact.instances.length = 0;
+    _interact.Interact.elementCache.clear();
+  });
+  describe('init Interact', () => {
+    it('should initialize with valid config', () => {
+      _interact.Interact.create({});
+      expect(customElements.get('wix-interact-element')).toBeDefined();
+    });
+  });
+  describe('add interaction', () => {
+    beforeEach(() => {
+      _interact.Interact.create(mockConfig);
+    });
+    describe('hover', () => {
+      it('should add handler for hover trigger with alternate type', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _interact.add)(element, '#logo-hover');
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(4);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseleave', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(div, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'ArcIn',
+            direction: 'left',
+            power: 'hard'
+          })
+        }));
+      });
+    });
+    describe('click', () => {
+      it('should add handler for click trigger', () => {
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _interact.add)(element, '#logo-click');
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+      });
+    });
+    describe('viewEnter', () => {
+      it('should add handler for viewEnter trigger', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-entrance');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object));
+      });
+      it('should add handler for viewEnter trigger when target is added before source', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        const elementClick = document.createElement('wix-interact-element');
+        const divClick = document.createElement('div');
+        element.append(divClick);
+        (0, _interact.add)(elementClick, '#logo-click');
+        (0, _interact.add)(element, '#logo-entrance');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object));
+      });
+    });
+    describe('pageVisible', () => {
+      it('should add handler for pageVisible trigger', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-loop');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object));
+      });
+    });
+    describe('animationEnd', () => {
+      it('should add handler for animationEnd trigger', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-animation-end');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.any(Object));
+      });
+    });
+    describe('pointerMove', () => {
+      it('should add handler for pointerMove trigger', () => {
+        const {
+          getScrubScene
+        } = require('@wix/motion');
+        const {
+          Pointer
+        } = require('kuliso');
+        const pointerInstance = {
+          start: jest.fn(),
+          destroy: jest.fn()
+        };
+        Pointer.mockImplementation(() => pointerInstance);
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-mouse');
+        expect(getScrubScene).toHaveBeenCalledTimes(1);
+        expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-track-mouse'])), expect.objectContaining({
+          trigger: 'pointer-move'
+        }));
+        expect(pointerInstance.start).toHaveBeenCalled();
+      });
+    });
+    describe('viewProgress', () => {
+      it('should add handler for viewProgress trigger with native ViewTimeline support', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-scroll');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+      });
+      it('should add handler for viewProgress trigger with fizban polyfill', () => {
+        // Remove ViewTimeline support
+        delete window.ViewTimeline;
+        const {
+          getScrubScene
+        } = require('@wix/motion');
+        const {
+          Scroll
+        } = require('fizban');
+        const scrollInstance = {
+          start: jest.fn(),
+          destroy: jest.fn()
+        };
+        Scroll.mockImplementation(() => scrollInstance);
+        element = document.createElement('wix-interact-element');
+        const div = document.createElement('div');
+        element.append(div);
+        (0, _interact.add)(element, '#logo-scroll');
+        expect(getScrubScene).toHaveBeenCalledTimes(1);
+        expect(getScrubScene).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining((0, _utilities.effectToAnimationOptions)(mockConfig.effects['logo-fade-scroll'])), expect.objectContaining({
+          trigger: 'view-progress'
+        }));
+        setTimeout(() => {
+          expect(scrollInstance.start).toHaveBeenCalled();
+        }, 0);
+      });
+    });
+  });
+  describe('remove interaction', () => {
+    beforeEach(() => {
+      _interact.Interact.create(mockConfig);
+    });
+    it('should remove event listeners', () => {
+      element = document.createElement('wix-interact-element');
+      const div = document.createElement('div');
+      element.append(div);
+      const removeEventListenerSpy = jest.spyOn(div, 'removeEventListener');
+      (0, _interact.add)(element, '#logo-click');
+      (0, _interact.remove)('#logo-click');
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
+    });
+    it('should do nothing if key does not exist', () => {
+      expect(() => (0, _interact.remove)('non-existent-key')).not.toThrow();
+    });
+    it('should cleanup pointer effects', () => {
+      const {
+        Pointer
+      } = require('kuliso');
+      const pointerInstance = {
+        start: jest.fn(),
+        destroy: jest.fn()
+      };
+      Pointer.mockImplementation(() => pointerInstance);
+      element = document.createElement('wix-interact-element');
+      const div = document.createElement('div');
+      element.append(div);
+      (0, _interact.add)(element, '#logo-mouse');
+      (0, _interact.remove)('#logo-mouse');
+      expect(pointerInstance.destroy).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('effect cascading logic', () => {
+    describe('basic cascading behavior', () => {
+      it('should apply only first matching effect for same target', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = createCascadingTestConfig({}, ['min-width: 1024px']);
+        _interact.Interact.create(config);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        const addEventListenerSpy = jest.spyOn(sourceDiv, 'addEventListener');
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+        expect(addEventListenerSpy).toHaveBeenCalledTimes(1);
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.objectContaining({
+          passive: true
+        }));
+
+        // Should create animation with desktop effect (first matching condition)
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn',
+            direction: 'right'
+          })
+        }));
+      });
+      it('should apply default effect when no conditions match', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = createCascadingTestConfig({}, []); // No matching conditions
+
+        _interact.Interact.create(config);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+
+        // Should create animation with default effect
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn',
+            power: 'medium'
+          })
+        }));
+      });
+      it('should apply mobile effect when mobile condition matches', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = createCascadingTestConfig({}, ['max-width: 767px']);
+        _interact.Interact.create(config);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+
+        // Should create animation with mobile effect
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn',
+            direction: 'center'
+          })
+        }));
+      });
+    });
+    describe('element addition order', () => {
+      it('should work when source is added before target', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = createCascadingTestConfig({}, ['min-width: 1024px']);
+        _interact.Interact.create(config);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+
+        // Add source first
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        // Add target second
+        (0, _interact.add)(targetElement, '#cascade-target');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn'
+          })
+        }));
+      });
+      it('should work when target is added before source', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const config = createCascadingTestConfig({}, ['min-width: 1024px']);
+        _interact.Interact.create(config);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+
+        // Add target first
+        (0, _interact.add)(targetElement, '#cascade-target');
+        // Add source second
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn'
+          })
+        }));
+      });
+    });
+    describe('complex cascading scenarios', () => {
+      it('should handle multiple targets with different conditions', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const complexConfig = {
+          conditions: {
+            desktop: {
+              type: 'media',
+              predicate: 'min-width: 1024px'
+            },
+            mobile: {
+              type: 'media',
+              predicate: 'max-width: 767px'
+            }
+          },
+          interactions: [{
+            trigger: 'click',
+            source: '#multi-source-1',
+            effects: [{
+              target: '#cascade-target-1',
+              effectId: 'desktop-effect',
+              conditions: ['desktop']
+            }, {
+              target: '#cascade-target-2',
+              effectId: 'mobile-effect',
+              conditions: ['mobile']
+            }]
+          }],
+          effects: {
+            'desktop-effect': {
+              namedEffect: {
+                type: 'SlideIn',
+                direction: 'right',
+                power: 'medium'
+              },
+              duration: 800
+            },
+            'mobile-effect': {
+              namedEffect: {
+                type: 'BounceIn',
+                direction: 'center',
+                power: 'hard'
+              },
+              duration: 600
+            }
+          }
+        };
+        mockMatchMedia(['min-width: 1024px']); // Only desktop matches
+        _interact.Interact.create(complexConfig);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const target1Element = document.createElement('wix-interact-element');
+        const target1Div = document.createElement('div');
+        target1Element.append(target1Div);
+        const target2Element = document.createElement('wix-interact-element');
+        const target2Div = document.createElement('div');
+        target2Element.append(target2Div);
+        (0, _interact.add)(sourceElement, '#multi-source-1');
+        (0, _interact.add)(target1Element, '#cascade-target-1');
+        (0, _interact.add)(target2Element, '#cascade-target-2');
+
+        // Only desktop effect should be applied (mobile condition doesn't match)
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(target1Element.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn'
+          })
+        }));
+
+        // Should not be called for mobile effect since condition doesn't match
+        expect(getWebAnimation).not.toHaveBeenCalledWith(target2Element.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }));
+      });
+      it('should handle effects with multiple conditions', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const multiConditionConfig = {
+          conditions: {
+            desktop: {
+              type: 'media',
+              predicate: 'min-width: 1024px'
+            },
+            'high-res': {
+              type: 'media',
+              predicate: 'min-resolution: 2dppx'
+            }
+          },
+          interactions: [{
+            trigger: 'click',
+            source: '#cascade-source',
+            effects: [{
+              target: '#cascade-target',
+              effectId: 'premium-effect'
+            }, {
+              target: '#cascade-target',
+              effectId: 'premium-effect',
+              conditions: ['desktop', 'high-res']
+            }]
+          }],
+          effects: {
+            'premium-effect': {
+              namedEffect: {
+                type: 'Poke',
+                direction: 'left',
+                power: 'hard'
+              },
+              duration: 1000
+            }
+          }
+        };
+
+        // Both conditions match
+        mockMatchMedia(['min-width: 1024px', 'min-resolution: 2dppx']);
+        _interact.Interact.create(multiConditionConfig);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+
+        // Premium effect should be applied since both conditions match
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'Poke'
+          })
+        }));
+      });
+    });
+    describe('condition matching edge cases', () => {
+      it('should handle missing conditions gracefully', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const configWithMissingCondition = {
+          conditions: {
+            desktop: {
+              type: 'media',
+              predicate: 'min-width: 1024px'
+            }
+          },
+          interactions: [{
+            trigger: 'click',
+            source: '#cascade-source',
+            effects: [{
+              target: '#cascade-target',
+              effectId: 'default-effect'
+            }, {
+              target: '#cascade-target',
+              effectId: 'default-effect',
+              conditions: ['nonexistent-condition']
+            }]
+          }],
+          effects: {
+            'default-effect': {
+              namedEffect: {
+                type: 'FadeIn',
+                power: 'medium'
+              },
+              duration: 500
+            }
+          }
+        };
+        mockMatchMedia(['min-width: 1024px']);
+        _interact.Interact.create(configWithMissingCondition);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+
+        // Should fall back to default effect since condition doesn't exist
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(targetElement.firstElementChild, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }));
+      });
+      it('should handle empty conditions array', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const configWithEmptyConditions = {
+          conditions: {},
+          interactions: [{
+            trigger: 'click',
+            source: '#cascade-source',
+            effects: [{
+              target: '#cascade-target',
+              effectId: 'always-applied-effect',
+              conditions: []
+            }]
+          }],
+          effects: {
+            'always-applied-effect': {
+              namedEffect: {
+                type: 'Spin',
+                direction: 'clockwise',
+                power: 'medium'
+              },
+              duration: 1000
+            }
+          }
+        };
+        mockMatchMedia([]);
+        _interact.Interact.create(configWithEmptyConditions);
+        const sourceElement = document.createElement('wix-interact-element');
+        const sourceDiv = document.createElement('div');
+        sourceElement.append(sourceDiv);
+        const targetElement = document.createElement('wix-interact-element');
+        const targetDiv = document.createElement('div');
+        targetElement.append(targetDiv);
+        (0, _interact.add)(sourceElement, '#cascade-source');
+        (0, _interact.add)(targetElement, '#cascade-target');
+
+        // Effect should be applied since empty conditions array should always match
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(expect.any(HTMLElement), expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'Spin'
+          })
+        }));
+      });
+    });
+  });
+});
+//# sourceMappingURL=interact.spec.js.map