@wix/interact 1.85.0 → 1.89.0

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

@@ -2,6 +2,7 @@ import { Interact } from '../core/Interact';
 import { add, addListItems } from '../core/add';
 import { remove } from '../core/remove';
 import { effectToAnimationOptions } from '../handlers/utilities';
+import TRIGGER_TO_HANDLER_MODULE_MAP from '../handlers';
 
 // Mock @wix/motion module
 jest.mock('@wix/motion', () => {
@@ -249,7 +250,7 @@ describe('interact', () => {
     }
   });
   beforeEach(() => {
-    element = document.createElement('wix-interact-element');
+    element = document.createElement('interact-element');
     const div = document.createElement('div');
     element.append(div);
 
@@ -408,14 +409,14 @@ describe('interact', () => {
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
       Interact.create({});
-      expect(customElements.get('wix-interact-element')).toBeDefined();
+      expect(customElements.get('interact-element')).toBeDefined();
     });
   });
   describe('destroy Interact instance', () => {
     it('should clear an instance entire cache', () => {
       const instance = Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
-      element.dataset.wixPath = 'logo-entrance';
+      element = document.createElement('interact-element');
+      element.dataset.interactKey = 'logo-entrance';
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-entrance');
@@ -439,7 +440,7 @@ describe('interact', () => {
     });
     it('should clear all elements from cache', () => {
       Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-hover');
@@ -449,10 +450,10 @@ describe('interact', () => {
     });
     it('should call disconnect on all cached elements', () => {
       Interact.create(getMockConfig());
-      const element1 = document.createElement('wix-interact-element');
+      const element1 = document.createElement('interact-element');
       const div1 = document.createElement('div');
       element1.append(div1);
-      const element2 = document.createElement('wix-interact-element');
+      const element2 = document.createElement('interact-element');
       const div2 = document.createElement('div');
       element2.append(div2);
       add(element1, 'logo-hover');
@@ -465,7 +466,7 @@ describe('interact', () => {
     });
     it('should clean up interactions after destroy', () => {
       Interact.create(getMockConfig());
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-click');
@@ -476,7 +477,7 @@ describe('interact', () => {
 
       // Re-create instance and verify it works independently
       Interact.create(getMockConfig());
-      const newElement = document.createElement('wix-interact-element');
+      const newElement = document.createElement('interact-element');
       const newDiv = document.createElement('div');
       newElement.append(newDiv);
       const newAddEventListenerSpy = jest.spyOn(newDiv, 'addEventListener');
@@ -490,9 +491,9 @@ describe('interact', () => {
     //   Interact.create(mockConfig);
 
     //   element = document.createElement(
-    //     'wix-interact-element',
-    //   ) as IWixInteractElement;
-    //   element.dataset.wixPath = 'logo-click';
+    //     'interact-element',
+    //   ) as IInteractElement;
+    //   element.dataset.interactKey = 'logo-click';
     //   const div = document.createElement('div');
     //   element.append(div);
 
@@ -535,7 +536,7 @@ describe('interact', () => {
           }
         }
       });
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-hover');
@@ -560,7 +561,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
@@ -587,7 +588,7 @@ describe('interact', () => {
     });
     describe('click', () => {
       it('should add handler for click trigger', () => {
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
@@ -603,7 +604,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-entrance');
@@ -616,15 +617,15 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         div.id = 'logo-entrance';
-        element.dataset.wixPath = 'logo-entrance';
+        element.dataset.interactKey = 'logo-entrance';
         element.append(div);
-        const elementClick = document.createElement('wix-interact-element');
+        const elementClick = document.createElement('interact-element');
         const divClick = document.createElement('div');
         divClick.id = 'logo-click';
-        elementClick.dataset.wixPath = 'logo-click';
+        elementClick.dataset.interactKey = 'logo-click';
         elementClick.append(divClick);
         add(elementClick, 'logo-click');
         add(element, 'logo-entrance');
@@ -648,7 +649,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-loop');
@@ -663,7 +664,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-animation-end');
@@ -686,7 +687,7 @@ describe('interact', () => {
           destroy: jest.fn()
         };
         Pointer.mockImplementation(() => pointerInstance);
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-mouse');
@@ -702,7 +703,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-scroll');
@@ -725,7 +726,7 @@ describe('interact', () => {
           destroy: jest.fn()
         };
         Scroll.mockImplementation(() => scrollInstance);
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         element.append(div);
         add(element, 'logo-scroll');
@@ -740,7 +741,7 @@ describe('interact', () => {
     });
     describe('listContainer', () => {
       it('should add a handler per list item for click trigger with listContainer', () => {
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -766,7 +767,7 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -782,7 +783,7 @@ describe('interact', () => {
         expect(getWebAnimation.mock.calls[1][0]).toBe(li2);
       });
       it('should add a handler per newly added list item for click trigger with listContainer', () => {
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-list';
@@ -816,9 +817,9 @@ describe('interact', () => {
         const {
           getWebAnimation
         } = require('@wix/motion');
-        element = document.createElement('wix-interact-element');
+        element = document.createElement('interact-element');
         const div = document.createElement('div');
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const divTarget = document.createElement('div');
         const ul = document.createElement('ul');
         ul.id = 'logo-scroll-list';
@@ -857,7 +858,7 @@ describe('interact', () => {
       Interact.destroy();
     });
     it('should remove event listeners', () => {
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       const removeEventListenerSpy = jest.spyOn(div, 'removeEventListener');
@@ -878,7 +879,7 @@ describe('interact', () => {
         destroy: jest.fn()
       };
       Pointer.mockImplementation(() => pointerInstance);
-      element = document.createElement('wix-interact-element');
+      element = document.createElement('interact-element');
       const div = document.createElement('div');
       element.append(div);
       add(element, 'logo-mouse');
@@ -894,10 +895,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         const addEventListenerSpy = jest.spyOn(sourceDiv, 'addEventListener');
@@ -926,10 +927,10 @@ describe('interact', () => {
         const config = createCascadingTestConfig({}, []); // No matching conditions
 
         Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         add(sourceElement, 'cascade-source');
@@ -952,10 +953,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['max-width: 767px']);
         Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         add(sourceElement, 'cascade-source');
@@ -980,10 +981,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
 
@@ -1006,10 +1007,10 @@ describe('interact', () => {
         } = require('@wix/motion');
         const config = createCascadingTestConfig({}, ['min-width: 1024px']);
         Interact.create(config);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
 
@@ -1077,13 +1078,13 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']); // Only desktop matches
         Interact.create(complexConfig);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const target1Element = document.createElement('wix-interact-element');
+        const target1Element = document.createElement('interact-element');
         const target1Div = document.createElement('div');
         target1Element.append(target1Div);
-        const target2Element = document.createElement('wix-interact-element');
+        const target2Element = document.createElement('interact-element');
         const target2Div = document.createElement('div');
         target2Element.append(target2Div);
         add(sourceElement, 'multi-source-1');
@@ -1151,10 +1152,10 @@ describe('interact', () => {
         // Both conditions match
         mockMatchMedia(['min-width: 1024px', 'min-resolution: 2dppx']);
         Interact.create(multiConditionConfig);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         add(sourceElement, 'cascade-source');
@@ -1207,10 +1208,10 @@ describe('interact', () => {
         };
         mockMatchMedia(['min-width: 1024px']);
         Interact.create(configWithMissingCondition);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         add(sourceElement, 'cascade-source');
@@ -1254,10 +1255,10 @@ describe('interact', () => {
         };
         mockMatchMedia([]);
         Interact.create(configWithEmptyConditions);
-        const sourceElement = document.createElement('wix-interact-element');
+        const sourceElement = document.createElement('interact-element');
         const sourceDiv = document.createElement('div');
         sourceElement.append(sourceDiv);
-        const targetElement = document.createElement('wix-interact-element');
+        const targetElement = document.createElement('interact-element');
         const targetDiv = document.createElement('div');
         targetElement.append(targetDiv);
         add(sourceElement, 'cascade-source');
@@ -1280,7 +1281,7 @@ describe('interact', () => {
     let targetElement;
     beforeEach(() => {
       // Create source element with multiple child elements
-      sourceElement = document.createElement('wix-interact-element');
+      sourceElement = document.createElement('interact-element');
       sourceElement.innerHTML = `
         <div class="first-child">First Child</div>
         <button class="trigger-button">Click Me</button>
@@ -1293,7 +1294,7 @@ describe('interact', () => {
       `;
 
       // Create target element with multiple child elements
-      targetElement = document.createElement('wix-interact-element');
+      targetElement = document.createElement('interact-element');
       targetElement.innerHTML = `
         <div class="first-child">Target First</div>
         <div class="animation-target">Animation Target</div>
@@ -1528,7 +1529,7 @@ describe('interact', () => {
         Interact.create(config);
         add(sourceElement, 'invalid-source');
         add(targetElement, 'invalid-target');
-        expect(consoleSpy).toHaveBeenCalledWith('WixInteract: No element found for selector ".non-existent-element"');
+        expect(consoleSpy).toHaveBeenCalledWith('Interact: No element found for selector ".non-existent-element"');
       });
       it('should warn when listContainer selector does not match', () => {
         const config = {
@@ -1558,7 +1559,7 @@ describe('interact', () => {
         Interact.create(config);
         add(sourceElement, 'invalid-container-source');
         add(targetElement, 'invalid-container-target');
-        expect(consoleSpy).toHaveBeenCalledWith('WixInteract: No container found for list container ".non-existent-container"');
+        expect(consoleSpy).toHaveBeenCalledWith('Interact: No container found for list container ".non-existent-container"');
       });
       it('should gracefully handle invalid selectors without breaking interactions', () => {
         const config = {
@@ -1779,5 +1780,29 @@ describe('interact', () => {
       expect(Interact.elementCache.get(keyWithoutInstance)).toBe(element);
     });
   });
+  describe('setup', () => {
+    afterEach(() => {
+      Interact.setup({
+        scrollOptionsGetter: () => ({}),
+        pointerOptionsGetter: () => ({})
+      });
+    });
+    it('should register scroll options getter', () => {
+      const scrollOptionsGetter = jest.fn().mockReturnValue({});
+      const spy = jest.spyOn(TRIGGER_TO_HANDLER_MODULE_MAP.viewProgress, 'registerOptionsGetter');
+      Interact.setup({
+        scrollOptionsGetter
+      });
+      expect(spy).toHaveBeenCalledWith(scrollOptionsGetter);
+    });
+    it('should register pointer options getter', () => {
+      const pointerOptionsGetter = jest.fn().mockReturnValue({});
+      const spy = jest.spyOn(TRIGGER_TO_HANDLER_MODULE_MAP.pointerMove, 'registerOptionsGetter');
+      Interact.setup({
+        pointerOptionsGetter
+      });
+      expect(spy).toHaveBeenCalledWith(pointerOptionsGetter);
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map