@adyen/eslint-plugin-bento 2.9.0 → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/configs/vue-recommended.js +5 -0
  3. package/configs/vue-strict.js +5 -0
  4. package/index.js +5 -0
  5. package/package.json +1 -1
  6. package/rules/deprecation-bento-popover-modifiers-prop/README.md +23 -0
  7. package/rules/deprecation-bento-popover-modifiers-prop/__tests__/deprecation-bento-popover-modifiers-prop.vue +9 -0
  8. package/rules/deprecation-bento-popover-modifiers-prop/__tests__/eslint.config.js +26 -0
  9. package/rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop.integration.test.ts +24 -0
  10. package/rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop.js +78 -0
  11. package/rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop.test.ts +109 -0
  12. package/rules/deprecation-bento-timeline-item-variant-prop/README.md +25 -0
  13. package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/deprecation-bento-timeline-item-variant-prop.vue +9 -0
  14. package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/eslint.config.js +26 -0
  15. package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.integration.test.ts +31 -0
  16. package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.js +78 -0
  17. package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.test.ts +66 -0
  18. package/rules/deprecation-components-aria-label-prop/README.md +62 -0
  19. package/rules/deprecation-components-aria-label-prop/__tests__/deprecation-components-aria-label-prop.vue +25 -0
  20. package/rules/deprecation-components-aria-label-prop/__tests__/eslint.config.js +26 -0
  21. package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.integration.test.ts +36 -0
  22. package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.js +79 -0
  23. package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.test.ts +194 -0
  24. package/rules/deprecation-components-has-error-prop/README.md +34 -0
  25. package/rules/deprecation-components-has-error-prop/__tests__/deprecation-components-has-error-prop.vue +13 -0
  26. package/rules/deprecation-components-has-error-prop/__tests__/eslint.config.js +26 -0
  27. package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.integration.test.ts +29 -0
  28. package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.js +77 -0
  29. package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.test.ts +133 -0
  30. package/rules/deprecation-input-filter-dropdown-options/README.md +44 -0
  31. package/rules/deprecation-input-filter-dropdown-options/__tests__/deprecation-input-filter-dropdown-options.vue +46 -0
  32. package/rules/deprecation-input-filter-dropdown-options/__tests__/eslint.config.js +26 -0
  33. package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.integration.test.ts +27 -0
  34. package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.js +135 -0
  35. package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.test.ts +392 -0
