eslint-plugin-ember/tests/lib/rules/template-valid-input-attributes.js at a48260c9197a60a5ba833623783301a7880a146d · ember-cli/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
const rule = require('../../../lib/rules/template-valid-input-attributes');
const RuleTester = require('eslint').RuleTester;

const err = (attr, type) => `Attribute \`${attr}\` is not allowed on \`<input type="${type}">\``;

const validHbs = [
  // Attribute matches type.
  '<input type="text" pattern="\\d+" />',
  '<input type="file" accept="image/*" />',
  '<input type="number" min="0" max="100" step="1" />',
  '<input type="image" alt="submit" src="/x.png" />',
  '<input type="email" placeholder="[email protected]" />',
  '<input type="checkbox" checked required />',
  '<input type="radio" checked required name="r" />',
  '<input type="text" size="20" maxlength="100" readonly />',
  '<input type="email" multiple />',
  '<input type="file" multiple capture="user" />',
  // Dynamic type — skip.
  '<input type={{this.t}} pattern="\\d+" />',
  // Mustache string literal — statically resolvable, attribute is compatible.
  '<input type={{"text"}} pattern="\\d+" />',
  // Missing / valueless / empty / unknown type fall back to the Text state
  // per HTML §4.10.5. Attributes valid for text still pass.
  '<input pattern="\\d+" />',
  '<input type />',
  '<input maxlength="100" size="20" readonly />',
  // Not an input — rule doesn't apply.
  '<textarea maxlength="10"></textarea>',
  // Empty/whitespace/unknown type values fall back to the Text state per HTML
  // spec, so `pattern` (allowed on text) is valid.
  '<input type="" pattern="x" />',
  '<input type=" TEXT " pattern="x" />',
  '<input type="UNKNOWN" pattern="x" />',
];

const invalidHbs = [
  {
    code: '<input type="number" pattern="\\d+" />',
    errors: [{ message: err('pattern', 'number') }],
  },
  // Mustache string literal — statically resolvable, attribute is incompatible.
  {
    code: '<input type={{"number"}} pattern="\\d+" />',
    errors: [{ message: err('pattern', 'number') }],
  },
  {
    code: '<input type="text" accept="image/*" />',
    errors: [{ message: err('accept', 'text') }],
  },
  {
    code: '<input type="radio" maxlength="10" />',
    errors: [{ message: err('maxlength', 'radio') }],
  },
  {
    code: '<input type="checkbox" placeholder="x" />',
    errors: [{ message: err('placeholder', 'checkbox') }],
  },
  {
    code: '<input type="submit" pattern="x" size="5" />',
    errors: [{ message: err('pattern', 'submit') }, { message: err('size', 'submit') }],
  },
  {
    code: '<input type="TEXT" accept="image/*" />',
    errors: [{ message: err('accept', 'text') }],
  },
  // Text-state fallback — <input> with missing/valueless/empty/unknown type
  // is the Text state per HTML spec. Attributes incompatible with text are
  // flagged as `type="text"` in the error message.
  {
    code: '<input name="x" multiple />',
    errors: [{ message: err('multiple', 'text') }],
  },
  {
    code: '<input alt="foo" />',
    errors: [{ message: err('alt', 'text') }],
  },
  {
    code: '<input type accept="image/*" />',
    errors: [{ message: err('accept', 'text') }],
  },
  {
    code: '<input type="unknown" src="/x.png" />',
    errors: [{ message: err('src', 'text') }],
  },
];

const gjsValid = validHbs.map((code) => `<template>${code}</template>`);
const gjsInvalid = invalidHbs.map(({ code, errors }) => ({
  code: `<template>${code}</template>`,
  errors,
}));

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

gjsRuleTester.run('template-valid-input-attributes', rule, {
  valid: gjsValid,
  invalid: gjsInvalid,
});

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

hbsRuleTester.run('template-valid-input-attributes', rule, {
  valid: validHbs,
  invalid: invalidHbs,
});