AC-391: Static test to cover "deprecated" jQuery methods

Rrego6 · Rrego6 · commit 1547f2a0edd7 · 2021-12-08T06:10:19.000-06:00
- Improved static test coverage:
    - Removed jQuery.load(handler) test as jQuery.load(handler) is a valid function
    - Removed jQuery.error(handler) test as jQuery.error(msg) is a valid function
    - Added static tests for $.isFunction, $.type, $.parseJson, $.isArray
    - Added test for $.expr[':'] and $.expr.filters
diff --git a/Magento2/Tests/Eslint/AbstractEslintTestCase.php b/Magento2/Tests/Eslint/AbstractEslintTestCase.php
@@ -23,7 +23,7 @@ abstract class AbstractEslintTestCase extends TestCase
     protected function assertFileContainsError(string $testFile, array $expectedMessages): void
     {
         exec(
-            'npm run eslint -- Magento2/Tests/Eslint/' . $testFile,
+            'npm run eslint -- Magento2/Tests/Eslint/' . $testFile . ' 2>&1',
             $output
         );
 
diff --git a/Magento2/Tests/Eslint/AndSelfTest.js b/Magento2/Tests/Eslint/AndSelfTest.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
     $('div').find('p').andSelf().addClass('border');
diff --git a/Magento2/Tests/Eslint/BindUnbindTest.js b/Magento2/Tests/Eslint/BindUnbindTest.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
     $('.btn1').bind('click');
diff --git a/Magento2/Tests/Eslint/ClickEventShorthandTest.js b/Magento2/Tests/Eslint/ClickEventShorthandTest.js
@@ -1,5 +1,6 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
-    $('input').blur();
+    $('#result').blur();
+    $.fn.focus(function () {});
 });
diff --git a/Magento2/Tests/Eslint/ClickEventShorthandTest.php b/Magento2/Tests/Eslint/ClickEventShorthandTest.php
@@ -18,7 +18,10 @@ public function testExecute(): void
     {
         $this->assertFileContainsError(
             'ClickEventShorthandTest.js',
-            ['Instead of .blur(fn) use .on("blur", fn). Instead of .blur() use .trigger("blur")']
+            [
+                'Instead of .blur(fn) use .on("blur", fn). Instead of .blur() use .trigger("blur")',
+                'Instead of .focus(fn) use .on("focus", fn). Instead of .focus() use .trigger("focus")',
+            ]
         );
     }
-}
+}
diff --git a/Magento2/Tests/Eslint/DelegateUndelegateTest.js b/Magento2/Tests/Eslint/DelegateUndelegateTest.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
     $('table').delegate('td', 'click', function () {
diff --git a/Magento2/Tests/Eslint/EventShorthandTest.js b/Magento2/Tests/Eslint/EventShorthandTest.js
@@ -1,5 +1,4 @@
 $(document).ready(function () {
     'use strict';
-
-    $('#result').load('ajax/test.html');
+    $('#result').unload(function () {});
 });
diff --git a/Magento2/Tests/Eslint/EventShorthandTest.php b/Magento2/Tests/Eslint/EventShorthandTest.php
@@ -18,7 +18,10 @@ public function testExecute(): void
     {
         $this->assertFileContainsError(
             'EventShorthandTest.js',
-            ['jQuery.load() was removed, use .on("load", fn) instead']
+            [
+                'jQuery.unload() was removed, use .on("unload", fn) instead',
+                'jQuery.ready(handler) is deprecated and should be replaced with jQuery(handler)'
+            ]
         );
     }
-}
+}
diff --git a/Magento2/Tests/Eslint/MiscDeprecatedExprTest.js b/Magento2/Tests/Eslint/MiscDeprecatedExprTest.js
@@ -0,0 +1,6 @@
+$(function () {
+    'use strict';
+
+    $.extend($.expr[':'], {});
+    jQuery.extend($.expr.filters, {});
+});
diff --git a/Magento2/Tests/Eslint/MiscDeprecatedExprTest.php b/Magento2/Tests/Eslint/MiscDeprecatedExprTest.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class EventShorthandTest
+ *
+ * Test Eslint Rule: jquery-no-event-shorthand.js
+ */
+class MiscDeprecatedExprTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'MiscDeprecatedExprTest.js',
+            [
+                'jQuery.expr[":"] is deprecated; Use jQuery.expr.pseudos instead',
+                'jQuery.expr.filters is deprecated; Use jQuery.expr.pseudos instead'
+            ]
+        );
+    }
+}
diff --git a/Magento2/Tests/Eslint/MiscDeprecatedFunctionsTest.js b/Magento2/Tests/Eslint/MiscDeprecatedFunctionsTest.js
@@ -0,0 +1,8 @@
+$(function () {
+    'use strict';
+
+    $.parseJSON('');
+    jQuery.type({});
+    $.isArray({});
+    $.isFunction({})
+});
diff --git a/Magento2/Tests/Eslint/MiscDeprecatedFunctionsTest.php b/Magento2/Tests/Eslint/MiscDeprecatedFunctionsTest.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class EventShorthandTest
+ *
+ * Test Eslint Rule: jquery-no-event-shorthand.js
+ */
+class MiscDeprecatedFunctionsTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'MiscDeprecatedFunctionsTest.js',
+            [
+                'jQuery.isFunction() is deprecated. In most cases, it can be replaced by [typeof x === "function"]',
+                'jQuery.type() is deprecated. Replace with an appropriate type check like [typeof x === "function"]',
+                'jQuery.isArray() is deprecated. Use the native Array.isArray method instead',
+                'jQuery.parseJSON() is deprecated. To parse JSON strings, use the native JSON.parse method instead'
+            ]
+        );
+    }
+}
diff --git a/Magento2/Tests/Eslint/SizeTest.js b/Magento2/Tests/Eslint/SizeTest.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
     $('div').size();
