MC-17489: Require specific suffix for HTML binding

Author: Oleksandr Gorkun

dev/tests/static/framework/Magento/Sniffs/Html/HtmlBindingSniff.php

@@ -9,6 +9,9 @@
 use PHP_CodeSniffer\Sniffs\Sniff;
 use PHP_CodeSniffer\Files\File;
 
+/**
+ * Sniffing improper HTML bindings.
+ */
 class HtmlBindingSniff implements Sniff
 {
     /**
@@ -30,6 +33,7 @@ public function process(File $phpcsFile, $stackPtr)
             $html = $phpcsFile->getTokensAsString($stackPtr, count($phpcsFile->getTokens()));
             $dom = new \DOMDocument();
             try {
+                //phpcs: ignore
                 @$dom->loadHTML($html);
                 $loaded = true;
             } catch (\Throwable $exception) {
@@ -41,13 +45,14 @@ public function process(File $phpcsFile, $stackPtr)
                 $dataBindAttributes = $domXpath->query('//@*[name() = "data-bind"]');
                 foreach ($dataBindAttributes as $dataBindAttribute) {
                     $knockoutBinding = $dataBindAttribute->nodeValue;
-                    preg_match('/^(.+\s+)*?html\:\s*?([a-z0-9\.\_\(\)]+)/i', $knockoutBinding, $htmlBinding);
+                    preg_match('/^(.+\s*?)?html\s*?\:\s*?([a-z0-9\.\(\)\_]+)/ims', $knockoutBinding, $htmlBinding);
                     if ($htmlBinding && !preg_match('/UnsanitizedHtml[\(\)]*?$/', $htmlBinding[2])) {
                         $phpcsFile->addError(
-                            'Variables/functions used for HTML binding must have UnsanitizedHtml suffix, '
+                            'Variables/functions used for HTML binding must have UnsanitizedHtml suffix'
+                            .' - "' .$htmlBinding[2] .'" doesn\'t,' .PHP_EOL
                             .'consider using text binding if the value is supposed to be text',
                             null,
-                            'UIComponentTemplate.HtmlSuffix'
+                            'UIComponentTemplate.KnockoutBinding.HtmlSuffix'
                         );
                     }
                 }

dev/tests/static/framework/tests/unit/testsuite/Magento/Sniffs/Html/HtmlBindingSniffTest.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Magento\Sniffs\Less;
+
+use Magento\TestFramework\CodingStandard\Tool\CodeSniffer\HtmlWrapper;
+use PHPUnit\Framework\TestCase;
+use Magento\TestFramework\CodingStandard\Tool\CodeSniffer;
+
+/**
+ * Test the html binding sniff on real files.
+ */
+class HtmlBindingSniffTest extends TestCase
+{
+    /**
+     * Files to sniff and expected reports.
+     *
+     * @return array
+     */
+    public function processDataProvider(): array
+    {
+        return [
+            [
+                'test-html-binding.html',
+                'test-html-binding-errors.txt'
+            ]
+        ];
+    }
+
+    /**
+     * Run CS on provided files.
+     *
+     * @param string $fileUnderTest
+     * @param string $expectedReportFile
+     * @return void
+     * @dataProvider processDataProvider
+     */
+    public function testProcess(string $fileUnderTest, string $expectedReportFile): void
+    {
+        $reportFile = __DIR__ . DIRECTORY_SEPARATOR . '_files' . DIRECTORY_SEPARATOR . 'phpcs_report.txt';
+        $ruleSetDir = __DIR__ . DIRECTORY_SEPARATOR . '_files';
+        $wrapper = new HtmlWrapper();
+        $codeSniffer = new CodeSniffer($ruleSetDir, $reportFile, $wrapper);
+        $codeSniffer->setExtensions([HtmlWrapper::FILE_EXTENSION]);
+        $result = $codeSniffer->run(
+            [__DIR__ . DIRECTORY_SEPARATOR . '_files' . DIRECTORY_SEPARATOR . $fileUnderTest]
+        );
+        // Remove the absolute path to the file from the output
+        $actual = preg_replace('/^.+\n/', '', ltrim(file_get_contents($reportFile)));
+        $expected = file_get_contents(
+            __DIR__ . DIRECTORY_SEPARATOR . '_files' . DIRECTORY_SEPARATOR . $expectedReportFile
+        );
+        unlink($reportFile);
+        $this->assertEquals(1, $result);
+        $this->assertEquals($expected, $actual);
+    }
+}

dev/tests/static/framework/tests/unit/testsuite/Magento/Sniffs/Html/_files/ruleset.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<ruleset name="Magento">
+    <description>UI Component Coding Standard</description>
+    <rule ref="Internal.NoCodeFound">
+        <severity>0</severity>
+    </rule>
+    <rule ref="../../../../../../../Magento/Sniffs/Html"/>
+</ruleset>

dev/tests/static/framework/tests/unit/testsuite/Magento/Sniffs/Html/_files/test-html-binding-errors.txt

@@ -0,0 +1,12 @@
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+FOUND 3 ERRORS AFFECTING 1 LINE
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+ 1 | ERROR | Variables/functions used for HTML binding must have UnsanitizedHtml suffix - "testError()" doesn't,
+   |       | consider using text binding if the value is supposed to be text
+ 1 | ERROR | Variables/functions used for HTML binding must have UnsanitizedHtml suffix - "test.getSomething().value.error()" doesn't,
+   |       | consider using text binding if the value is supposed to be text
+ 1 | ERROR | Variables/functions used for HTML binding must have UnsanitizedHtml suffix - "bind_stuff()" doesn't,
+   |       | consider using text binding if the value is supposed to be text
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+

dev/tests/static/framework/tests/unit/testsuite/Magento/Sniffs/Html/_files/test-html-binding.html

@@ -0,0 +1,18 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<div data-bind="attr: test.value"></div>
+<p>Test</p>
+<span data-bind="html: testError()"></span>
+<div data-bind="
+    attr : tst,
+    html: test.getSomething().value.error()
+"></div>
+<p data-bind="html: '<b>Some html</b>'"></p>
+<div data-bind="html: valueUnsanitizedHtml"></div>
+<div data-bind="attr: testhtml, html: valueUnsanitizedHtml()"></div>
+<p data-bind="other_html: bind, html: bind_stuff()"></p>