@wix/interact 1.91.0 → 1.93.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 = [];
@@ -403,8 +416,9 @@ describe('interact', () => {
     jest.clearAllMocks();
     // Clear Interact instances to ensure test isolation
     Interact.destroy();
-    // Reset forceReducedMotion to default
+    // Reset static flags to default
     Interact.forceReducedMotion = false;
+    Interact.allowA11yTriggers = false;
   });
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
@@ -1804,5 +1818,285 @@ describe('interact', () => {
       expect(spy).toHaveBeenCalledWith(pointerOptionsGetter);
     });
   });
+  describe('a11y - accessible triggers', () => {
+    let a11yElement;
+    function getA11yConfig(trigger, key) {
+      return {
+        interactions: [{
+          trigger,
+          key,
+          effects: [{
+            effectId: 'test-effect'
+          }]
+        }],
+        effects: {
+          'test-effect': {
+            namedEffect: {
+              type: 'BounceIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+    }
+    afterEach(() => {
+      Interact.destroy();
+    });
+    describe('activate trigger', () => {
+      it('should add both click and keydown listeners', () => {
+        Interact.create(getA11yConfig('activate', 'activate-div'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'activate-div');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should not double-invoke handler when Enter triggers both keydown and click', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const mockPlay = getWebAnimation().play;
+        mockPlay.mockClear();
+        Interact.create(getA11yConfig('activate', 'activate-handler-test'));
+        a11yElement = document.createElement('interact-element');
+        const button = document.createElement('button');
+        a11yElement.append(button);
+        add(a11yElement, 'activate-handler-test');
+
+        // Simulate browser behavior: Enter key triggers keydown AND synthesized click with no pointerType
+        button.dispatchEvent(new KeyboardEvent('keydown', {
+          code: 'Enter',
+          bubbles: true
+        }));
+        button.dispatchEvent(new MouseEvent('click', {
+          bubbles: true
+        }));
+        expect(mockPlay).toHaveBeenCalledTimes(1);
+      });
+    });
+    describe('interest trigger', () => {
+      it('should add focusin listener alongside mouseenter', () => {
+        Interact.create(getA11yConfig('interest', 'interest-test'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'interest-test');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('click trigger with allowA11yTriggers flag', () => {
+      it('should NOT add keydown listener when flag is false', () => {
+        Interact.create(getA11yConfig('click', 'click-no-flag'));
+        Interact.setup({
+          allowA11yTriggers: false
+        });
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'click-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should add keydown listener when flag is true', () => {
+        Interact.setup({
+          allowA11yTriggers: true
+        });
+        Interact.create(getA11yConfig('click', 'click-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'click-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('hover trigger with allowA11yTriggers flag', () => {
+      it('should NOT add focusin listener when flag is false', () => {
+        Interact.setup({
+          allowA11yTriggers: false
+        });
+        Interact.create(getA11yConfig('hover', 'hover-no-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'hover-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+      it('should add focusin listener when flag is true', () => {
+        Interact.setup({
+          allowA11yTriggers: true
+        });
+        Interact.create(getA11yConfig('hover', 'hover-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        add(a11yElement, 'hover-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+  });
+  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