diff --git a/Magento2/Tests/Eslint/TrimTest.js b/Magento2/Tests/Eslint/TrimTest.js
@@ -1,4 +1,4 @@
-$(document).ready(function () {
+$(function () {
     'use strict';
 
     $.trim('    hello, how are you?    ');
diff --git a/eslint/.eslintrc-jquery b/eslint/.eslintrc-jquery
@@ -6,6 +6,8 @@
         "jquery-no-delegate-undelegate": 2,
         "jquery-no-event-shorthand": 2,
         "jquery-no-size": 2,
-        "jquery-no-trim": 2
+        "jquery-no-trim": 2,
+        "jquery-no-misc-deprecated-functions": 2,
+        "jquery-no-deprecated-expr": 2
     }
 }
diff --git a/eslint/rules/jquery-no-deprecated-expr.js b/eslint/rules/jquery-no-deprecated-expr.js
@@ -0,0 +1,48 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow the use of shorthand event methods',
+            category: 'jQuery deprecated functions',
+            recommended: true,
+            url: 'https://api.jquery.com/load/'
+        },
+        schema: []
+    },
+
+    /**
+     * Executes the function to check if shorthand methods are used.
+     *
+     * @param {Object} context
+     * @returns {Object}
+     */
+    create: function (context) {
+        'use strict';
+
+        var utils = require('./utils.js');
+
+        return {
+            /**
+             * Checks if shorthand methods are used and reports it.
+             *
+             * @param {Object} node - The node to check.
+             */
+            'MemberExpression[property.value=":"] MemberExpression[property.name="expr"]': function (node) {
+                if (utils.isjQuery(node)) {
+                    context.report({
+                        node: node,
+                        message: 'jQuery.expr[":"] is deprecated; Use jQuery.expr.pseudos instead'
+                    });
+                }
+            },
+            'MemberExpression[property.name="filters"] MemberExpression[property.name="expr"]': function (node) {
+                if (utils.isjQuery(node)) {
+                    context.report({
+                        node: node,
+                        message: 'jQuery.expr.filters is deprecated; Use jQuery.expr.pseudos instead'
+                    });
+                }
+            }
+        };
+    }
+};
diff --git a/eslint/rules/jquery-no-event-shorthand.js b/eslint/rules/jquery-no-event-shorthand.js
@@ -2,7 +2,7 @@ module.exports = {
     meta: {
         type: 'suggestion',
         docs: {
-            description: 'Disallow the use of shorthand methods',
+            description: 'Disallow the use of shorthand event methods',
             category: 'jQuery deprecated functions',
             recommended: true,
             url: 'https://api.jquery.com/load/'
@@ -23,23 +23,26 @@ module.exports = {
 
         return {
             /**
-             * Checks if shorthand methods are used and reports it.
+             * Checks if deprecated functions are used and reports it.
              *
              * @param {Object} node - The node to check.
              */
             CallExpression: function (node) {
-                var names = ['load', 'unload', 'error'],
+                var namesToMsg = {
+                        'unload': 'jQuery.unload() was removed, use .on("unload", fn) instead.',
+                        'ready': 'jQuery.ready(handler) is deprecated and should be replaced with jQuery(handler)'
+                    },
                     name;
 
                 if (node.callee.type !== 'MemberExpression') {return;}
 
-                if (!names.includes(node.callee.property.name)) {return;}
+                name = node.callee.property.name;
+                if (!(name in namesToMsg)) {return;}
 
                 if (utils.isjQuery(node)) {
-                    name = node.callee.property.name;
                     context.report({
                         node: node,
-                        message: 'jQuery.' + name + '() was removed, use .on("' + name + '", fn) instead.'
+                        message: namesToMsg[name]
                     });
                 }
             }
diff --git a/eslint/rules/jquery-no-misc-deprecated-functions.js b/eslint/rules/jquery-no-misc-deprecated-functions.js
@@ -0,0 +1,57 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow the use of shorthand event methods',
+            category: 'jQuery deprecated functions',
+            recommended: true,
+            url: 'https://api.jquery.com/load/'
+        },
+        schema: []
+    },
+
+    /**
+     * Executes the function to check if shorthand methods are used.
+     *
+     * @param {Object} context
+     * @returns {Object}
+     */
+    create: function (context) {
+        'use strict';
+
+        var utils = require('./utils.js');
+
+        return {
+            /**
+             * Checks if shorthand methods are used and reports it.
+             *
+             * @param {Object} node - The node to check.
+             */
+            CallExpression: function (node) {
+                var namesToMsg = {
+                        'isFunction': 'jQuery.isFunction() is deprecated. '
+                            + 'In most cases, it can be replaced by [typeof x === "function"]',
+                        'type': 'jQuery.type() is deprecated. ' +
+                            'Replace with an appropriate type check like [typeof x === "function"]',
+                        'isArray': 'jQuery.isArray() is deprecated. ' +
+                            'Use the native Array.isArray method instead',
+                        'parseJSON' : 'jQuery.parseJSON() is deprecated. ' +
+                            'To parse JSON strings, use the native JSON.parse method instead'
+                    },
+                    name;
+
+                if (node.callee.type !== 'MemberExpression') {return;}
+
+                name = node.callee.property.name;
+                if (!(name in namesToMsg)) {return;}
+
+                if (utils.isjQuery(node)) {
+                    context.report({
+                        node: node,
+                        message: namesToMsg[name]
+                    });
+                }
+            }
+        };
+    }
+};
diff --git a/eslint/rules/utils.js b/eslint/rules/utils.js
@@ -40,7 +40,7 @@ function isjQuery(node) {
 
     var id = traverse(node);
 
-    return id && id.name.startsWith('$');
+    return id && id.name.startsWith('$') || id.name.toLowerCase() === 'jquery';
 }
 
 module.exports = {

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ abstract class AbstractEslintTestCase extends TestCase`
`23`	`23`	`protected function assertFileContainsError(string $testFile, array $expectedMessages): void`
`24`	`24`	`{`
`25`	`25`	`exec(`
`26`		`- 'npm run eslint -- Magento2/Tests/Eslint/' . $testFile,`
	`26`	`+ 'npm run eslint -- Magento2/Tests/Eslint/' . $testFile . ' 2>&1',`
`27`	`27`	`$output`
`28`	`28`	`);`
`29`	`29`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-$(document).ready(function () {`
	`1`	`+$(function () {`
`2`	`2`	`'use strict';`
`3`	`3`
`4`	`4`	`$('div').find('p').andSelf().addClass('border');`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,10 @@ public function testExecute(): void`
`18`	`18`	`{`
`19`	`19`	`$this->assertFileContainsError(`
`20`	`20`	`'ClickEventShorthandTest.js',`
`21`		`- ['Instead of .blur(fn) use .on("blur", fn). Instead of .blur() use .trigger("blur")']`
	`21`	`+ [`
	`22`	`+ 'Instead of .blur(fn) use .on("blur", fn). Instead of .blur() use .trigger("blur")',`
	`23`	`+ 'Instead of .focus(fn) use .on("focus", fn). Instead of .focus() use .trigger("focus")',`
	`24`	`+ ]`
`22`	`25`	`);`
`23`	`26`	`}`
`24`		`-}`
	`27`	`+}`