@@ -0,0 +1,392 @@
1
+ import { RuleTester } from 'eslint';
2
+ import vueParser from 'vue-eslint-parser';
3
+ import tsParser from '@typescript-eslint/parser';
4
+ import deprecationInputFilterDropdownOptions from './deprecation-input-filter-dropdown-options';
5
+
6
+ const ruleTester = new RuleTester({
7
+ languageOptions: {
8
+ ecmaVersion: 'latest',
9
+ sourceType: 'module',
10
+ parser: vueParser,
11
+ parserOptions: {
12
+ parser: tsParser,
13
+ },
14
+ },
15
+ });
16
+
17
+ describe('@adyen/bento/deprecation-input-filter-dropdown-options', () => {
18
+ ruleTester.run('deprecation-input-filter-dropdown-options (no autofix)', deprecationInputFilterDropdownOptions, {
19
+ valid: [
20
+ {
21
+ name: 'Valid: INPUT filter without deprecated options',
22
+ filename: 'test.vue',
23
+ code: `
24
+ <script setup>
25
+ const config = [{
26
+ field: 'name',
27
+ label: 'Name',
28
+ type: BentoFilterItemType.INPUT,
29
+ options: { placeholder: 'Search...' },
30
+ }];
31
+ </script>
32
+ <template><bento-filter-bar :config="config" /></template>
33
+ `,
34
+ },
35
+ {
36
+ name: 'Valid: INPUT_DROPDOWN filter with dropdown options',
37
+ filename: 'test.vue',
38
+ code: `
39
+ <script setup>
40
+ const config = [{
41
+ field: 'name',
42
+ label: 'Name',
43
+ type: BentoFilterItemType.INPUT_DROPDOWN,
44
+ options: { dropdown: { items: [] }, dropdownPosition: 'start' },
45
+ }];
46
+ </script>
47
+ <template><bento-filter-bar :config="config" /></template>
48
+ `,
49
+ },
50
+ {
51
+ name: 'Valid: SELECT filter with different options',
52
+ filename: 'test.vue',
53
+ code: `
54
+ <script setup>
55
+ const config = [{
56
+ field: 'status',
57
+ label: 'Status',
58
+ type: BentoFilterItemType.SELECT,
59
+ options: { listboxItems: [] },
60
+ }];
61
+ </script>
62
+ <template><bento-filter-bar :config="config" /></template>
63
+ `,
64
+ },
65
+ {
66
+ name: 'Valid: INPUT filter without deprecated options in bento-data-grid',
67
+ filename: 'test.vue',
68
+ code: `
69
+ <script setup>
70
+ const filters = [{
71
+ field: 'name',
72
+ label: 'Name',
73
+ type: BentoFilterItemType.INPUT,
74
+ options: { placeholder: 'Search...' },
75
+ }];
76
+ </script>
77
+ <template><bento-data-grid :filters="filters" /></template>
78
+ `,
79
+ },
80
+ {
81
+ name: 'Valid: INPUT filter with computed property key in options (not a static key)',
82
+ filename: 'test.vue',
83
+ code: `
84
+ <script setup>
85
+ const key = 'dropdown';
86
+ const config = [{
87
+ type: BentoFilterItemType.INPUT,
88
+ options: { [key]: { items: [] } },
89
+ }];
90
+ </script>
91
+ <template><bento-filter-bar :config="config" /></template>
92
+ `,
93
+ },
94
+ {
95
+ name: 'Valid: config object with spread properties',
96
+ filename: 'test.vue',
97
+ code: `
98
+ <script setup>
99
+ const base = { field: 'name' };
100
+ const config = [{
101
+ ...base,
102
+ type: BentoFilterItemType.INPUT,
103
+ options: { placeholder: 'Search...' },
104
+ }];
105
+ </script>
106
+ <template><bento-filter-bar :config="config" /></template>
107
+ `,
108
+ },
109
+ {
110
+ name: 'Valid: config object with string literal keys and non-INPUT type',
111
+ filename: 'test.vue',
112
+ code: `
113
+ <script setup>
114
+ const config = [{
115
+ 'type': BentoFilterItemType.SELECT,
116
+ 'options': { dropdown: true },
117
+ }];
118
+ </script>
119
+ <template><bento-filter-bar :config="config" /></template>
120
+ `,
121
+ },
122
+ ],
123
+ invalid: [
124
+ {
125
+ name: 'Invalid: INPUT filter with dropdown option',
126
+ filename: 'test.vue',
127
+ code: `
128
+ <script setup>
129
+ const config = [{
130
+ field: 'name',
131
+ label: 'Name',
132
+ type: BentoFilterItemType.INPUT,
133
+ options: { dropdown: { items: [] } },
134
+ }];
135
+ </script>
136
+ <template><bento-filter-bar :config="config" /></template>
137
+ `,
138
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
139
+ },
140
+ {
141
+ name: 'Invalid: INPUT filter with dropdownPosition option',
142
+ filename: 'test.vue',
143
+ code: `
144
+ <script setup>
145
+ const config = [{
146
+ field: 'name',
147
+ label: 'Name',
148
+ type: BentoFilterItemType.INPUT,
149
+ options: { dropdownPosition: 'end' },
150
+ }];
151
+ </script>
152
+ <template><bento-filter-bar :config="config" /></template>
153
+ `,
154
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdownPosition' } }],
155
+ },
156
+ {
157
+ name: 'Invalid: INPUT filter with variant option',
158
+ filename: 'test.vue',
159
+ code: `
160
+ <script setup>
161
+ const config = [{
162
+ field: 'name',
163
+ label: 'Name',
164
+ type: BentoFilterItemType.INPUT,
165
+ options: { variant: 'dropdown' },
166
+ }];
167
+ </script>
168
+ <template><bento-filter-bar :config="config" /></template>
169
+ `,
170
+ errors: [{ messageId: 'deprecation', data: { key: 'variant' } }],
171
+ },
172
+ {
173
+ name: 'Invalid: INPUT filter with all three deprecated options',
174
+ filename: 'test.vue',
175
+ code: `
176
+ <script setup>
177
+ const config = [{
178
+ field: 'name',
179
+ label: 'Name',
180
+ type: BentoFilterItemType.INPUT,
181
+ options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
182
+ }];
183
+ </script>
184
+ <template><bento-filter-bar :config="config" /></template>
185
+ `,
186
+ errors: [
187
+ { messageId: 'deprecation', data: { key: 'dropdown' } },
188
+ { messageId: 'deprecation', data: { key: 'dropdownPosition' } },
189
+ { messageId: 'deprecation', data: { key: 'variant' } },
190
+ ],
191
+ },
192
+ {
193
+ name: 'Invalid: INPUT filter using string literal type',
194
+ filename: 'test.vue',
195
+ code: `
196
+ <script setup>
197
+ const config = [{
198
+ field: 'name',
199
+ label: 'Name',
200
+ type: 'BentoInputFilter',
201
+ options: { dropdown: { items: [] } },
202
+ }];
203
+ </script>
204
+ <template><bento-filter-bar :config="config" /></template>
205
+ `,
206
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
207
+ },
208
+ {
209
+ name: 'Invalid: INPUT filter with deprecated options defined inline in template',
210
+ filename: 'test.vue',
211
+ code: `
212
+ <template>
213
+ <bento-filter-bar :config="[{
214
+ field: 'name',
215
+ label: 'Name',
216
+ type: BentoFilterItemType.INPUT,
217
+ options: { dropdown: { items: [] }, variant: 'dropdown' },
218
+ }]" />
219
+ </template>
220
+ `,
221
+ errors: [
222
+ { messageId: 'deprecation', data: { key: 'dropdown' } },
223
+ { messageId: 'deprecation', data: { key: 'variant' } },
224
+ ],
225
+ },
226
+ {
227
+ name: 'Invalid: INPUT filter with string literal keys',
228
+ filename: 'test.vue',
229
+ code: `
230
+ <script setup>
231
+ const config = [{
232
+ 'type': 'BentoInputFilter',
233
+ 'options': { 'dropdown': { items: [] } },
234
+ }];
235
+ </script>
236
+ <template><bento-filter-bar :config="config" /></template>
237
+ `,
238
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
239
+ },
240
+ {
241
+ name: 'Invalid: INPUT filter with spread and deprecated options',
242
+ filename: 'test.vue',
243
+ code: `
244
+ <script setup>
245
+ const base = { field: 'name' };
246
+ const config = [{
247
+ ...base,
248
+ type: BentoFilterItemType.INPUT,
249
+ options: { ...base, dropdown: { items: [] } },
250
+ }];
251
+ </script>
252
+ <template><bento-filter-bar :config="config" /></template>
253
+ `,
254
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
255
+ },
256
+ {
257
+ name: 'Invalid: INPUT filter with dropdown option in bento-data-grid filters',
258
+ filename: 'test.vue',
259
+ code: `
260
+ <script setup>
261
+ const filters = [{
262
+ field: 'name',
263
+ label: 'Name',
264
+ type: BentoFilterItemType.INPUT,
265
+ options: { dropdown: { items: [] }, variant: 'dropdown' },
266
+ }];
267
+ </script>
268
+ <template><bento-data-grid :filters="filters" /></template>
269
+ `,
270
+ errors: [
271
+ { messageId: 'deprecation', data: { key: 'dropdown' } },
272
+ { messageId: 'deprecation', data: { key: 'variant' } },
273
+ ],
274
+ },
275
+ ],
276
+ });
277
+
278
+ ruleTester.run(
279
+ 'deprecation-input-filter-dropdown-options (autofix enabled)',
280
+ deprecationInputFilterDropdownOptions,
281
+ {
282
+ valid: [
283
+ {
284
+ name: 'Valid: INPUT filter without deprecated options (autofix enabled)',
285
+ filename: 'test.vue',
286
+ options: [{ autofix: true }],
287
+ code: `
288
+ <script setup>
289
+ const config = [{
290
+ type: BentoFilterItemType.INPUT,
291
+ options: { placeholder: 'Search...' },
292
+ }];
293
+ </script>
294
+ <template><bento-filter-bar :config="config" /></template>
295
+ `,
296
+ },
297
+ ],
298
+ invalid: [
299
+ {
300
+ name: 'Autofix: changes BentoFilterItemType.INPUT to INPUT_DROPDOWN',
301
+ filename: 'test.vue',
302
+ options: [{ autofix: true }],
303
+ code: `
304
+ <script setup>
305
+ const config = [{
306
+ type: BentoFilterItemType.INPUT,
307
+ options: { dropdown: { items: [] } },
308
+ }];
309
+ </script>
310
+ <template><bento-filter-bar :config="config" /></template>
311
+ `,
312
+ output: `
313
+ <script setup>
314
+ const config = [{
315
+ type: BentoFilterItemType.INPUT_DROPDOWN,
316
+ options: { dropdown: { items: [] } },
317
+ }];
318
+ </script>
319
+ <template><bento-filter-bar :config="config" /></template>
320
+ `,
321
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
322
+ },
323
+ {
324
+ name: 'Autofix: changes string literal type to BentoInputWithDropdownFilter',
325
+ filename: 'test.vue',
326
+ options: [{ autofix: true }],
327
+ code: `
328
+ <script setup>
329
+ const config = [{
330
+ type: 'BentoInputFilter',
331
+ options: { dropdown: { items: [] } },
332
+ }];
333
+ </script>
334
+ <template><bento-filter-bar :config="config" /></template>
335
+ `,
336
+ output: `
337
+ <script setup>
338
+ const config = [{
339
+ type: 'BentoInputWithDropdownFilter',
340
+ options: { dropdown: { items: [] } },
341
+ }];
342
+ </script>
343
+ <template><bento-filter-bar :config="config" /></template>
344
+ `,
345
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
346
+ },
347
+ {
348
+ name: 'Autofix: fixes type with multiple deprecated options',
349
+ filename: 'test.vue',
350
+ options: [{ autofix: true }],
351
+ code: `
352
+ <script setup>
353
+ const config = [{
354
+ type: BentoFilterItemType.INPUT,
355
+ options: { dropdown: { items: [] }, variant: 'dropdown' },
356
+ }];
357
+ </script>
358
+ <template><bento-filter-bar :config="config" /></template>
359
+ `,
360
+ output: `
361
+ <script setup>
362
+ const config = [{
363
+ type: BentoFilterItemType.INPUT_DROPDOWN,
364
+ options: { dropdown: { items: [] }, variant: 'dropdown' },
365
+ }];
366
+ </script>
367
+ <template><bento-filter-bar :config="config" /></template>
368
+ `,
369
+ errors: [
370
+ { messageId: 'deprecation', data: { key: 'dropdown' } },
371
+ { messageId: 'deprecation', data: { key: 'variant' } },
372
+ ],
373
+ },
374
+ {
375
+ name: 'Autofix: does not apply fix when autofix is false',
376
+ filename: 'test.vue',
377
+ options: [{ autofix: false }],
378
+ code: `
379
+ <script setup>
380
+ const config = [{
381
+ type: BentoFilterItemType.INPUT,
382
+ options: { dropdown: { items: [] } },
383
+ }];
384
+ </script>
385
+ <template><bento-filter-bar :config="config" /></template>
386
+ `,
387
+ errors: [{ messageId: 'deprecation', data: { key: 'dropdown' } }],
388
+ },
389
+ ],
390
+ }
391
+ );
392
+ });