test: add missing test coverage across 14 ported rules

Author: johanrd

tests/lib/rules/template-attribute-order.js

@@ -18,6 +18,11 @@ ruleTester.run('template-attribute-order', rule, {
     '<template><div aria-label="x" aria-hidden="true"></div></template>',
     // Correct full order
     '<template><input class="x" id="y" role="r" aria-label="l" data-test-foo="1" type="text" name="n" value="v" placeholder="p" disabled></template>',
+    // Custom order config: id before class is valid when order is ['id', 'class']
+    {
+      code: '<template><div id="bar" class="foo"></div></template>',
+      options: [{ order: ['id', 'class'] }],
+    },
   ],
 
   invalid: [
@@ -60,5 +65,19 @@ ruleTester.run('template-attribute-order', rule, {
       output: '<template><div\n  class="y"\n  name="x"\n></div></template>',
       errors: [{ messageId: 'wrongOrder' }],
     },
+    // Custom order: id before class
+    {
+      code: '<template><div class="foo" id="bar"></div></template>',
+      output: '<template><div id="bar" class="foo"></div></template>',
+      options: [{ order: ['id', 'class'] }],
+      errors: [{ messageId: 'wrongOrder' }],
+    },
+    // Custom order: role, class
+    {
+      code: '<template><div class="btn" role="button"></div></template>',
+      output: '<template><div role="button" class="btn"></div></template>',
+      options: [{ order: ['role', 'class'] }],
+      errors: [{ messageId: 'wrongOrder' }],
+    },
   ],
 });

tests/lib/rules/template-link-rel-noopener.js

@@ -14,6 +14,8 @@ ruleTester.run('template-link-rel-noopener', rule, {
     '<template><a href="/" target="_blank" rel="nofollow noreferrer noopener">Link</a></template>',
     // no target="_blank" means no rel required
     '<template><a href="/">Link</a></template>',
+    // target="_self" does not require rel
+    '<template><a href="/some/where" target="_self"></a></template>',
   ],
   invalid: [
     // no rel attribute at all
@@ -43,3 +45,43 @@ ruleTester.run('template-link-rel-noopener', rule, {
     },
   ],
 });
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-link-rel-noopener (hbs)', rule, {
+  valid: [
+    '<a href="/some/where"></a>',
+    '<a href="/some/where" target="_self"></a>',
+    '<a href="/some/where" target="_blank" rel="noopener noreferrer"></a>',
+    '<a href="/some/where" target="_blank" rel="noreferrer noopener"></a>',
+    '<a href="/some/where" target="_blank" rel="nofollow noreferrer noopener"></a>',
+  ],
+  invalid: [
+    {
+      code: '<a href="/some/where" target="_blank"></a>',
+      output: '<a href="/some/where" target="_blank" rel="noopener noreferrer"></a>',
+      errors: [{ messageId: 'missingRel' }],
+    },
+    {
+      code: '<a href="/some/where" target="_blank" rel="nofollow"></a>',
+      output: '<a href="/some/where" target="_blank" rel="nofollow noopener noreferrer"></a>',
+      errors: [{ messageId: 'missingRel' }],
+    },
+    {
+      code: '<a href="/some/where" target="_blank" rel="noopener"></a>',
+      output: '<a href="/some/where" target="_blank" rel="noopener noreferrer"></a>',
+      errors: [{ messageId: 'missingRel' }],
+    },
+    {
+      code: '<a href="/some/where" target="_blank" rel="noreferrer"></a>',
+      output: '<a href="/some/where" target="_blank" rel="noopener noreferrer"></a>',
+      errors: [{ messageId: 'missingRel' }],
+    },
+  ],
+});

tests/lib/rules/template-no-abstract-roles.js

@@ -19,5 +19,55 @@ ruleTester.run('template-no-abstract-roles', rule, {
       output: null,
       errors: [{ messageId: 'abstractRole' }],
     },
+    {
+      code: '<template><div role="composite"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><input role="input" /></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="landmark"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><input role="range" /></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="roletype"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="section"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="sectionhead"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><select role="select"></select></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="structure"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
+    {
+      code: '<template><div role="window"></div></template>',
+      output: null,
+      errors: [{ messageId: 'abstractRole' }],
+    },
   ],
 });

