Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Elements: Add unit tests for class and style generation #55113

Merged
merged 3 commits into from
Oct 6, 2023
Merged

Elements: Add unit tests for class and style generation #55113

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b7b09e
Elements: Add unit tests for style generation
aaronrobertshaw Oct 6, 2023
f1422a9
Improve coverage for application of elements classname
aaronrobertshaw Oct 6, 2023
d790e3d
Update phpunit/block-supports/elements-test.php
aaronrobertshaw Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
305 changes: 305 additions & 0 deletions phpunit/block-supports/elements-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,305 @@
<?php

/**
* Test the elements block support.
*
* @package Gutenberg
*/

class WP_Block_Supports_Elements_Test extends WP_UnitTestCase {
/**
* @var string|null
*/
private $test_block_name;

public function set_up() {
parent::set_up();
$this->test_block_name = null;
}

public function tear_down() {
WP_Style_Engine_CSS_Rules_Store_Gutenberg::remove_all_stores();
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
parent::tear_down();
}

/**
* Registers a test block type with the provided color block supports.
*
* @param array $color_settings The color block support settings used for elements.
*/
public function register_block_with_color_settings( $color_settings ) {
$this->test_block_name = 'test/element-block-supports';

register_block_type(
$this->test_block_name,
array(
'api_version' => 3,
'attributes' => array(
'style' => array(
'type' => 'object',
),
),
'supports' => array(
'color' => $color_settings,
),
)
);
}

/**
* Tests that elements block support applies the correct classname.
*
* @covers ::gutenberg_render_elements_support
*
* @dataProvider data_elements_block_support_class
*
* @param array $color_settings The color block support settings used for elements support.
* @param array $elements_styles The elements styles within the block attributes.
* @param string $block_markup Original block markup.
* @param string $expected_markup Resulting markup after application of elements block support.
*/
public function test_elements_block_support_class( $color_settings, $elements_styles, $block_markup, $expected_markup ) {
$this->register_block_with_color_settings( $color_settings );

$block = array(
'blockName' => $this->test_block_name,
'attrs' => array(
'style' => array(
'elements' => $elements_styles,
),
),
);

$actual = gutenberg_render_elements_support( $block_markup, $block );

$this->assertMatchesRegularExpression(
$expected_markup,
$actual,
'Elements block wrapper markup should be correct'
);
}

/**
* Data provider.
*
* @return array
*/
public function data_elements_block_support_class() {
$color_styles = array(
'text' => 'var:preset|color|vivid-red',
'background' => '#fff',
);

return array(
'button element styles with serialization skipped' => array(
'color_settings' => array(
'button' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'button' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'link element styles with serialization skipped' => array(
'color_settings' => array(
'link' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'heading element styles with serialization skipped' => array(
'color_settings' => array(
'heading' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p>Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'button element styles apply class to wrapper' => array(
'color_settings' => array( 'button' => true ),
'elements_styles' => array(
'button' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'link element styles apply class to wrapper' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'heading element styles apply class to wrapper' => array(
'color_settings' => array( 'heading' => true ),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
),
'block_markup' => '<p>Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other classes' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p class="has-dark-gray-background-color has-background">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="has-dark-gray-background-color has-background wp-elements-[a-f0-9]{32}">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
'element styles apply class to wrapper when it has other attributes' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array( 'color' => $color_styles ),
),
'block_markup' => '<p id="anchor">Hello <a href="http://www.wordpress.org/">WordPress</a>!</p>',
'expected_markup' => '/^<p class="wp-elements-[a-f0-9]{32}" id="anchor">Hello <a href="http:\/\/www.wordpress.org\/">WordPress<\/a>!<\/p>$/',
),
);
}

/**
* Tests that elements block support generates appropriate styles.
*
* @covers ::gutenberg_render_elements_support_styles
*
* @dataProvider data_elements_block_support_styles
*
* @param mixed $color_settings The color block support settings used for elements support.
* @param mixed $elements_styles The elements styles within the block attributes.
* @param string $expected_styles Expected styles enqueued by the style engine.
*/
public function test_elements_block_support_styles( $color_settings, $elements_styles, $expected_styles ) {
$this->register_block_with_color_settings( $color_settings );

$block = array(
'blockName' => $this->test_block_name,
'attrs' => array(
'style' => array(
'elements' => $elements_styles,
),
),
);

gutenberg_render_elements_support_styles( null, $block );
$actual_stylesheet = gutenberg_style_engine_get_stylesheet_from_context( 'block-supports' );

$this->assertMatchesRegularExpression(
$expected_styles,
$actual_stylesheet,
'Elements style rules output should be correct'
);
}

/**
* Data provider.
*
* @return array
*/
public function data_elements_block_support_styles() {
$color_styles = array(
'text' => 'var:preset|color|vivid-red',
'background' => '#fff',
);
$color_css_rules = preg_quote( '{color:var(--wp--preset--color--vivid-red);background-color:#fff;}' );

return array(
'button element styles are not applied if serialization is skipped' => array(
'color_settings' => array(
'button' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'button' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^$/',
),
'link element styles are not applied if serialization is skipped' => array(
'color_settings' => array(
'link' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'link' => array(
'color' => $color_styles,
':hover' => array(
'color' => $color_styles,
),
),
),
'expected_styles' => '/^$/',
),
'heading element styles are not applied if serialization is skipped' => array(
'color_settings' => array(
'heading' => true,
'__experimentalSkipSerialization' => true,
),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
'h1' => array( 'color' => $color_styles ),
'h2' => array( 'color' => $color_styles ),
'h3' => array( 'color' => $color_styles ),
'h4' => array( 'color' => $color_styles ),
'h5' => array( 'color' => $color_styles ),
'h6' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^$/',
),
'button element styles are applied' => array(
'color_settings' => array( 'button' => true ),
'elements_styles' => array(
'button' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} .wp-element-button, .wp-elements-[a-f0-9]{32} .wp-block-button__link' . $color_css_rules . '$/',
),
'link element styles are applied' => array(
'color_settings' => array( 'link' => true ),
'elements_styles' => array(
'link' => array(
'color' => $color_styles,
':hover' => array(
'color' => $color_styles,
),
),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} a' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} a:hover' . $color_css_rules . '$/',
),
'generic heading element styles are applied' => array(
'color_settings' => array( 'heading' => true ),
'elements_styles' => array(
'heading' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1, .wp-elements-[a-f0-9]{32} h2, .wp-elements-[a-f0-9]{32} h3, .wp-elements-[a-f0-9]{32} h4, .wp-elements-[a-f0-9]{32} h5, .wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
),
'individual heading element styles are applied' => array(
'color_settings' => array( 'heading' => true ),
'elements_styles' => array(
'h1' => array( 'color' => $color_styles ),
'h2' => array( 'color' => $color_styles ),
'h3' => array( 'color' => $color_styles ),
'h4' => array( 'color' => $color_styles ),
'h5' => array( 'color' => $color_styles ),
'h6' => array( 'color' => $color_styles ),
),
'expected_styles' => '/^.wp-elements-[a-f0-9]{32} h1' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h2' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h3' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h4' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h5' . $color_css_rules .
'.wp-elements-[a-f0-9]{32} h6' . $color_css_rules . '$/',
),
);
}
}
Loading