Eslint jQuery migration tests (#42)

* MC-41858: Eslint jQuery migration tests * MC-41858: Updated eslint jQuery configuration * MC-41858: Fixed eslint jQuery static tests * MC-41858: Fixed eslint jQuery static tests * MC-41858: Fixed eslint jQuery static tests * MC-41858: Fixed eslint jQuery static tests
magento · May 26, 2021 · 979c0f7 · 979c0f7
1 parent 95445b3
commit 979c0f7
Show file tree

Hide file tree

Showing 35 changed files with 302 additions and 54 deletions.
diff --git a/app/code/Magento/Bundle/view/frontend/web/js/slide.js b/app/code/Magento/Bundle/view/frontend/web/js/slide.js
@@ -85,7 +85,7 @@ define([
             $('html, body').animate({
                 scrollTop: $(this.options.bundleOptionsContainer).offset().top
             }, 600);
-            $('#product-options-wrapper > fieldset').focus();
+            $('#product-options-wrapper > fieldset').trigger('focus');
         },
 
         /**

diff --git a/app/code/Magento/Catalog/view/adminhtml/web/catalog/category/form.js b/app/code/Magento/Catalog/view/adminhtml/web/catalog/category/form.js
@@ -45,10 +45,10 @@ define([
                         content: data.message
                     });
                 } else {
-                    $(this.options.categoryIdSelector).val(data.id).change();
-                    $(this.options.categoryPathSelector).val(data.path).change();
-                    $(this.options.categoryParentSelector).val(data.parentId).change();
-                    $(this.options.categoryLevelSelector).val(data.level).change();
+                    $(this.options.categoryIdSelector).val(data.id).trigger('change');
+                    $(this.options.categoryPathSelector).val(data.path).trigger('change');
+                    $(this.options.categoryParentSelector).val(data.parentId).trigger('change');
+                    $(this.options.categoryLevelSelector).val(data.level).trigger('change');
                 }
             }
         };

diff --git a/app/code/Magento/Catalog/view/adminhtml/web/js/custom-options.js b/app/code/Magento/Catalog/view/adminhtml/web/js/custom-options.js
@@ -437,7 +437,7 @@ define([
             this.refreshSortableElements();
             this.options.selectionItemCount[data.id] = parseInt(this.options.selectionItemCount[data.id], 10) + 1;
 
-            $('#' + this.options.fieldId + '_' + data.id + '_select_' + data['select_id'] + '_title').focus();
+            $('#' + this.options.fieldId + '_' + data.id + '_select_' + data['select_id'] + '_title').trigger('focus');
         },
 
         /**

diff --git a/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js b/app/code/Magento/Catalog/view/adminhtml/web/js/new-category-dialog.js
@@ -75,7 +75,7 @@ define([
                     $('#new_category_name').val(enteredName);
 
                     if (enteredName === '') {
-                        $('#new_category_name').focus();
+                        $('#new_category_name').trigger('focus');
                     }
                     $('#new_category_messages').html('');
                 },
@@ -88,7 +88,7 @@ define([
                     validationOptions.unhighlight($('#new_category_parent-suggest').get(0),
                         validationOptions.errorClass, validationOptions.validClass || '');
                     newCategoryForm.validation('clearError');
-                    $('#category_ids-suggest').focus();
+                    $('#category_ids-suggest').trigger('focus');
                 },
                 buttons: [{
                     text: $.mage.__('Create Category'),

diff --git a/app/code/Magento/Catalog/view/frontend/web/js/zoom.js b/app/code/Magento/Catalog/view/frontend/web/js/zoom.js
@@ -92,7 +92,7 @@ define([
             }, this));
 
             // Window resize will change offset for draggable
-            $(window).resize(this._draggableImage());
+            $(window).on('resize', this._draggableImage);
         },
 
         /**

diff --git a/app/code/Magento/Checkout/view/frontend/web/js/model/full-screen-loader.js b/app/code/Magento/Checkout/view/frontend/web/js/model/full-screen-loader.js
@@ -27,7 +27,7 @@ define([
          */
         stopLoader: function (forceStop) {
             var $elem = $(containerId),
-                stop = $elem.trigger.bind($elem, 'processStop');
+                stop = $elem.trigger.bind($elem, 'processStop'); //eslint-disable-line jquery-no-bind-unbind
 
             forceStop ? stop() : resolver(stop);
         }

diff --git a/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js b/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js
@@ -354,7 +354,7 @@ define([
             }
 
             if (!emailValidationResult) {
-                $(loginFormSelector + ' input[name=username]').focus();
+                $(loginFormSelector + ' input[name=username]').trigger('focus');
 
                 return false;
             }

diff --git a/app/code/Magento/GiftMessage/view/frontend/web/js/gift-options.js b/app/code/Magento/GiftMessage/view/frontend/web/js/gift-options.js
@@ -48,7 +48,7 @@ define([
                 container.show()
                     .find('.giftmessage-area:not(:visible)').each(function (x, element) {
                         if ($(element).val().length > 0) {
-                            $(element).change();
+                            $(element).trigger('change');
                             container.find('a').click();
                         }
                     });

diff --git a/...code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/insertImageAction.js b/...code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/insertImageAction.js
@@ -49,7 +49,7 @@ define([
                 if (targetElement.is('textarea')) {
                     this.insertAtCursor(targetElement.get(0), data.content);
                     targetElement.focus();
-                    $(targetElement).change();
+                    $(targetElement).trigger('change');
                 } else {
                     targetElement.val(data.content)
                         .data('size', data.size)

diff --git a/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js b/app/code/Magento/ProductVideo/view/frontend/web/js/fotorama-add-video-events.js
@@ -812,7 +812,7 @@ define([
 
                 if (self.isFullscreen && !self.fotoramaItem.data('fotorama').options.fullscreen.arrows) {
                     if ($('.' + self.FTAR + '--prev').is(':focus') || $('.' + self.FTAR + '--next').is(':focus')) {
-                        $(self.FTCF).focus();
+                        $(self.FTCF).trigger('focus');
                     }
                 }
             });

diff --git a/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js b/app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js
@@ -55,7 +55,7 @@ define([
             });
 
             if (firstSwatch.length) {
-                $(firstSwatch).focus();
+                $(firstSwatch).trigger('focus');
             }
         }
     });

diff --git a/app/code/Magento/Ui/view/base/web/js/grid/resize.js b/app/code/Magento/Ui/view/base/web/js/grid/resize.js
@@ -92,7 +92,7 @@ define([
             if ($(table).is(this.mainTableSelector)) {
                 this.table = table;
                 this.tableWidth = $(table).outerWidth();
-                $(window).resize(this.checkAfterResize);
+                $(window).on('resize', this.checkAfterResize);
             }
 
             //TODO - Must be deleted when Firefox fixed problem with table-layout: fixed
@@ -244,7 +244,7 @@ define([
 
             setTimeout(function () {
                 if (self.layoutFixedPolyfillIterator < 20) {
-                    $(window).resize();
+                    $(window).trigger('resize');
                     self.layoutFixedPolyfillIterator++;
                     self._layoutFixedPolyfill();
                 } else {

diff --git a/app/code/Magento/Ui/view/base/web/js/grid/sticky/sticky.js b/app/code/Magento/Ui/view/base/web/js/grid/sticky/sticky.js
@@ -220,7 +220,7 @@ define([
          * @returns {Object} Chainable.
          */
         initOnListingScroll: function () {
-            $(this.listingNode).scroll(function (e) {
+            $(this.listingNode).on('scroll', function (e) {
                 this.flags.listingScrolled = true;
                 this.flags.listingScrolledValue = $(e.target).scrollLeft();
             }.bind(this));
@@ -234,7 +234,7 @@ define([
          * @returns {Object} Chainable.
          */
         initOnResize: function () {
-            $(window).resize(function () {
+            $(window).on('resize', function () {
                 this.flags.resized = true;
             }.bind(this));
 

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal.js b/app/code/Magento/Ui/view/base/web/js/modal/modal.js
@@ -260,15 +260,15 @@ define([
                 infelicity;
 
             if (type === 'opened' && this.options.focus) {
-                this.modal.find($(this.options.focus)).focus();
+                this.modal.find($(this.options.focus)).trigger('focus');
             } else if (type === 'opened' && !this.options.focus) {
-                this.modal.find(this.options.focusableScope).focus();
+                this.modal.find(this.options.focusableScope).trigger('focus');
             } else if (position === 'end') {
-                this.modal.find(this.options.modalCloseBtn).focus();
+                this.modal.find(this.options.modalCloseBtn).trigger('focus');
             } else if (position === 'start') {
                 infelicity = 2; //Constant for find last focusable element
                 focusableElements = this.modal.find(':focusable');
-                focusableElements.eq(focusableElements.length - infelicity).focus();
+                focusableElements.eq(focusableElements.length - infelicity).trigger('focus');
             }
         },
 
@@ -331,7 +331,7 @@ define([
         _close: function () {
             var trigger = _.bind(this._trigger, this, 'closed', this.modal);
 
-            $(this.focussedElement).focus();
+            $(this.focussedElement).trigger('focus');
             this._destroyOverlay();
             this._unsetActive();
             _.defer(trigger, this);

diff --git a/app/design/adminhtml/Magento/backend/web/js/theme.js b/app/design/adminhtml/Magento/backend/web/js/theme.js
@@ -224,7 +224,7 @@ define('globalNavigation', [
 
             if (e.which === 13) {
                 this._close(e);
-                $(selectors.topLevelHref, menuItem).focus();
+                $(selectors.topLevelHref, menuItem).trigger('focus');
             }
         },
 

diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/Checkout/frontend/js/region-updater.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/Checkout/frontend/js/region-updater.test.js
@@ -159,15 +159,15 @@ define([
         });
         it('Check that region list is not displayed when selected country has no predefined regions', function () {
             init();
-            $(countryEl).val('GB').change();
+            $(countryEl).val('GB').trigger('change');
             expect($(regionInputEl).is(':visible')).toBe(true);
             expect($(regionInputEl).is(':disabled')).toBe(false);
             expect($(regionSelectEl).is(':visible')).toBe(false);
             expect($(regionSelectEl).is(':disabled')).toBe(true);
         });
         it('Check country that has predefined and optional regions', function () {
             init();
-            $(countryEl).val('DE').change();
+            $(countryEl).val('DE').trigger('change');
             expect($(regionSelectEl).is(':visible')).toBe(true);
             expect($(regionSelectEl).is(':disabled')).toBe(false);
             expect($(regionSelectEl).hasClass('required-entry')).toBe(false);
@@ -182,7 +182,7 @@ define([
         });
         it('Check country that has predefined and required regions', function () {
             init();
-            $(countryEl).val('US').change();
+            $(countryEl).val('US').trigger('change');
             expect($(regionSelectEl).is(':visible')).toBe(true);
             expect($(regionSelectEl).is(':disabled')).toBe(false);
             expect($(regionSelectEl).hasClass('required-entry')).toBe(true);
@@ -199,7 +199,7 @@ define([
             init({
                 optionalRegionAllowed: false
             });
-            $(countryEl).val('DE').change();
+            $(countryEl).val('DE').trigger('change');
             expect($(regionSelectEl).is(':visible')).toBe(false);
             expect($(regionInputEl).is(':visible')).toBe(false);
         });
@@ -226,7 +226,7 @@ define([
             $(countryEl).val('GB');
             $(regionInputEl).val('Liverpool');
             init();
-            $(countryEl).val('IT').change();
+            $(countryEl).val('IT').trigger('change');
             expect($(countryEl).val()).toBe('IT');
             expect($(regionInputEl).val()).toBe('');
         });
@@ -235,7 +235,7 @@ define([
             init({
                 defaultRegion: '2'
             });
-            $(countryEl).val('DE').change();
+            $(countryEl).val('DE').trigger('change');
             expect($(countryEl).val()).toBe('DE');
             expect($(regionSelectEl).val()).toBe('');
         });

diff --git a/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js b/dev/tests/js/jasmine/tests/app/code/Magento/PageCache/frontend/js/page-cache.test.js
@@ -185,7 +185,9 @@ define([
                     patternPlaceholderClose: /^ \/BLOCK (.+) $/
                 }
             };
+            // eslint-disable-next-line jquery-no-bind-unbind
             replacer = $.mage.pageCache.prototype._replacePlaceholder.bind(context);
+            // eslint-disable-next-line jquery-no-bind-unbind
             searcher = $.mage.pageCache.prototype._searchPlaceholders.bind(context);
 
             wdContainer
@@ -208,7 +210,9 @@ define([
                     patternPlaceholderClose: /^ \/BLOCK (.+) $/
                 }
             };
+            // eslint-disable-next-line jquery-no-bind-unbind
             replacer = $.mage.pageCache.prototype._replacePlaceholder.bind(context);
+            // eslint-disable-next-line jquery-no-bind-unbind
             searcher = $.mage.pageCache.prototype._searchPlaceholders.bind(context);
 
             wdContainer

diff --git a/dev/tests/js/jasmine/tests/lib/mage/backend/bootstrap.test.js b/dev/tests/js/jasmine/tests/lib/mage/backend/bootstrap.test.js
@@ -25,6 +25,7 @@ define([
                 $pageMainActions.appendTo('body');
                 $('body').notification();
 
+                // eslint-disable-next-line jquery-no-event-shorthand
                 $.ajaxSettings.error();
 
                 expect($('.message-error').length).toBe(1);

diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc
@@ -1,6 +1,7 @@
 {
     "extends": [
     	"./.eslintrc-reset",
-    	"./.eslintrc-magento"
+    	"./.eslintrc-magento",
+    	"./.eslintrc-jquery"
     ]
-}
+}
diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-jquery b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-jquery
@@ -0,0 +1,11 @@
+{
+    "rules": {
+        "jquery-no-andSelf": 2,
+        "jquery-no-bind-unbind": 2,
+        "jquery-no-click-event-shorthand": 2,
+        "jquery-no-delegate-undelegate": 2,
+        "jquery-no-event-shorthand": 2,
+        "jquery-no-size": 2,
+        "jquery-no-trim": 2
+    }
+}
diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-reset b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/.eslintrc-reset
@@ -1,22 +1,24 @@
 {
   // http://eslint.org/docs/rules/
 
-  "ecmaFeatures": {
-    "binaryLiterals": false,                    // enable binary literals
-    "blockBindings": false,                     // enable let and const (aka block bindings)
-    "defaultParams": false,                     // enable default function parameters
-    "forOf": false,                             // enable for-of loops
-    "generators": false,                        // enable generators
-    "objectLiteralComputedProperties": false,   // enable computed object literal property names
-    "objectLiteralDuplicateProperties": false,  // enable duplicate object literal properties in strict mode
-    "objectLiteralShorthandMethods": false,     // enable object literal shorthand methods
-    "objectLiteralShorthandProperties": false,  // enable object literal shorthand properties
-    "octalLiterals": false,                     // enable octal literals
-    "regexUFlag": false,                        // enable the regular expression u flag
-    "regexYFlag": false,                        // enable the regular expression y flag
-    "templateStrings": false,                   // enable template strings
-    "unicodeCodePointEscapes": false,           // enable code point escapes
-    "jsx": false                                // enable JSX
+  "parserOptions": {
+    "ecmaFeatures": {
+      "binaryLiterals": false,                    // enable binary literals
+      "blockBindings": false,                     // enable let and const (aka block bindings)
+      "defaultParams": false,                     // enable default function parameters
+      "forOf": false,                             // enable for-of loops
+      "generators": false,                        // enable generators
+      "objectLiteralComputedProperties": false,   // enable computed object literal property names
+      "objectLiteralDuplicateProperties": false,  // enable duplicate object literal properties in strict mode
+      "objectLiteralShorthandMethods": false,     // enable object literal shorthand methods
+      "objectLiteralShorthandProperties": false,  // enable object literal shorthand properties
+      "octalLiterals": false,                     // enable octal literals
+      "regexUFlag": false,                        // enable the regular expression u flag
+      "regexYFlag": false,                        // enable the regular expression y flag
+      "templateStrings": false,                   // enable template strings
+      "unicodeCodePointEscapes": false,           // enable code point escapes
+      "jsx": false                                // enable JSX
+    },
   },
 
   "env": {
@@ -214,4 +216,4 @@
     "no-bitwise": 0,      // disallow use of bitwise operators (off by default)
     "no-plusplus": 0      // disallow use of unary operators, ++ and -- (off by default)
   }
-}
+}
diff --git a/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/rules/jquery/jquery-no-andSelf.js b/dev/tests/static/testsuite/Magento/Test/Js/_files/eslint/rules/jquery/jquery-no-andSelf.js
@@ -0,0 +1,26 @@
+'use strict'
+
+const utils = require('./utils.js')
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: []
+  },
+
+  create: function(context) {
+    return {
+      CallExpression: function(node) {
+        if (node.callee.type !== 'MemberExpression') return
+        if (node.callee.property.name !== 'andSelf') return
+
+        if (utils.isjQuery(node)) {
+          context.report({
+            node: node,
+            message: 'jQuery.andSelf() removed, use jQuery.addBack()'
+          })
+        }
+      }
+    }
+  }
+}
diff --git a/...ests/static/testsuite/Magento/Test/Js/_files/eslint/rules/jquery/jquery-no-bind-unbind.js b/...ests/static/testsuite/Magento/Test/Js/_files/eslint/rules/jquery/jquery-no-bind-unbind.js
@@ -0,0 +1,26 @@
+'use strict'
+
+const utils = require('./utils.js')
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: []
+  },
+
+  create: function(context) {
+    return {
+      CallExpression: function(node) {
+        if (node.callee.type !== 'MemberExpression') return
+        if (!['bind', 'unbind'].includes(node.callee.property.name)) return
+
+        if (utils.isjQuery(node)) {
+          context.report({
+            node: node,
+            message: 'jQuery $.bind and $.unbind are deprecated, use $.on and $.off instead'
+          })
+        }
+      }
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ define([ @@
                 });
                 if (firstSwatch.length) {
-                    $(firstSwatch).focus();
+                    $(firstSwatch).trigger('focus');
                 }
             }
         });
@@ Expand Down @@