tests/lib/rules/template-no-aria-hidden-body.js

@@ -17,5 +17,10 @@ ruleTester.run('template-no-aria-hidden-body', rule, {
       output: '<template><body></body></template>',
       errors: [{ messageId: 'noAriaHiddenBody' }],
     },
+    {
+      code: '<template><body aria-hidden></body></template>',
+      output: '<template><body></body></template>',
+      errors: [{ messageId: 'noAriaHiddenBody' }],
+    },
   ],
 });

tests/lib/rules/template-no-array-prototype-extensions.js

@@ -14,6 +14,9 @@ ruleTester.run('template-no-array-prototype-extensions', rule, {
     '<template>{{@items}}</template>',
     '<template>{{firstObject}}</template>',
     '<template>{{length}}</template>',
+    // get helper with firstObject/lastObject as a direct top-level property (not an extension)
+    "<template>{{get this 'firstObject'}}</template>",
+    "<template>{{get this 'lastObject.name'}}</template>",
   ],
 
   invalid: [
@@ -84,5 +87,23 @@ ruleTester.run('template-no-array-prototype-extensions', rule, {
       output: null,
       errors: [{ messageId: 'lastObject' }],
     },
+    // lastObject — in get helper string literal, no fix
+    {
+      code: "<template><Foo @bar={{get this 'list.lastObject'}} /></template>",
+      output: null,
+      errors: [{ messageId: 'lastObject' }],
+    },
+    // firstObject — get helper with `this` as object and string literal path
+    {
+      code: "<template><Foo @bar={{get this 'list.firstObject'}} /></template>",
+      output: "<template><Foo @bar={{get this 'list.0'}} /></template>",
+      errors: [{ messageId: 'firstObject' }],
+    },
+    // firstObject — get helper with @arg as object and firstObject at start of string path
+    {
+      code: "<template><Foo @bar={{get @list 'firstObject.name'}} /></template>",
+      output: "<template><Foo @bar={{get @list '0.name'}} /></template>",
+      errors: [{ messageId: 'firstObject' }],
+    },
   ],
 });

tests/lib/rules/template-no-duplicate-landmark-elements.js

