AC-1156: Move custom eslint tests to magento-coding-standard repo

.github/workflows/php.yml

@@ -25,6 +25,9 @@ jobs:
     name: Tests with PHP ${{ matrix.php-version }} and ${{ matrix.dependencies }} dependencies
 
     steps:
+    - name: Setup node
+      uses: actions/setup-node@v2
+
     - uses: actions/checkout@v2
 
     - name: Setup PHP
@@ -34,6 +37,11 @@ jobs:
       env:
         COMPOSER_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+    - name: Install dependencies
+      run: npm install
+    - name: Run ESLint
+      run: npm run eslint -- eslint/rules
+
     - name: Validate composer
       run: composer validate
 

.gitignore

@@ -1,5 +1,6 @@
 /vendor/*
 /bin/*
+/node_modules
 
 # IDE files
 .idea/

Magento2/Tests/Eslint/AbstractEslintTestCase.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+use PHPUnit\Framework\TestCase;
+
+/**
+ * Abstract class AbstractEslintTestCase
+ *
+ * Test Eslint Rules (magento-coding-standard/eslint/rules)
+ */
+abstract class AbstractEslintTestCase extends TestCase
+{
+    /**
+     * @param string $testFile
+     * @param array $expectedMessages
+     */
+    protected function assertFileContainsError(string $testFile, array $expectedMessages): void
+    {
+        exec(
+            'npm run eslint -- Magento2/Tests/Eslint/' . $testFile,
+            $output
+        );
+
+        foreach ($expectedMessages as $message) {
+            $this->assertStringContainsString($message, implode(' ',$output));
+        }
+    }
+}

Magento2/Tests/Eslint/AndSelfTest.js

@@ -0,0 +1,4 @@
+$(document).ready(function() {
+    'use strict';
+    $("div").find("p").andSelf().addClass("border");
+});

Magento2/Tests/Eslint/AndSelfTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class AndSelfTest
+ *
+ * Test Eslint Rule: jquery-no-andSelf.js
+ */
+class AndSelfTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'AndSelfTest.js',
+            ['jQuery.andSelf() removed, use jQuery.addBack()']
+        );
+    }
+}

Magento2/Tests/Eslint/BindUnbindTest.js

@@ -0,0 +1,4 @@
+$(document).ready(function(){
+    'use strict';
+    $(".btn1").bind("click");
+});

Magento2/Tests/Eslint/BindUnbindTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class BindUnbindTest
+ *
+ * Test Eslint Rule: jquery-no-bind-unbind.js
+ */
+class BindUnbindTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'BindUnbindTest.js',
+            ['jQuery $.bind and $.unbind are deprecated, use $.on and $.off instead']
+        );
+    }
+}

Magento2/Tests/Eslint/ClickEventShorthand.js

@@ -0,0 +1,4 @@
+$(document).ready(function(){
+    'use strict';
+    $("input").blur();
+});

Magento2/Tests/Eslint/ClickEventShorthandTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class ClickEventShorthandTest
+ *
+ * Test Eslint Rule: jquery-no-click-event-shorthand.js
+ */
+class ClickEventShorthandTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'ClickEventShorthand.js',
+            ['Instead of .blur(fn) use .on("blur", fn). Instead of .blur() use .trigger("blur")']
+        );
+    }
+}

Magento2/Tests/Eslint/DelegateUndelegateTest.js

@@ -0,0 +1,6 @@
+$(document).ready(function(){
+    'use strict';
+    $( "table" ).delegate( "td", "click", function() {
+        $( this ).toggleClass( "chosen" );
+    });
+});

Magento2/Tests/Eslint/DelegateUndelegateTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class DelegateUndelegateTest
+ *
+ * Test Eslint Rule: jquery-no-delegate-undelegate.js
+ */
+class DelegateUndelegateTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'DelegateUndelegateTest.js',
+            ['jQuery $.delegate and $.undelegate are deprecated, use $.on and $.off instead']
+        );
+    }
+}

Magento2/Tests/Eslint/EventShorthandTest.js

@@ -0,0 +1,4 @@
+$(document).ready(function(){
+    'use strict';
+    $( "#result" ).load( "ajax/test.html" );
+});

Magento2/Tests/Eslint/EventShorthandTest.php

@@ -0,0 +1,24 @@
+<?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 EventShorthandTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'EventShorthandTest.js',
+            ['jQuery.load() was removed, use .on("load", fn) instead']
+        );
+    }
+}

Magento2/Tests/Eslint/SizeTest.js

@@ -0,0 +1,4 @@
+$(document).ready(function(){
+    'use strict';
+    $("div").size();
+});

Magento2/Tests/Eslint/SizeTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class SizeTest
+ *
+ * Test Eslint Rule: jquery-no-size.js
+ */
+class SizeTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'SizeTest.js',
+            ['jQuery.size() removed, use jQuery.length']
+        );
+    }
+}

Magento2/Tests/Eslint/TrimTest.js

@@ -0,0 +1,4 @@
+$(document).ready(function(){
+    'use strict';
+    $.trim("    hello, how are you?    ");
+});

Magento2/Tests/Eslint/TrimTest.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+declare(strict_types=1);
+
+namespace Magento2\Tests\Eslint;
+
+/**
+ * Class TrimTest
+ *
+ * Test Eslint Rule: jquery-no-trim.js
+ */
+class TrimTest extends AbstractEslintTestCase
+{
+    public function testExecute(): void
+    {
+        $this->assertFileContainsError(
+            'TrimTest.js',
+            ['jQuery.trim is deprecated; use String.prototype.trim']
+        );
+    }
+}

README.md

@@ -99,6 +99,18 @@ Also, verify that the sniffer code itself is written according to the Magento Co
 vendor/bin/phpcs --standard=Magento2 Magento2/ --extensions=php
 ```
 
+### ESLint testing
+Prerequisites: [Node.js](https://nodejs.org/) (`^12.22.0`, `^14.17.0`, or `>=16.0.0`).
+
+You need to run the following command to install all the necessary packages described in the `package.json` file:
+```bash
+npm install
+```
+
+After that, you can just execute ESLint as follows:
+```bash
+npm run eslint -- path/to/analyze
+```
 ## License
 
 Each Magento source file included in this distribution is licensed under the OSL-3.0 license.

eslint/.eslintrc

@@ -0,0 +1,8 @@
+{
+    "extends": [
+    	"./.eslintrc-reset",
+    	"./.eslintrc-magento",
+    	"./.eslintrc-jquery",
+    	"./.eslintrc-misc"
+    ]
+}

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
+    }
+}