interact/packages/interact-validate/test/rules/offsetEasing.spec.ts at ae755cda78b14533fdd169685583aa50708b7e35 · wix/interact · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { describe, expect, it } from 'vitest';
import { validateInteractConfig } from '../../src';

const EFFECTS = [{ namedEffect: { type: 'FadeIn' }, duration: 400 }];

describe('offsetEasing', () => {
  describe('FUNCTION_OFFSET_EASING (warning)', () => {
    it('warns on an inline sequence with a function offsetEasing', () => {
      const result = validateInteractConfig({
        interactions: [
          {
            key: 'el',
            trigger: 'viewEnter',
            sequences: [{ offset: 100, offsetEasing: (p: number) => p ** 2, effects: EFFECTS }],
          },
        ],
      });
      const err = result.errors.find((e) => e.code === 'FUNCTION_OFFSET_EASING');

      expect(err).toBeDefined();
      expect(err?.severity).toBe('warning');
      expect(err?.path).toEqual(['interactions', 0, 'sequences', 0, 'offsetEasing']);
      expect(result.valid).toBe(true);
    });

    it('warns once, at the definition, for a referenced registry sequence', () => {
      const result = validateInteractConfig({
        sequences: {
          stagger: { offset: 100, offsetEasing: (p: number) => p ** 2, effects: EFFECTS },
        },
        interactions: [
          { key: 'el', trigger: 'viewEnter', sequences: [{ sequenceId: 'stagger' }] },
          { key: 'el2', trigger: 'viewEnter', sequences: [{ sequenceId: 'stagger' }] },
        ],
      });
      const errs = result.errors.filter((e) => e.code === 'FUNCTION_OFFSET_EASING');

      expect(errs).toHaveLength(1);
      expect(errs[0].path).toEqual(['sequences', 'stagger', 'offsetEasing']);
    });

    it('warns when a reference overrides a string easing with a function', () => {
      const result = validateInteractConfig({
        sequences: { stagger: { offset: 100, offsetEasing: 'quadIn', effects: EFFECTS } },
        interactions: [
          {
            key: 'el',
            trigger: 'viewEnter',
            sequences: [{ sequenceId: 'stagger', offsetEasing: (p: number) => p ** 2 }],
          },
        ],
      });
      const errs = result.errors.filter((e) => e.code === 'FUNCTION_OFFSET_EASING');

      expect(errs).toHaveLength(1);
      expect(errs[0].path).toEqual(['interactions', 0, 'sequences', 0, 'offsetEasing']);
    });

    it.each(['linear', 'quadIn', 'cubic-bezier(0.25, 0.1, 0.25, 1)', 'linear(0, 0.5 50%, 1)'])(
      'does not warn for the string easing %s',
      (offsetEasing) => {
        const result = validateInteractConfig({
          interactions: [
            {
              key: 'el',
              trigger: 'viewEnter',
              sequences: [{ offset: 100, offsetEasing, effects: EFFECTS }],
            },
          ],
        });

        expect(result.errors.filter((e) => e.code === 'FUNCTION_OFFSET_EASING')).toHaveLength(0);
      },
    );

    it('does not warn when offsetEasing is omitted', () => {
      const result = validateInteractConfig({
        interactions: [
          {
            key: 'el',
            trigger: 'viewEnter',
            sequences: [{ offset: 100, effects: EFFECTS }],
          },
        ],
      });

      expect(result.errors.filter((e) => e.code === 'FUNCTION_OFFSET_EASING')).toHaveLength(0);
    });
  });

  describe('OFFSET_EASING rule category', () => {
    const config = {
      interactions: [
        {
          key: 'el',
          trigger: 'viewEnter',
          sequences: [{ offset: 100, offsetEasing: (p: number) => p ** 2, effects: EFFECTS }],
        },
      ],
    };

    it('can be silenced via severityOverrides', () => {
      const result = validateInteractConfig(config, {
        severityOverrides: { OFFSET_EASING: 'off' },
      });

      expect(result.errors.filter((e) => e.code === 'FUNCTION_OFFSET_EASING')).toHaveLength(0);
    });

    it('can be demoted to info', () => {
      const result = validateInteractConfig(config, {
        severityOverrides: { OFFSET_EASING: 'info' },
      });

      expect(result.errors.find((e) => e.code === 'FUNCTION_OFFSET_EASING')?.severity).toBe('info');
    });

    it('is promoted to an error by strict', () => {
      const result = validateInteractConfig(config, { strict: true });

      expect(result.errors.find((e) => e.code === 'FUNCTION_OFFSET_EASING')?.severity).toBe(
        'error',
      );
      expect(result.valid).toBe(false);
    });
  });
});