Changeset 57333 for trunk/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

01/23/2024 09:04:51 AM (9 months ago)

Author:

youknowriad

Message:

Editor: Update the ThemeJson unit test to cover custom CSS feature.

In #59499 a fix have been shipped to theme.json custom CSS
when applied to blocks with multiple CSS selectors.
This commit covers that fix with a unit test.

Props wildworks.
Fixes #60294.

File:

• trunk/tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -4689 +4689 @@
     public function data_process_blocks_custom_css() {
         return array(
-            // Simple CSS without any child selectors.
-            'no child selectors'                => array(
+            // Simple CSS without any nested selectors.
+            'no nested selectors'          => array(
                 'input'    => array(
                     'selector' => '.foo',
@@ -4697 +4697 @@
                 'expected' => '.foo{color: red; margin: auto;}',
             ),
-            // CSS with child selectors.
-            'with children'                     => array(
+            // CSS with nested selectors.
+            'with nested selector'         => array(
                 'input'    => array(
                     'selector' => '.foo',
-                    'css'      => 'color: red; margin: auto; & .bar{color: blue;}',
-                ),
-                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}',
-            ),
-            // CSS with child selectors and pseudo elements.
-            'with children and pseudo elements' => array(
+                    'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;}',
+                ),
+                'expected' => '.foo{color: red; margin: auto;}.foo.one{color: blue;}.foo .two{color: green;}',
+            ),
+            // CSS with pseudo elements.
+            'with pseudo elements'         => array(
                 'input'    => array(
                     'selector' => '.foo',
-                    'css'      => 'color: red; margin: auto; & .bar{color: blue;} &::before{color: green;}',
-                ),
-                'expected' => '.foo{color: red; margin: auto;}.foo .bar{color: blue;}.foo::before{color: green;}',
+                    'css'      => 'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+                ),
+                'expected' => '.foo{color: red; margin: auto;}.foo::before{color: blue;}.foo ::before{color: green;}.foo.one::before{color: yellow;}.foo .two::before{color: purple;}',
+            ),
+            // CSS with multiple root selectors.
+            'with multiple root selectors' => array(
+                'input'    => array(
+                    'selector' => '.foo, .bar',
+                    'css'      => 'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+                ),
+                'expected' => '.foo, .bar{color: red; margin: auto;}.foo.one, .bar.one{color: blue;}.foo .two, .bar .two{color: green;}.foo::before, .bar::before{color: yellow;}.foo ::before, .bar ::before{color: purple;}.foo.three::before, .bar.three::before{color: orange;}.foo .four::before, .bar .four::before{color: skyblue;}',
             ),
         );