Skip to content

Style engine: rules and rules store unit tests #42446

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

Closed
ramonjd wants to merge 1 commit into from
Closed

Style engine: rules and rules store unit tests #42446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
96 changes: 96 additions & 0 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<?php
/**
* Tests the Style Engine CSS Rule class.
*
* @package Gutenberg
* @subpackage style-engine
*/

require __DIR__ . '/../class-wp-style-engine-css-rule.php';
require __DIR__ . '/../class-wp-style-engine-css-declarations.php';

/**
* Tests for registering, storing and generating CSS declarations.
*/
class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
/**
* Should set declarations on instantiation.
*/
public function test_instantiate_with_selector_and_rules() {
$selector = '.law-and-order';
$input_declarations = array(
'margin-top' => '10px',
'font-size' => '2rem',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );

$this->assertSame( $selector, $css_rule->get_selector() );

$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Test dedupe declaration properties.
*/
public function test_dedupe_properties_in_rules() {
$selector = '.taggart';
$first_declaration = array(
'font-size' => '2rem',
);
$overwrite_first_declaration = array(
'font-size' => '4px',
);
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
$css_rule->set_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );

$expected = '.taggart {font-size: 4px;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Should set selector and rules on instantiation.
*/
public function test_set_declarations() {
// Declarations using a WP_Style_Engine_CSS_Declarations object.
$some_css_declarations = new WP_Style_Engine_CSS_Declarations( array( 'margin-top' => '10px' ) );
// Declarations using a property => value array.
$some_more_css_declarations = array( 'font-size' => '1rem' );
$css_rule = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
$css_rule->set_declarations( $some_more_css_declarations );

$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Should set selector and rules on instantiation.
*/
public function test_set_selector() {
$selector = '.taggart';
$css_rule = new WP_Style_Engine_CSS_Rule( $selector );

$this->assertSame( $selector, $css_rule->get_selector() );

$css_rule->set_selector( '.law-and-order' );

$this->assertSame( '.law-and-order', $css_rule->get_selector() );
}

/**
* Should set selector and rules on instantiation.
*/
public function test_get_css() {
$selector = '.chips';
$input_declarations = array(
'margin-top' => '10px',
'font-size' => '2rem',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";

$this->assertSame( $expected, $css_rule->get_css() );
}
}
115 changes: 115 additions & 0 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<?php
/**
* Tests the Style Engine CSS Rules Store class.
*
* @package Gutenberg
* @subpackage style-engine
*/

require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
require __DIR__ . '/../class-wp-style-engine-css-rule.php';
require __DIR__ . '/../class-wp-style-engine-css-declarations.php';

/**
* Tests for registering, storing and retrieving CSS Rules.
*/
class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
/**
* Should create a new store.
*/
public function test_create_new_store() {
$new_pancakes_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
}

/**
* Should return previously created store when the same selector key is passed.
*/
public function test_get_store() {
$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
$selector = '.haddock';

$new_fish_store->get_rule( $selector )->get_selector();
$this->assertEquals( $selector, $new_fish_store->get_rule( $selector )->get_selector() );

$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
$this->assertEquals( $selector, $the_same_fish_store->get_rule( $selector )->get_selector() );
}

/**
* Should return a stored rule.
*/
public function test_get_rule() {
$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
$selector = '.wp-block-sauce a:hover';
$store_rule = $new_pie_store->get_rule( $selector );
$expected = "$selector {}";
$this->assertEquals( $expected, $store_rule->get_css() );

$pie_declarations = array(
'color' => 'brown',
'border-color' => 'yellow',
'border-radius' => '10rem',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $pie_declarations );
$store_rule->set_declarations( $css_declarations );

$store_rule = $new_pie_store->get_rule( $selector );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$this->assertEquals( $expected, $store_rule->get_css() );
}

/**
* Should return all stored rules.
*/
public function test_get_all_rules() {
$new_pizza_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pizza-with-mozzarella' );
$selector = '.wp-block-anchovies a:hover';
$store_rule = $new_pizza_store->get_rule( $selector );
$expected = array(
$selector => $store_rule,
);

$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );

$pizza_declarations = array(
'color' => 'red',
'border-color' => 'yellow',
'border-radius' => '10rem',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $pizza_declarations );
$store_rule->set_declarations( array( $css_declarations ) );

$expected = array(
$selector => $store_rule,
);
$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );

$new_pizza_declarations = array(
'color' => 'red',
'border-color' => 'red',
'font-size' => '10rem',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $new_pizza_declarations );
$store_rule->set_declarations( array( $css_declarations ) );

$expected = array(
$selector => $store_rule,
);
$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );

$new_selector = '.wp-block-mushroom a:hover';
$newer_pizza_declarations = array(
'padding' => '100px',
);
$new_store_rule = $new_pizza_store->get_rule( $new_selector );
$css_declarations = new WP_Style_Engine_CSS_Declarations( $newer_pizza_declarations );
$new_store_rule->set_declarations( array( $css_declarations ) );

$expected = array(
$selector => $store_rule,
$new_selector => $new_store_rule,
);
$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
}
}