@wix/interact 1.103.0 → 1.105.0

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

@@ -42,6 +42,7 @@ jest.mock('fizban', () => ({
     end: jest.fn()
   }))
 }));
+let mockMQLs;
 describe('interact', () => {
   let element;
   let mockConfig;
@@ -327,12 +328,16 @@ describe('interact', () => {
     }
 
     // Mock matchMedia for condition testing
+    mockMQLs = new Map();
     mockMatchMedia();
   });
   function mockMatchMedia(matchingQueries = []) {
     const queryRule = `(${matchingQueries.join(') and (')})`;
     const mockMQL = query => {
-      return {
+      if (mockMQLs.has(query)) {
+        return mockMQLs.get(query);
+      }
+      const mql = {
         matches: queryRule === query,
         media: query,
         onchange: null,
@@ -340,9 +345,12 @@ describe('interact', () => {
         removeEventListener: jest.fn(),
         dispatchEvent: jest.fn()
       };
+      mockMQLs.set(query, mql);
+      return mql;
     };
     Object.defineProperty(window, 'matchMedia', {
       writable: true,
+      configurable: true,
       value: jest.fn().mockImplementation(mockMQL)
     });
   }
@@ -2725,5 +2733,211 @@ describe('interact', () => {
       });
     });
   });
+  describe('media query listeners', () => {
+    let instance;
+    beforeEach(() => {
+      mockMQLs.clear();
+      mockMatchMedia();
+    });
+    afterEach(() => {
+      _Interact.Interact.destroy();
+    });
+    function createMockInteractElement(key) {
+      const el = document.createElement('interact-element');
+      const div = document.createElement('div');
+      el.append(div);
+      el.dataset.interactKey = key;
+      el.connected = false;
+      el._internals = null;
+      el._observers = new WeakMap();
+      el.sheet = null;
+      el.disconnect = jest.fn(function () {
+        const k = el.dataset.interactKey;
+        if (k) {
+          (0, _remove.remove)(k);
+        }
+        el.sheet = null;
+        el.connected = false;
+      });
+      el.connect = jest.fn(function () {
+        if (el.connected) {
+          return;
+        }
+        const k = el.dataset.interactKey;
+        if (k) {
+          el.connected = (0, _add.add)(el, k);
+        }
+      });
+      el.renderStyle = jest.fn();
+      el.toggleEffect = jest.fn();
+      el.watchChildList = jest.fn();
+      return el;
+    }
+    const createResponsiveConfig = () => ({
+      conditions: {
+        desktop: {
+          type: 'media',
+          predicate: 'min-width: 768px'
+        }
+      },
+      interactions: [{
+        trigger: 'click',
+        key: 'responsive-button',
+        conditions: ['desktop'],
+        effects: [{
+          key: 'responsive-button',
+          effectId: 'test-effect'
+        }]
+      }],
+      effects: {
+        'test-effect': {
+          namedEffect: {
+            type: 'FadeIn',
+            power: 'medium'
+          },
+          duration: 500
+        }
+      }
+    });
+    it('should set up a media query listener when interaction has conditions', () => {
+      const config = createResponsiveConfig();
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-button');
+      (0, _add.add)(testElement, 'responsive-button');
+      expect(window.matchMedia).toHaveBeenCalledWith('(min-width: 768px)');
+      expect(instance.mediaQueryListeners.size).toBe(1);
+      expect(instance.mediaQueryListeners.has('responsive-button::trigger::0')).toBe(true);
+      const mql = mockMQLs.get('(min-width: 768px)');
+      expect(mql == null ? void 0 : mql.addEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+    });
+    it('should reconcile when media query changes', () => {
+      const config = createResponsiveConfig();
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-button');
+      (0, _add.add)(testElement, 'responsive-button');
+      const listenerEntry = instance.mediaQueryListeners.get('responsive-button::trigger::0');
+      expect(listenerEntry).toBeDefined();
+      const clearStateSpy = jest.spyOn(instance, 'clearInteractionStateForKey');
+      listenerEntry.handler({
+        matches: true,
+        media: '(min-width: 768px)'
+      });
+
+      // disconnect triggers remove which calls clearInteractionStateForKey
+      expect(clearStateSpy).toHaveBeenCalledWith('responsive-button');
+    });
+    it('should properly remove event listeners when instance is destroyed', () => {
+      const config = createResponsiveConfig();
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-button');
+      (0, _add.add)(testElement, 'responsive-button');
+      const mql = mockMQLs.get('(min-width: 768px)');
+      expect(mql).toBeDefined();
+      expect(mql.addEventListener).toHaveBeenCalled();
+      instance.destroy();
+      expect(mql.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+      expect(instance.mediaQueryListeners.size).toBe(0);
+    });
+    it('should not create duplicate listeners when add() is called twice', () => {
+      const config = createResponsiveConfig();
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-button');
+      (0, _add.add)(testElement, 'responsive-button');
+      // Reset addedInteractions so add() processes interactions again
+      instance.addedInteractions = {};
+      (0, _add.add)(testElement, 'responsive-button');
+      expect(instance.mediaQueryListeners.size).toBe(1);
+      const mql = mockMQLs.get('(min-width: 768px)');
+      expect(mql == null ? void 0 : mql.addEventListener).toHaveBeenCalledTimes(1);
+    });
+    it('should remove listeners when element is deleted', () => {
+      const config = createResponsiveConfig();
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-button');
+      (0, _add.add)(testElement, 'responsive-button');
+      const mql = mockMQLs.get('(min-width: 768px)');
+      expect(instance.mediaQueryListeners.size).toBe(1);
+      instance.deleteElement('responsive-button');
+      expect(mql.removeEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+      expect(instance.mediaQueryListeners.size).toBe(0);
+    });
+    it('should switch interactions when media query changes', () => {
+      const config = {
+        conditions: {
+          desktop: {
+            type: 'media',
+            predicate: 'min-width: 1024px'
+          },
+          mobile: {
+            type: 'media',
+            predicate: 'max-width: 767px'
+          }
+        },
+        interactions: [{
+          trigger: 'click',
+          key: 'responsive-element',
+          conditions: ['desktop'],
+          effects: [{
+            key: 'responsive-element',
+            effectId: 'desktop-effect'
+          }]
+        }, {
+          trigger: 'hover',
+          key: 'responsive-element',
+          conditions: ['mobile'],
+          effects: [{
+            key: 'responsive-element',
+            effectId: 'mobile-effect'
+          }]
+        }],
+        effects: {
+          'desktop-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          },
+          'mobile-effect': {
+            namedEffect: {
+              type: 'BounceIn',
+              direction: 'center',
+              power: 'hard'
+            },
+            duration: 300
+          }
+        }
+      };
+      mockMatchMedia(['min-width: 1024px']);
+      instance = _Interact.Interact.create(config);
+      const testElement = createMockInteractElement('responsive-element');
+      // Handlers are added to the child div (firstElementChild), not the root
+      const childDiv = testElement.firstElementChild;
+      const addEventListenerSpy = jest.spyOn(childDiv, 'addEventListener');
+      (0, _add.add)(testElement, 'responsive-element');
+
+      // Desktop interaction (click) should be added
+      expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+      addEventListenerSpy.mockClear();
+
+      // Simulate media query change to mobile
+      const desktopMql = mockMQLs.get('(min-width: 1024px)');
+      const mobileMql = mockMQLs.get('(max-width: 767px)');
+      desktopMql.matches = false;
+      mobileMql.matches = true;
+
+      // Trigger the media query change handler
+      const listenerEntry = instance.mediaQueryListeners.get('responsive-element::trigger::0');
+      expect(listenerEntry).toBeDefined();
+      listenerEntry.handler({
+        matches: false,
+        media: '(min-width: 1024px)'
+      });
+
+      // After reconciliation, the hover (mobile) handler should be added
+      expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map