@wix/interact 1.101.0 → 1.102.0

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

@@ -2268,5 +2268,471 @@ describe('interact', () => {
       expect(mockAnimation.play).toHaveBeenCalled();
     });
   });
+  describe('templated (interpolated) keys', () => {
+    function createEl() {
+      const el = document.createElement('interact-element');
+      const div = document.createElement('div');
+      el.append(div);
+      return [el, div];
+    }
+    describe('one-to-one: single source template to single target template', () => {
+      const getConfig = () => ({
+        interactions: [{
+          trigger: 'click',
+          key: 'src[]',
+          effects: [{
+            key: 'tgt[]',
+            effectId: 'oto-effect'
+          }]
+        }],
+        effects: {
+          'oto-effect': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      });
+      it('should bind each source instance to its matching target instance', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcEl0, srcDiv0] = createEl();
+        const [tgtEl0, tgtDiv0] = createEl();
+        const [srcEl1, srcDiv1] = createEl();
+        const [tgtEl1, tgtDiv1] = createEl();
+        const srcSpy0 = jest.spyOn(srcDiv0, 'addEventListener');
+        const srcSpy1 = jest.spyOn(srcDiv1, 'addEventListener');
+        add(srcEl0, 'src[0]');
+        add(tgtEl0, 'tgt[0]');
+        add(srcEl1, 'src[1]');
+        add(tgtEl1, 'tgt[1]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(srcSpy0).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(srcSpy1).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      });
+      it('should not cross-contaminate between different instance indices', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcEl0] = createEl();
+        const [tgtEl1] = createEl();
+        add(srcEl0, 'src[0]');
+        add(tgtEl1, 'tgt[1]');
+        expect(getWebAnimation).not.toHaveBeenCalled();
+      });
+      it('should work when targets are added before sources', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcEl0] = createEl();
+        const [tgtEl0, tgtDiv0] = createEl();
+        add(tgtEl0, 'tgt[0]');
+        add(srcEl0, 'src[0]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(1);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+      });
+    });
+    describe('one-to-many: single source template to multiple target templates', () => {
+      const getConfig = () => ({
+        interactions: [{
+          trigger: 'click',
+          key: 'src[]',
+          effects: [{
+            key: 'tgt-a[]',
+            effectId: 'otm-effect-a'
+          }, {
+            key: 'tgt-b[]',
+            effectId: 'otm-effect-b'
+          }]
+        }],
+        effects: {
+          'otm-effect-a': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          },
+          'otm-effect-b': {
+            namedEffect: {
+              type: 'BounceIn',
+              power: 'hard',
+              direction: 'center'
+            },
+            duration: 600
+          }
+        }
+      });
+      it('should bind a source instance to all of its target instances', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcEl0, srcDiv0] = createEl();
+        const [tgtAEl0, tgtADiv0] = createEl();
+        const [tgtBEl0, tgtBDiv0] = createEl();
+        const srcSpy = jest.spyOn(srcDiv0, 'addEventListener');
+        add(srcEl0, 'src[0]');
+        add(tgtAEl0, 'tgt-a[0]');
+        add(tgtBEl0, 'tgt-b[0]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtADiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtBDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(srcSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      });
+      it('should independently wire separate instances to their own targets', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcEl0] = createEl();
+        const [srcEl1] = createEl();
+        const [tgtAEl0, tgtADiv0] = createEl();
+        const [tgtBEl0, tgtBDiv0] = createEl();
+        const [tgtAEl1, tgtADiv1] = createEl();
+        const [tgtBEl1, tgtBDiv1] = createEl();
+        add(srcEl0, 'src[0]');
+        add(srcEl1, 'src[1]');
+        add(tgtAEl0, 'tgt-a[0]');
+        add(tgtBEl0, 'tgt-b[0]');
+        add(tgtAEl1, 'tgt-a[1]');
+        add(tgtBEl1, 'tgt-b[1]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(4);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtADiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtBDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtADiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtBDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+      });
+    });
+    describe('many-to-one: multiple source templates to single target template', () => {
+      const getConfig = () => ({
+        interactions: [{
+          trigger: 'click',
+          key: 'src-a[]',
+          effects: [{
+            key: 'tgt[]',
+            effectId: 'mto-effect-a'
+          }]
+        }, {
+          trigger: 'click',
+          key: 'src-b[]',
+          effects: [{
+            key: 'tgt[]',
+            effectId: 'mto-effect-b'
+          }]
+        }],
+        effects: {
+          'mto-effect-a': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'medium'
+            },
+            duration: 500
+          },
+          'mto-effect-b': {
+            namedEffect: {
+              type: 'BounceIn',
+              power: 'hard',
+              direction: 'center'
+            },
+            duration: 600
+          }
+        }
+      });
+      it('should bind multiple sources to the same target for a given instance', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcAEl0, srcADiv0] = createEl();
+        const [srcBEl0, srcBDiv0] = createEl();
+        const [tgtEl0, tgtDiv0] = createEl();
+        const srcASpy = jest.spyOn(srcADiv0, 'addEventListener');
+        const srcBSpy = jest.spyOn(srcBDiv0, 'addEventListener');
+        add(srcAEl0, 'src-a[0]');
+        add(srcBEl0, 'src-b[0]');
+        add(tgtEl0, 'tgt[0]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(2);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(srcASpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(srcBSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+      });
+      it('should isolate different instance indices', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcAEl0] = createEl();
+        const [srcBEl0] = createEl();
+        const [tgtEl0, tgtDiv0] = createEl();
+        const [srcAEl1] = createEl();
+        const [srcBEl1] = createEl();
+        const [tgtEl1, tgtDiv1] = createEl();
+        add(srcAEl0, 'src-a[0]');
+        add(srcBEl0, 'src-b[0]');
+        add(tgtEl0, 'tgt[0]');
+        add(srcAEl1, 'src-a[1]');
+        add(srcBEl1, 'src-b[1]');
+        add(tgtEl1, 'tgt[1]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(4);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+      });
+    });
+    describe('many-to-many: multiple source templates to multiple target templates', () => {
+      const getConfig = () => ({
+        interactions: [{
+          trigger: 'click',
+          key: 'src-a[]',
+          effects: [{
+            key: 'tgt-x[]',
+            effectId: 'mtm-ax'
+          }, {
+            key: 'tgt-y[]',
+            effectId: 'mtm-ay'
+          }]
+        }, {
+          trigger: 'click',
+          key: 'src-b[]',
+          effects: [{
+            key: 'tgt-x[]',
+            effectId: 'mtm-bx'
+          }, {
+            key: 'tgt-y[]',
+            effectId: 'mtm-by'
+          }]
+        }],
+        effects: {
+          'mtm-ax': {
+            namedEffect: {
+              type: 'FadeIn',
+              power: 'soft'
+            },
+            duration: 300
+          },
+          'mtm-ay': {
+            namedEffect: {
+              type: 'SlideIn',
+              direction: 'left',
+              power: 'medium'
+            },
+            duration: 400
+          },
+          'mtm-bx': {
+            namedEffect: {
+              type: 'BounceIn',
+              direction: 'center',
+              power: 'hard'
+            },
+            duration: 500
+          },
+          'mtm-by': {
+            namedEffect: {
+              type: 'Poke',
+              direction: 'right',
+              power: 'medium'
+            },
+            duration: 600
+          }
+        }
+      });
+      it('should bind each source to all of its targets for a given instance', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcAEl0] = createEl();
+        const [srcBEl0] = createEl();
+        const [tgtXEl0, tgtXDiv0] = createEl();
+        const [tgtYEl0, tgtYDiv0] = createEl();
+        add(srcAEl0, 'src-a[0]');
+        add(srcBEl0, 'src-b[0]');
+        add(tgtXEl0, 'tgt-x[0]');
+        add(tgtYEl0, 'tgt-y[0]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(4);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtXDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtYDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtXDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtYDiv0, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'Poke'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+      });
+      it('should isolate many-to-many bindings across instance indices', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        Interact.create(getConfig());
+        const [srcAEl0] = createEl();
+        const [srcBEl0] = createEl();
+        const [tgtXEl0, tgtXDiv0] = createEl();
+        const [tgtYEl0, tgtYDiv0] = createEl();
+        add(srcAEl0, 'src-a[0]');
+        add(srcBEl0, 'src-b[0]');
+        add(tgtXEl0, 'tgt-x[0]');
+        add(tgtYEl0, 'tgt-y[0]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(4);
+        const [srcAEl1] = createEl();
+        const [srcBEl1] = createEl();
+        const [tgtXEl1, tgtXDiv1] = createEl();
+        const [tgtYEl1, tgtYDiv1] = createEl();
+        add(srcAEl1, 'src-a[1]');
+        add(srcBEl1, 'src-b[1]');
+        add(tgtXEl1, 'tgt-x[1]');
+        add(tgtYEl1, 'tgt-y[1]');
+        expect(getWebAnimation).toHaveBeenCalledTimes(8);
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtXDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'FadeIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtYDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'SlideIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtXDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'BounceIn'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+        expect(getWebAnimation).toHaveBeenCalledWith(tgtYDiv1, expect.objectContaining({
+          namedEffect: expect.objectContaining({
+            type: 'Poke'
+          })
+        }), undefined, {
+          reducedMotion: false
+        });
+      });
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map