Changeset 57649 for trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

Timestamp:

02/17/2024 03:26:43 PM (10 months ago)

Author:

swissspidy

Message:

Interactivity API: Skip instead of bail out if HTML contains SVG or MATH.

Addresses an issue with server-side processing of directives when there is e.g. an SVG icon a navigation menu.

Props cbravobernal, westonruter, dmsnell, swissspidy.
Fixes #60517.

File:

• trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php (modified) (2 diffs)

trunk/tests/phpunit/tests/interactivity-api/wpInteractivityAPI.php

@@ -12 +12 @@
  * @coversDefaultClass WP_Interactivity_API
  */
-class Tests_WP_Interactivity_API extends WP_UnitTestCase {
+class Tests_Interactivity_API_WpInteractivityAPI extends WP_UnitTestCase {
     /**
      * Instance of WP_Interactivity_API.
@@ -509 +509 @@
 
     /**
-     * Tests that the `process_directives` returns the same HTML if it finds an
-     * SVG tag.
-     *
-     * @ticket 60356
-     *
-     * @covers ::process_directives
-     */
-    public function test_process_directives_doesnt_change_html_if_contains_svgs() {
-        $this->interactivity->state( 'myPlugin', array( 'id' => 'some-id' ) );
+     * Tests that the `process_directives` process the HTML outside a SVG tag.
+     *
+     * @ticket 60517
+     *
+     * @covers ::process_directives
+     */
+    public function test_process_directives_changes_html_if_contains_svgs() {
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'id'    => 'some-id',
+                'width' => '100',
+            )
+        );
         $html           = '
-            <div data-wp-bind--id="myPlugin::state.id">
-                <svg height="100" width="100">
+            <header>
+                <svg height="100" data-wp-bind--width="myPlugin::state.width">
+                    <title>Red Circle</title>
                     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-                </svg> 
-            </div>
+                </svg>
+                <div data-wp-bind--id="myPlugin::state.id"></div>
+                <div data-wp-bind--id="myPlugin::state.width"></div>
+            </header>
         ';
         $processed_html = $this->interactivity->process_directives( $html );
         $p              = new WP_HTML_Tag_Processor( $processed_html );
-        $p->next_tag();
+        $p->next_tag( 'svg' );
+        $this->assertNull( $p->get_attribute( 'width' ) );
+        $p->next_tag( 'div' );
+        $this->assertEquals( 'some-id', $p->get_attribute( 'id' ) );
+        $p->next_tag( 'div' );
+        $this->assertEquals( '100', $p->get_attribute( 'id' ) );
+    }
+
+    /**
+     * Tests that the `process_directives` does not process the HTML
+     * inside SVG tags.
+     *
+     * @ticket 60517
+     *
+     * @covers ::process_directives
+     */
+    public function test_process_directives_does_not_change_inner_html_in_svgs() {
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'id' => 'some-id',
+            )
+        );
+        $html           = '
+            <header>
+                <svg height="100">
+                    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+                    <g data-wp-bind--id="myPlugin::state.id" />
+                </svg>
+            </header>
+        ';
+        $processed_html = $this->interactivity->process_directives( $html );
+        $p              = new WP_HTML_Tag_Processor( $processed_html );
+        $p->next_tag( 'div' );
         $this->assertNull( $p->get_attribute( 'id' ) );
     }
 
     /**
-     * Tests that the `process_directives` returns the same HTML if it finds an
+     * Tests that the `process_directives` process the HTML outside the
      * MathML tag.
      *
-     * @ticket 60356
-     *
-     * @covers ::process_directives
-     */
-    public function test_process_directives_doesnt_change_html_if_contains_math() {
-        $this->interactivity->state( 'myPlugin', array( 'id' => 'some-id' ) );
+     * @ticket 60517
+     *
+     * @covers ::process_directives
+     */
+    public function test_process_directives_change_html_if_contains_math() {
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'id'   => 'some-id',
+                'math' => 'ml-id',
+            )
+        );
         $html           = '
-            <div data-wp-bind--id="myPlugin::state.id">
-                <math>
+            <header>
+                <math data-wp-bind--id="myPlugin::state.math">
                     <mi>x</mi>
                     <mo>=</mo>
                     <mi>1</mi>
                 </math>
-            </div>
+                <div data-wp-bind--id="myPlugin::state.id"></div>
+            </header>
         ';
         $processed_html = $this->interactivity->process_directives( $html );
         $p              = new WP_HTML_Tag_Processor( $processed_html );
-        $p->next_tag();
+        $p->next_tag( 'math' );
+        $this->assertNull( $p->get_attribute( 'id' ) );
+        $p->next_tag( 'div' );
+        $this->assertEquals( 'some-id', $p->get_attribute( 'id' ) );
+    }
+
+    /**
+     * Tests that the `process_directives` does not process the HTML
+     * inside MathML tags.
+     *
+     * @ticket 60517
+     *
+     * @covers ::process_directives
+     */
+    public function test_process_directives_does_not_change_inner_html_in_math() {
+        $this->interactivity->state(
+            'myPlugin',
+            array(
+                'id' => 'some-id',
+            )
+        );
+        $html           = '
+            <header>
+                <math data-wp-bind--id="myPlugin::state.math">
+                    <mrow data-wp-bind--id="myPlugin::state.id" />
+                    <mi>x</mi>
+                    <mo>=</mo>
+                    <mi>1</mi>
+                </math>
+            </header>
+        ';
+        $processed_html = $this->interactivity->process_directives( $html );
+        $p              = new WP_HTML_Tag_Processor( $processed_html );
+        $p->next_tag( 'div' );
         $this->assertNull( $p->get_attribute( 'id' ) );
     }