test: port ember-template-lint test cases to ESLint rules

Author: NullVoxPopuli

tests/lib/rules/template-no-attrs-in-components.js

@@ -16,6 +16,11 @@ ruleTester.run('template-no-attrs-in-components', rule, {
        <template>{{this.args.name}}</template>
      }`,
     '<template>{{attrs}}</template>',
+
+    // Test cases ported from ember-template-lint - basic smoke tests
+    '<template><div></div></template>',
+    '<template>{{foo}}</template>',
+    '<template><div>{{foo.bar}}</div></template>',
   ],
   invalid: [
     {

tests/lib/rules/template-no-bare-strings.js

@@ -181,5 +181,17 @@ ruleTester.run('template-no-bare-strings', rule, {
       output: null,
       errors: [{ messageId: 'bareString' }, { messageId: 'bareString' }],
     },
+    {
+      code: '<template><input placeholder="This is a placeholder" /></template>',
+      filename: 'template.gjs',
+      output: null,
+      errors: [{ messageId: 'bareString' }],
+    },
+    {
+      code: '<template><img alt="This is alt text" /></template>',
+      filename: 'template.gts',
+      output: null,
+      errors: [{ messageId: 'bareString' }],
+    },
   ],
 });

tests/lib/rules/template-no-curly-component-invocation.js

@@ -64,5 +64,35 @@ ruleTester.run('template-no-curly-component-invocation', rule, {
         },
       ],
     },
+    {
+      code: '<template>{{#foo-bar}}{{/foo-bar}}</template>',
+      output: null,
+      errors: [
+        {
+          message:
+            "You are using the component {{#foo-bar}} with curly component syntax. You should use <FooBar> instead. If it is actually a helper you must manually add it to the 'no-curly-component-invocation' rule configuration, e.g. `'no-curly-component-invocation': { allow: ['foo-bar'] }`.",
+        },
+      ],
+    },
+    {
+      code: '<template>{{#foo-bar/baz/boo-foo}}block{{/foo-bar/baz/boo-foo}}</template>',
+      output: null,
+      errors: [
+        {
+          message:
+            "You are using the component {{#foo-bar/baz/boo-foo}} with curly component syntax. You should use <FooBar::Baz::BooFoo> instead. If it is actually a helper you must manually add it to the 'no-curly-component-invocation' rule configuration, e.g. `'no-curly-component-invocation': { allow: ['foo-bar/baz/boo-foo'] }`.",
+        },
+      ],
+    },
+    {
+      code: '<template>{{foo}}</template>',
+      options: [{ disallow: ['foo'] }],
+      output: null,
+      errors: [
+        {
+          message: generateError('foo'),
+        },
+      ],
+    },
   ],
 });

tests/lib/rules/template-no-duplicate-attributes.js

@@ -37,6 +37,9 @@ ruleTester.run('template-no-duplicate-attributes', rule, {
     '<template><a class="btn">{{btnLabel}}</a></template>',
     '<template>{{employee-profile employee=(hash firstName=firstName lastName=lastName age=age)}}</template>',
     '<template>{{employee-profile employee=(hash fullName=(hash firstName=firstName lastName=lastName) age=age)}}</template>',
+
+    // Block form with params (no duplicates)
+    '<template>{{#my-component firstName=firstName lastName=lastName as |fullName|}}{{fullName}}{{/my-component}}</template>',
   ],
 
   invalid: [

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

@@ -11,6 +11,19 @@ ruleTester.run('template-no-duplicate-landmark-elements', rule, {
     '<template><header aria-label="Main">Header</header></template>',
     '<template><nav aria-label="Primary">Nav 1</nav><nav aria-label="Secondary">Nav 2</nav></template>',
     '<template><main>Content</main></template>',
+
+    // Test cases ported from ember-template-lint
+    // Nav + div with role="navigation" (different unique labels)
+    '<template><nav aria-label="primary site navigation"></nav><div role="navigation" aria-label="secondary site navigation within home page"></div></template>',
+
+    // Form with aria-labelledby + another form with aria-label (unique labels)
+    '<template><form aria-labelledby="form-title"><div id="form-title">Shipping Address</div></form><form aria-label="meaningful title of second form"></form></template>',
+
+    // Standard page layout (unique landmarks by type)
+    '<template><header></header><main></main><footer></footer></template>',
+
+    // role="none" — not a landmark, should be ignored
+    '<template><img role="none"><img role="none"></template>',
   ],
 
   invalid: [

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

@@ -43,5 +43,11 @@ ruleTester.run('template-no-forbidden-elements', rule, {
       output: null,
       errors: [{ messageId: 'forbidden' }],
     },
+    {
+      code: '<template><Foo /></template>',
+      output: null,
+      options: [['Foo']],
+      errors: [{ messageId: 'forbidden' }],
+    },
   ],
 });

tests/lib/rules/template-no-invalid-link-text.js

@@ -111,5 +111,11 @@ ruleTester.run('template-no-invalid-link-text', rule, {
       output: null,
       errors: [{ messageId: 'invalidText' }],
     },
+    {
+      code: '<template><MyLink>click here</MyLink></template>',
+      output: null,
+      options: [{ linkComponents: ['MyLink'] }],
+      errors: [{ messageId: 'invalidText' }],
+    },
   ],
 });

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

@@ -12,6 +12,26 @@ ruleTester.run('template-no-invalid-meta', rule, {
     '<template><meta charset="UTF-8" /></template>',
     '<template><meta charset="utf8" /></template>',
     '<template><meta name="viewport" content="width=device-width" /></template>',
+
+    // Test cases ported from ember-template-lint
+    // Bare meta (no attrs)
+    '<template><meta></template>',
+
+    // Valid http-equiv refresh (delay=0 for redirect, >72000)
+    '<template><meta http-equiv="refresh" content="0; url=http://www.example.com"></template>',
+    '<template><meta http-equiv="refresh" content="72001"></template>',
+
+    // Dynamic attributes (can't validate at lint time)
+    '<template><meta http-equiv={{httpEquiv}} content={{content}}></template>',
+    '<template><meta name={{name}} content={{content}}></template>',
+
+    // Viewport with user-scalable=yes (valid)
+    '<template><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"></template>',
+    '<template><meta name="viewport" content="width=device-width, initial-scale=1"></template>',
+
+    // property and itemprop with content (valid)
+    '<template><meta property="og:type" content="website"></template>',
+    '<template><meta itemprop="type" content="website"></template>',
   ],
 
   invalid: [

tests/lib/rules/template-no-negated-condition.js

@@ -15,6 +15,51 @@ ruleTester.run('template-no-negated-condition', rule, {
     '<template>{{#if isValid}}Yes{{/if}}</template>',
     '<template>{{#unless isInvalid}}Yes{{/unless}}</template>',
     '<template>{{#if (eq value 1)}}Yes{{/if}}</template>',
+
+    // Test cases ported from ember-template-lint: not with multiple args / non-not helpers
+    '<template>{{#if condition}}<img>{{/if}}</template>',
+    '<template>{{#if (or c1 c2)}}{{/if}}</template>',
+    '<template>{{#if (not (or c1 c2))}}{{/if}}</template>',
+    '<template>{{#if (not c1 c2)}}{{/if}}</template>',
+    '<template>{{#if (not (not c1) c2)}}<img>{{/if}}</template>',
+    '<template>{{#if (not c1 (not c2))}}<img>{{/if}}</template>',
+
+    // simplifyHelpers: false config
+    {
+      code: '<template>{{#if (not (not c2))}}<img>{{/if}}</template>',
+      options: [{ simplifyHelpers: false }],
+    },
+    {
+      code: '<template>{{#if (not (eq c2))}}<img>{{/if}}</template>',
+      options: [{ simplifyHelpers: false }],
+    },
+
+    // if...else / if...else if patterns
+    '<template>{{#if condition}}<img>{{else}}<img>{{/if}}</template>',
+    '<template>{{#if (or c1 c2)}}<img>{{else}}<img>{{/if}}</template>',
+    '<template>{{#if condition}}<img>{{else if condition}}<img>{{/if}}</template>',
+    '<template>{{#if condition}}<img>{{else if (not condition2)}}<img>{{/if}}</template>',
+    '<template>{{#if (not condition)}}<img>{{else if (not condition2)}}<img>{{/if}}</template>',
+    '<template>{{#if condition}}<img>{{else if condition}}<img>{{else}}<img>{{/if}}</template>',
+    '<template>{{#if (not condition)}}<img>{{else if (not condition2)}}<img>{{else}}<img>{{/if}}</template>',
+
+    // unless variants
+    '<template>{{#unless (or c1 c2)}}<img>{{/unless}}</template>',
+    '<template>{{#unless condition}}<img>{{else}}<img>{{/unless}}</template>',
+    '<template>{{#unless condition}}<img>{{else if condition}}<img>{{/unless}}</template>',
+    '<template>{{#unless condition}}<img>{{else if condition}}<img>{{else}}<img>{{/unless}}</template>',
+
+    // MustacheStatement context (inline)
+    '<template><img class={{if condition "some-class"}}></template>',
+    '<template><img class={{if condition "some-class" "other-class"}}></template>',
+    '<template><img class={{unless condition "some-class"}}></template>',
+    '<template><img class={{if (not (or c1 c2)) "some-class"}}></template>',
+
+    // SubExpression context
+    '<template>{{input class=(if condition "some-class")}}</template>',
+    '<template>{{input class=(if condition "some-class" "other-class")}}</template>',
+    '<template>{{input class=(unless condition "some-class")}}</template>',
+    '<template>{{input class=(if (not (or c1 c2)) "some-class")}}</template>',
   ],
   invalid: [
     {

tests/lib/rules/template-no-nested-splattributes.js

@@ -56,8 +56,29 @@ ruleTester.run('template-no-nested-splattributes', rule, {
 
     // Test cases ported from ember-template-lint
     {
-      code: `<template><div ...attributes><div ...attributes>
-</div></div></template>`,
+      code: `<template><div ...attributes>
+  <div ...attributes>
+    ...
+  </div>
+</div>
+</template>`,
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not use ...attributes on nested elements. Only use it on the top-level element of a component.',
+        },
+      ],
+    },
+    {
+      code: `<template><div ...attributes>
+  <div>
+    <div ...attributes>
+    ...
+    </div>
+  </div>
+</div>
+</template>`,
       output: null,
       errors: [
         {