eslint-plugin-primer-react/src/rules/__tests__/no-unmerged-event-handler.test.js at bfcfba31fe17db606bda7acf2d9033c4a2a55e60 · primer/eslint-plugin-primer-react · 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
const rule = require('../no-unmerged-event-handler')
const {RuleTester} = require('eslint')

const ruleTester = new RuleTester({
  languageOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
    },
  },
})

ruleTester.run('no-unmerged-event-handler', rule, {
  valid: [
    // No spread props - OK
    `<Example onClick={handleClick} />`,
    // Spread but no event handler - OK
    `<Example {...rest} />`,
    // Event handler before spread (spread overrides) - OK
    `<Example onClick={handleClick} {...rest} />`,
    // Event handler after spread with compose - OK
    `<Example {...rest} onClick={compose(onClick, handleClick)} />`,
    // Event handler after spread with composeEventHandlers - OK
    `<Example {...rest} onClick={composeEventHandlers(onClick, handleClick)} />`,
    // Multiple spreads but event handler with compose - OK
    `<Example {...rest} {...other} onClick={compose(onClick, handleClick)} />`,
    // Different event handlers with compose - OK
    `<Example {...rest} onFocus={compose(onFocus, handleFocus)} onBlur={compose(onBlur, handleBlur)} />`,
  ],
  invalid: [
    // onClick after spread without merging - PROBLEM
    {
      code: `<Example {...rest} onClick={handleClick} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onClick'},
        },
      ],
    },
    // onClick after spread with arrow function - PROBLEM
    {
      code: `<Example {...rest} onClick={() => {}} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onClick'},
        },
      ],
    },
    // onChange after spread - PROBLEM
    {
      code: `<Example {...rest} onChange={handleChange} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onChange'},
        },
      ],
    },
    // Multiple event handlers not merged - PROBLEM
    {
      code: `<Example {...rest} onClick={handleClick} onFocus={handleFocus} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onClick'},
        },
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onFocus'},
        },
      ],
    },
    // onSubmit after spread - PROBLEM
    {
      code: `<Example {...rest} onSubmit={handleSubmit} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onSubmit'},
        },
      ],
    },
    // Multiple spreads with event handler not merged - PROBLEM
    {
      code: `<Example {...rest} {...other} onClick={handleClick} />`,
      errors: [
        {
          messageId: 'noUnmergedEventHandler',
          data: {handlerName: 'onClick'},
        },
      ],
    },
  ],
})