Merge pull request #132 from magento-trigger/AC-391

loginesta · web-flow · commit 5559687a97cb · 2021-12-17T15:57:42.000+01:00
AC-391: Static test to cover "deprecated" jQuery methods
diff --git a/Magento2/Tests/Eslint/AndSelfTest.js b/Magento2/Tests/Eslint/AndSelfTest.js
@@ -1,5 +1,9 @@
-$(document).ready(function () {
-    'use strict';
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
 
-    $('div').find('p').andSelf().addClass('border');
+        $('div').find('p').andSelf().addClass('border');
+    });
 });
diff --git a/Magento2/Tests/Eslint/BindUnbindTest.js b/Magento2/Tests/Eslint/BindUnbindTest.js
@@ -1,5 +1,9 @@
-$(document).ready(function () {
-    'use strict';
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
 
-    $('.btn1').bind('click');
+        $('.btn1').bind('click');
+    });
 });
diff --git a/Magento2/Tests/Eslint/ClickEventShorthandTest.js b/Magento2/Tests/Eslint/ClickEventShorthandTest.js
diff --git a/Magento2/Tests/Eslint/ClickEventShorthandTest.php b/Magento2/Tests/Eslint/ClickEventShorthandTest.php
diff --git a/Magento2/Tests/Eslint/DelegateUndelegateTest.js b/Magento2/Tests/Eslint/DelegateUndelegateTest.js
@@ -1,7 +1,11 @@
-$(document).ready(function () {
-    'use strict';
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
 
-    $('table').delegate('td', 'click', function () {
-        $(this).toggleClass('chosen');
+        $('table').delegate('td', 'click', function () {
+            $(this).toggleClass('chosen');
+        });
     });
 });
