@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/ongoing/test/Rubber.spec.js

@@ -0,0 +1,591 @@
+import { describe, expect, test } from 'vitest';
+import * as Rubber from '../Rubber';
+import { baseMockOptions } from './testUtils';
+describe('Rubber', () => {
+    test('default values - style method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: {},
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.08,
+                    '--motion-scale-y-45': 0.88,
+                    '--motion-scale-x-56': 0.875,
+                    '--motion-scale-y-56': 1.055,
+                    '--motion-scale-x-66': 1.07,
+                    '--motion-scale-y-66': 0.91,
+                    '--motion-scale-x-78': 0.955,
+                    '--motion-scale-y-78': 1.045,
+                    '--motion-scale-x-89': 1.055,
+                    '--motion-scale-y-89': 0.9495,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-45), var(--motion-scale-y-45))',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-56), var(--motion-scale-y-56))',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-66), var(--motion-scale-y-66))',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-78), var(--motion-scale-y-78))',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-89), var(--motion-scale-y-89))',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-100), var(--motion-scale-y-100))',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.style(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('default values - web method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: {},
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.08,
+                    '--motion-scale-y-45': 0.88,
+                    '--motion-scale-x-56': 0.875,
+                    '--motion-scale-y-56': 1.055,
+                    '--motion-scale-x-66': 1.07,
+                    '--motion-scale-y-66': 0.91,
+                    '--motion-scale-x-78': 0.955,
+                    '--motion-scale-y-78': 1.045,
+                    '--motion-scale-x-89': 1.055,
+                    '--motion-scale-y-89': 0.9495,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.08, 0.88)',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.875, 1.055)',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.07, 0.91)',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.955, 1.045)',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.055, 0.9495)',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.web(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom intensity - style method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            delay: 1000,
+            namedEffect: { intensity: 0.8 },
+        };
+        const expectedResult = [
+            {
+                name: 'motion-rubber-05',
+                duration: 2000,
+                easing: 'linear',
+                custom: {
+                    '--motion-scale-x-45': 1.11,
+                    '--motion-scale-y-45': 0.85,
+                    '--motion-scale-x-56': 0.86,
+                    '--motion-scale-y-56': 1.07,
+                    '--motion-scale-x-66': 1.1,
+                    '--motion-scale-y-66': 0.88,
+                    '--motion-scale-x-78': 0.94,
+                    '--motion-scale-y-78': 1.06,
+                    '--motion-scale-x-89': 1.085,
+                    '--motion-scale-y-89': 0.9195,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.225,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-45), var(--motion-scale-y-45))',
+                    },
+                    {
+                        offset: 0.28,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-56), var(--motion-scale-y-56))',
+                    },
+                    {
+                        offset: 0.33,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-66), var(--motion-scale-y-66))',
+                    },
+                    {
+                        offset: 0.39,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-78), var(--motion-scale-y-78))',
+                    },
+                    {
+                        offset: 0.445,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-89), var(--motion-scale-y-89))',
+                    },
+                    {
+                        offset: 0.5,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-100), var(--motion-scale-y-100))',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.style(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom intensity - web method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            delay: 1000,
+            namedEffect: { intensity: 0.8 },
+        };
+        const expectedResult = [
+            {
+                name: 'motion-rubber-05',
+                duration: 2000,
+                easing: 'linear',
+                custom: {
+                    '--motion-scale-x-45': 1.11,
+                    '--motion-scale-y-45': 0.85,
+                    '--motion-scale-x-56': 0.86,
+                    '--motion-scale-y-56': 1.07,
+                    '--motion-scale-x-66': 1.1,
+                    '--motion-scale-y-66': 0.88,
+                    '--motion-scale-x-78': 0.94,
+                    '--motion-scale-y-78': 1.06,
+                    '--motion-scale-x-89': 1.085,
+                    '--motion-scale-y-89': 0.9195,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.225,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.11, 0.85)',
+                    },
+                    {
+                        offset: 0.28,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.86, 1.07)',
+                    },
+                    {
+                        offset: 0.33,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.1, 0.88)',
+                    },
+                    {
+                        offset: 0.39,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.94, 1.06)',
+                    },
+                    {
+                        offset: 0.445,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.085, 0.9195)',
+                    },
+                    {
+                        offset: 0.5,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('custom power - soft - style method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: { power: 'soft' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.03,
+                    '--motion-scale-y-45': 0.93,
+                    '--motion-scale-x-56': 0.9,
+                    '--motion-scale-y-56': 1.03,
+                    '--motion-scale-x-66': 1.02,
+                    '--motion-scale-y-66': 0.96,
+                    '--motion-scale-x-78': 0.98,
+                    '--motion-scale-y-78': 1.02,
+                    '--motion-scale-x-89': 1.005,
+                    '--motion-scale-y-89': 0.9995,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-45), var(--motion-scale-y-45))',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-56), var(--motion-scale-y-56))',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-66), var(--motion-scale-y-66))',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-78), var(--motion-scale-y-78))',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-89), var(--motion-scale-y-89))',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-100), var(--motion-scale-y-100))',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.style(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom power - soft - web method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'soft' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: { power: 'soft' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.03,
+                    '--motion-scale-y-45': 0.93,
+                    '--motion-scale-x-56': 0.9,
+                    '--motion-scale-y-56': 1.03,
+                    '--motion-scale-x-66': 1.02,
+                    '--motion-scale-y-66': 0.96,
+                    '--motion-scale-x-78': 0.98,
+                    '--motion-scale-y-78': 1.02,
+                    '--motion-scale-x-89': 1.005,
+                    '--motion-scale-y-89': 0.9995,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.03, 0.93)',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.9, 1.03)',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.02, 0.96)',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.98, 1.02)',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.005, 0.9995)',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.web(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom power - medium - style method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: { power: 'medium' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.08,
+                    '--motion-scale-y-45': 0.88,
+                    '--motion-scale-x-56': 0.875,
+                    '--motion-scale-y-56': 1.055,
+                    '--motion-scale-x-66': 1.07,
+                    '--motion-scale-y-66': 0.91,
+                    '--motion-scale-x-78': 0.955,
+                    '--motion-scale-y-78': 1.045,
+                    '--motion-scale-x-89': 1.055,
+                    '--motion-scale-y-89': 0.9495,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-45), var(--motion-scale-y-45))',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-56), var(--motion-scale-y-56))',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-66), var(--motion-scale-y-66))',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-78), var(--motion-scale-y-78))',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-89), var(--motion-scale-y-89))',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-100), var(--motion-scale-y-100))',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.style(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom power - medium - web method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'medium' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: { power: 'medium' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.08,
+                    '--motion-scale-y-45': 0.88,
+                    '--motion-scale-x-56': 0.875,
+                    '--motion-scale-y-56': 1.055,
+                    '--motion-scale-x-66': 1.07,
+                    '--motion-scale-y-66': 0.91,
+                    '--motion-scale-x-78': 0.955,
+                    '--motion-scale-y-78': 1.045,
+                    '--motion-scale-x-89': 1.055,
+                    '--motion-scale-y-89': 0.9495,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.08, 0.88)',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.875, 1.055)',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.07, 0.91)',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.955, 1.045)',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.055, 0.9495)',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.web(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom power - hard - style method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                duration: 1000,
+                easing: 'linear',
+                namedEffect: { power: 'hard' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.13,
+                    '--motion-scale-y-45': 0.83,
+                    '--motion-scale-x-56': 0.85,
+                    '--motion-scale-y-56': 1.08,
+                    '--motion-scale-x-66': 1.12,
+                    '--motion-scale-y-66': 0.86,
+                    '--motion-scale-x-78': 0.93,
+                    '--motion-scale-y-78': 1.07,
+                    '--motion-scale-x-89': 1.105,
+                    '--motion-scale-y-89': 0.8995,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-45), var(--motion-scale-y-45))',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-56), var(--motion-scale-y-56))',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-66), var(--motion-scale-y-66))',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-78), var(--motion-scale-y-78))',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-89), var(--motion-scale-y-89))',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x-100), var(--motion-scale-y-100))',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.style(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+    test('custom power - hard - web method', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            duration: 1000,
+            namedEffect: { power: 'hard' },
+        };
+        const expectedResult = [
+            {
+                id: 'test-id',
+                easing: 'linear',
+                duration: 1000,
+                namedEffect: { power: 'hard' },
+                name: 'motion-rubber-1',
+                delay: 0,
+                custom: {
+                    '--motion-scale-x-45': 1.13,
+                    '--motion-scale-y-45': 0.83,
+                    '--motion-scale-x-56': 0.85,
+                    '--motion-scale-y-56': 1.08,
+                    '--motion-scale-x-66': 1.12,
+                    '--motion-scale-y-66': 0.86,
+                    '--motion-scale-x-78': 0.93,
+                    '--motion-scale-y-78': 1.07,
+                    '--motion-scale-x-89': 1.105,
+                    '--motion-scale-y-89': 0.8995,
+                    '--motion-scale-x-100': 1,
+                    '--motion-scale-y-100': 1,
+                },
+                keyframes: [
+                    {
+                        offset: 0.45,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.13, 0.83)',
+                    },
+                    {
+                        offset: 0.56,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.85, 1.08)',
+                    },
+                    {
+                        offset: 0.66,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.12, 0.86)',
+                    },
+                    {
+                        offset: 0.78,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(0.93, 1.07)',
+                    },
+                    {
+                        offset: 0.89,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1.105, 0.8995)',
+                    },
+                    {
+                        offset: 1,
+                        transform: 'rotateZ(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = Rubber.web(mockOptions);
+        expect(result).toEqual(expectedResult);
+    });
+});