@@ -20,6 +20,8 @@ ruleTester.run('template-no-duplicate-landmark-elements', rule, {
     "<template><main><header><h1>Main Page Header</h1></header></main><dialog id='my-dialog'><header><h1>Dialog Header</h1></header></dialog></template>",
     // Landmarks inside dialog are in a separate scope
     '<template><nav></nav><dialog><nav></nav></dialog></template>',
+    // Landmarks inside popover element are in a separate scope
+    '<template><nav></nav><div popover><nav></nav></div></template>',
     // Dynamic role values — can't determine role statically
     '<template><div role={{this.role}}></div><div role={{this.role}}></div></template>',
     // Dynamic aria-label on one landmark — can't infer whether it duplicates a sibling

tests/lib/rules/template-no-element-event-actions.js

@@ -32,6 +32,20 @@ ruleTester.run('template-no-element-event-actions', rule, {
       `,
       output: null,
     },
+    // requireActionHelper: true — non-action mustache is not flagged
+    {
+      filename: 'my-component.gjs',
+      code: '<template><button type="button" onclick={{this.myAction}}></button></template>',
+      options: [{ requireActionHelper: true }],
+      output: null,
+    },
+    // requireActionHelper: false — string event handler is not flagged
+    {
+      filename: 'my-component.gjs',
+      code: '<template><button type="button" onclick="myFunction()"></button></template>',
+      options: [{ requireActionHelper: false }],
+      output: null,
+    },
   ],
 
   invalid: [
@@ -69,5 +83,69 @@ ruleTester.run('template-no-element-event-actions', rule, {
         },
       ],
     },
+    // requireActionHelper: false — any mustache on event attribute is flagged
+    {
+      filename: 'my-component.gjs',
+      code: '<template><button type="button" onclick={{this.myAction}}></button></template>',
+      options: [{ requireActionHelper: false }],
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
+    // requireActionHelper: true — only {{action ...}} mustaches are flagged
+    {
+      filename: 'my-component.gjs',
+      code: '<template><button onclick={{action "myAction"}}></button></template>',
+      options: [{ requireActionHelper: true }],
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-element-event-actions (hbs)', rule, {
+  valid: [
+    '<button></button>',
+    '<button type="button" onclick="myFunction()"></button>',
+    '<button type="button" {{on "click" this.handleClick}}></button>',
+    {
+      code: '<button type="button" onclick={{this.myAction}}></button>',
+      options: [{ requireActionHelper: true }],
+    },
+    {
+      code: '<button type="button" onclick="myFunction()"></button>',
+      options: [{ requireActionHelper: false }],
+    },
+  ],
+  invalid: [
+    {
+      code: '<button onclick={{action "myAction"}}></button>',
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
+    {
+      code: '<button type="button" onclick={{this.myAction}}></button>',
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
+    {
+      code: '<button type="button" onclick={{this.myAction}}></button>',
+      options: [{ requireActionHelper: false }],
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
+    {
+      code: '<button onclick={{action "myAction"}}></button>',
+      options: [{ requireActionHelper: true }],
+      output: null,
+      errors: [{ messageId: 'noElementEventActions' }],
+    },
   ],
 });

tests/lib/rules/template-no-invalid-interactive.js

@@ -82,6 +82,30 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><@someComponent onclick={{this.click}} /></template>',
     '<template><this.myComponent onclick={{this.click}} /></template>',
     '<template><ns.SomeWidget onclick={{this.click}} /></template>',
+
+    // additionalInteractiveTags: tags listed are treated as interactive
+    {
+      code: '<template><div {{on "click" this.onClick}}></div></template>',
+      options: [{ additionalInteractiveTags: ['div'] }],
+    },
+    {
+      code: '<template><div {{action "foo"}}></div></template>',
+      options: [{ additionalInteractiveTags: ['div'] }],
+    },
+    {
+      code: '<template><div onclick={{action "foo"}}></div></template>',
+      options: [{ additionalInteractiveTags: ['div'] }],
+    },
+
+    // ignoredTags: tags listed are skipped entirely
+    {
+      code: '<template><div {{on "click" this.actionName}}>...</div></template>',
+      options: [{ ignoredTags: ['div'] }],
+    },
+    {
+      code: '<template><div onclick={{action "foo"}}></div></template>',
+      options: [{ ignoredTags: ['div'] }],
+    },
   ],
 
   invalid: [

tests/lib/rules/template-no-invalid-role.js

@@ -66,6 +66,11 @@ ruleTester.run('template-no-invalid-role', rule, {
     '<template><div role="Button">Click</div></template>',
     '<template><div role="NAVIGATION">Nav</div></template>',
     '<template><div role="ALERT">Alert</div></template>',
+    // catchNonexistentRoles: false — non-existent roles are not flagged
+    {
+      code: '<template><div role="command interface"></div></template>',
+      options: [{ catchNonexistentRoles: false }],
+    },
   ],
 
   invalid: [
@@ -166,6 +171,12 @@ ruleTester.run('template-no-invalid-role', rule, {
       output: null,
       errors: [{ message: "Invalid ARIA role 'COMMAND INTERFACE'. Must be a valid ARIA role." }],
     },
+    {
+      code: '<template><div role="command interface"></div></template>',
+      output: null,
+      options: [{ catchNonexistentRoles: true }],
+      errors: [{ message: "Invalid ARIA role 'command interface'. Must be a valid ARIA role." }],
+    },
 
     // Newly added SEMANTIC_ELEMENTS: presentation/none on iframe, video, audio
     {

tests/lib/rules/template-no-obsolete-elements.js

@@ -21,6 +21,46 @@ ruleTester.run('template-no-obsolete-elements', rule, {
       output: null,
       errors: [{ messageId: 'obsolete' }],
     },
+    {
+      code: '<template><big></big></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><blink></blink></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><center></center></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><font></font></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><frame></frame></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><frameset></frameset></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><strike></strike></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
+    {
+      code: '<template><tt></tt></template>',
+      output: null,
+      errors: [{ messageId: 'obsolete' }],
+    },
     // Element's own block params must not shadow its own tag name.
     {
       code: '<template><marquee as |marquee|></marquee></template>',