eslint-plugin-ember/tests/lib/rules/template-no-pointer-down-event-binding.js at eff76dce3fa54fc8e4dd1a3d5de395f639789f42 · NullVoxPopuli/eslint-plugin-ember · 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
128
//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------

const rule = require('../../../lib/rules/template-no-pointer-down-event-binding');
const RuleTester = require('eslint').RuleTester;

//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------

const ruleTester = new RuleTester({
  parser: require.resolve('ember-eslint-parser'),
  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
});

ruleTester.run('template-no-pointer-down-event-binding', rule, {
  valid: [
    '<template><button {{on "click" this.handleClick}}>Click</button></template>',
    '<template><button {{on "keydown" this.handleKeyDown}}>Press</button></template>',
    '<template><div {{on "mouseup" this.handleMouseUp}}>Content</div></template>',
    '<template><div {{on "pointerup" this.handlePointerUp}}>Content</div></template>',
    '<template><div {{action this.handler on="click"}}></div></template>',
    '<template><div {{action this.handler on="mouseup"}}></div></template>',
    // Case-insensitive: MOUSEUP is fine
    '<template><div {{on "MOUSEUP" this.handler}}>Content</div></template>',
    // onmouseup attribute is fine
    '<template><input type="text" onmouseup="myFunction()"></template>',
    // Component arguments are not flagged (could be any prop name)
    '<template><MyComponent @mouseDown={{this.doSomething}} /></template>',
  ],

  invalid: [
    {
      code: '<template><button {{on "mousedown" this.handleMouseDown}}>Click</button></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    {
      code: '<template><div {{on "pointerdown" this.handlePointerDown}}>Content</div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    // Case-insensitive
    {
      code: '<template><div {{on "MouseDown" this.handler}}>Content</div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    // HTML attributes
    {
      code: '<template><div onmousedown={{this.handleMouseDown}}>Content</div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerAttrNode' }],
    },
    {
      code: '<template><input type="text" onmousedown="myFunction()"></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerAttrNode' }],
    },
    {
      code: '<template><div onpointerdown={{this.handlePointerDown}}>Content</div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerAttrNode' }],
    },
    // {{action}} modifier with on= hash pair
    {
      code: '<template><div {{action this.handler on="mousedown"}}></div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    {
      code: '<template><div {{action this.handler on="pointerdown"}}></div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    // on= is not the first hash pair
    {
      code: '<template><div {{action this.handler preventDefault=true on="mousedown"}}></div></template>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
  ],
});

const hbsRuleTester = new RuleTester({
  parser: require.resolve('ember-eslint-parser/hbs'),
  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
});

hbsRuleTester.run('template-no-pointer-down-event-binding', rule, {
  valid: [
    '<div {{on "mouseup" this.doSomething}}></div>',
    '<div {{action this.doSomething on="mouseup"}}></div>',
    '<input type="text" onmouseup="myFunction()">',
    // Component arguments are not flagged
    '{{my-component mouseDown=this.doSomething}}',
    '<MyComponent @mouseDown={{this.doSomething}} />',
  ],
  invalid: [
    {
      code: '<div {{on "mousedown" this.doSomething}}></div>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    {
      code: '<div {{action this.doSomething on="mousedown"}}></div>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    // on= is not the first hash pair
    {
      code: '<div {{action this.doSomething preventDefault=true on="mousedown"}}></div>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
    {
      code: '<input type="text" onmousedown="myFunction()">',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerAttrNode' }],
    },
    {
      code: '<div {{on "pointerdown" this.doSomething}}></div>',
      output: null,
      errors: [{ messageId: 'unexpected', type: 'GlimmerElementModifierStatement' }],
    },
  ],
});