diff --git a/Magento2/Tests/Eslint/DeprecatedExprTest.js b/Magento2/Tests/Eslint/DeprecatedExprTest.js
@@ -0,0 +1,10 @@
+define([
+    'jquery',
+], function (jQuery) {
+    $(function () {
+        'use strict';
+
+        jQuery.extend(jQuery.expr[':'], {});
+        jQuery.extend(jQuery.expr.filters, {});
+    });
+});
diff --git a/Magento2/Tests/Eslint/DeprecatedExprTest.php b/Magento2/Tests/Eslint/DeprecatedExprTest.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 DeprecatedExprTest
+ *
+ * Test Eslint Rule: jquery-no-deprecated-expr.js
+ */
+class DeprecatedExprTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'DeprecatedExprTest.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/EventShorthandTest.js b/Magento2/Tests/Eslint/EventShorthandTest.js
@@ -1,5 +1,10 @@
-$(document).ready(function () {
-    'use strict';
-
-    $('#result').load('ajax/test.html');
+define([
+    'jquery',
+], function (jQuery) {
+    jQuery(document).ready(function () {
+        'use strict';
+        jQuery('#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/InputEventShorthandTest.js b/Magento2/Tests/Eslint/InputEventShorthandTest.js
@@ -0,0 +1,11 @@
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
+
+        $('#result').blur();
+        $.fn.focus(function () {
+        });
+    });
+});
diff --git a/Magento2/Tests/Eslint/InputEventShorthandTest.php b/Magento2/Tests/Eslint/InputEventShorthandTest.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 InputEventShorthandTest
+ *
+ * Test Eslint Rule: jquery-no-input-event-shorthand.js
+ */
+class InputEventShorthandTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'InputEventShorthandTest.js',
+            [
+                '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/MiscDeprecatedFunctionsTest.js b/Magento2/Tests/Eslint/MiscDeprecatedFunctionsTest.js
@@ -0,0 +1,12 @@
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
+
+        $.parseJSON('');
+        $.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 MiscDeprecatedFunctionsTest
+ *
+ * Test Eslint Rule: jquery-no-misc-deprecated-functions.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,5 +1,9 @@
-$(document).ready(function () {
-    'use strict';
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
 
-    $('div').size();
+        $('div').size();
+    });
 });
diff --git a/Magento2/Tests/Eslint/TrimTest.js b/Magento2/Tests/Eslint/TrimTest.js
@@ -1,5 +1,9 @@
-$(document).ready(function () {
-    'use strict';
+define([
+    'jquery',
+], function ($) {
+    $(function () {
+        'use strict';
 
-    $.trim('    hello, how are you?    ');
+        $.trim('    hello, how are you?    ');
+    });
 });
diff --git a/eslint/.eslintrc-jquery b/eslint/.eslintrc-jquery
@@ -1,11 +1,14 @@
 {
+    "ignorePatterns": ["**/vendor/**/*.js", "**/node_modules/**/*.js"],
     "rules": {
         "jquery-no-andSelf": 2,
         "jquery-no-bind-unbind": 2,
-        "jquery-no-click-event-shorthand": 2,
+        "jquery-no-input-event-shorthand": 2,
         "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,54 @@
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow the use of deprecated way to add to custom selectors',
+            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 for jQuery.expr[':']
+             *
+             * @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'
+                    });
+                }
+            },
+
+            /**
+             * Checks for jQuery.expr.filters
+             *
+             * @param {Object} node - The node to check.
+             */
+            '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/'
@@ -11,7 +11,7 @@ module.exports = {
     },
 
     /**
-     * Executes the function to check if shorthand methods are used.
+     * Executes the function to check if shorthand event methods are used.
      *
      * @param {Object} context
      * @returns {Object}
@@ -23,23 +23,28 @@ module.exports = {
 
         return {
             /**
-             * Checks if shorthand methods are used and reports it.
+             * Checks if shorthand event methods are used.
              *
              * @param {Object} node - The node to check.
              */
             CallExpression: function (node) {
-                var names = ['load', 'unload', 'error'],
-                    name;
+                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,
+                    message;
 
                 if (node.callee.type !== 'MemberExpression') {return;}
 
-                if (!names.includes(node.callee.property.name)) {return;}
+                name = node.callee.property.name;
+                if (!namesToMsg.hasOwnProperty(name)) {return;}
+                message = namesToMsg[name];
 
                 if (utils.isjQuery(node)) {
-                    name = node.callee.property.name;
                     context.report({
                         node: node,
-                        message: 'jQuery.' + name + '() was removed, use .on("' + name + '", fn) instead.'
+                        message: message
                     });
                 }
             }
diff --git a/eslint/rules/jquery-no-input-event-shorthand.js b/eslint/rules/jquery-no-input-event-shorthand.js
@@ -2,7 +2,7 @@ module.exports = {
     meta: {
         type: 'suggestion',
         docs: {
-            description: 'Disallow the use of shortcuts to trigger events',
+            description: 'Disallow the use of shortcuts to input events via keyboard/mouse trigger events',
             category: 'jQuery deprecated functions',
             recommended: true,
             url: 'https://api.jquery.com/bind/'
@@ -42,8 +42,7 @@ module.exports = {
                     name = node.callee.property.name;
                     context.report({
                         node: node,
-                        message:
-                            'Instead of .' + name + '(fn) use .on("' + name + '", fn). Instead of .' + name +
+                        message: 'Instead of .' + name + '(fn) use .on("' + name + '", fn). Instead of .' + name +
                             '() use .trigger("' + name + '")'
                     });
                 }
diff --git a/eslint/rules/jquery-no-misc-deprecated-functions.js b/eslint/rules/jquery-no-misc-deprecated-functions.js
diff --git a/eslint/rules/jquery-no-trim.js b/eslint/rules/jquery-no-trim.js
diff --git a/eslint/rules/utils.js b/eslint/rules/utils.js

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`	`'EventShorthandTest.js',`
`21`		`- ['jQuery.load() was removed, use .on("load", fn) instead']`
	`21`	`+ [`
	`22`	`+ 'jQuery.unload() was removed, use .on("unload", fn) instead',`
	`23`	`+ 'jQuery.ready(handler) is deprecated and should be replaced with jQuery(handler)'`
	`24`	`+ ]`
`22`	`25`	`);`
`23`	`26`	`}`
`24`		`-}`
	`27`	`+}`