[eslint] Add new test case for html tagged template

With the new change of allowing destruction in the import,
create a test case for this rule as well.

Bug: 397260638
Change-Id: I276d185beb377599cec2cd7fdb526fc33fae98f1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6278525
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>

Author: Lightning00Blade

scripts/eslint_rules/lib/html-tagged-template.js

@@ -14,46 +14,58 @@ module.exports = {
       category: 'Possible Errors',
     },
     fixable: 'code',
-    schema: []  // no options
+    schema: [], // no options
   },
-  create: function(context) {
+  create: function (context) {
     const sourceCode = context.sourceCode ?? context.getSourceCode();
     let lastImport = null;
-    let shortandDefined = false;
+    let shorthandDefined = false;
     return {
       ImportDeclaration(node) {
         lastImport = node;
       },
       VariableDeclarator(node) {
-        if ((sourceCode.getScope ? sourceCode.getScope(node) : context.getScope()).type !== 'module') {
+        if (
+          (sourceCode.getScope ? sourceCode.getScope(node) : context.getScope())
+            .type !== 'module'
+        ) {
           return;
         }
         if (node.id.name === 'html') {
-          shortandDefined = true;
+          shorthandDefined = true;
         }
         for (const property of node.id.properties || []) {
           if (property.key.name === 'html') {
-            shortandDefined = true;
+            shorthandDefined = true;
           }
         }
       },
       TaggedTemplateExpression(node) {
         const tag = node.tag;
-        if (tag.type === 'MemberExpression' && tag.object.name === 'Lit' && tag.property.name === 'html') {
+        if (
+          tag.type === 'MemberExpression' &&
+          tag.object.name === 'Lit' &&
+          tag.property.name === 'html'
+        ) {
           context.report({
             node,
-            message: 'Use unqualified html tagged template for compatibility with lit-analyzer',
+            message:
+              'Use unqualified html tagged template for compatibility with lit-analyzer',
             fix(fixer) {
-              const result = [fixer.removeRange([tag.object.range[0], tag.property.range[0]])];
-              if (lastImport && !shortandDefined) {
-                result.push(fixer.insertTextAfter(lastImport, '\n\nconst {html} = Lit;'));
-                shortandDefined = true;
+              const result = [
+                fixer.removeRange([tag.object.range[0], tag.property.range[0]]),
+              ];
+              if (lastImport && !shorthandDefined) {
+                result.push(
+                  fixer.insertTextAfter(lastImport, '\n\nconst {html} = Lit;'),
+                );
+                shorthandDefined = true;
               }
               return result;
-            }
+            },
           });
         }
-      }
+      },
     };
-  }
+  },
 };

scripts/eslint_rules/tests/html-tagged-template.test.js

@@ -13,6 +13,16 @@ const error = {
 
 new RuleTester().run('html-tagged-template', rule, {
   valid: [
+    {
+      code: `import {html, render} from '../../ui/lit/lit.js';
+
+      function render() {
+        render(
+            html\`<div></div>\`,
+            this.shadow, {host: this});
+      }
+      `,
+    },
     {
       code: `import * as Lit from '../../../../ui/lit/lit.js';