Skip to content

Style engine: migrate functions, classes and tests #3199

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 16 commits into from
Closed

Style engine: migrate functions, classes and tests #3199

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
11a9aac
Initial commit:
ramonjd Sep 6, 2022
8d87cd1
Adding @covers annotations
ramonjd Sep 6, 2022
05b1903
Changes from https://github.com/WordPress/gutenberg/pull/43886
ramonjd Sep 6, 2022
d4fa390
Formatting PHP doc comments and params that describe associative arrays
ramonjd Sep 8, 2022
5543539
formatting
ramonjd Sep 8, 2022
f044bf4
Combining tests for get_declarations_string
ramonjd Sep 8, 2022
73288d1
Adding message parameter to assertions where more than one assertion …
ramonjd Sep 8, 2022
aa291de
Updating PHP docs
ramonjd Sep 8, 2022
cfcc425
Refactoring sanitization tests for CSS declarations
ramonjd Sep 8, 2022
4b2128e
Formatting styleEngine tests
ramonjd Sep 8, 2022
5da7cf4
My blod is typo
ramonjd Sep 8, 2022
d0de610
Imperative < active voice
ramonjd Sep 8, 2022
3d2f156
Remove Gutenberg suffix
ramonjd Sep 8, 2022
26cd739
renaming test group suite to kebab case
ramonjd Sep 9, 2022
57d81bc
Grammar, formatting, removing class_exists checks
ramonjd Sep 9, 2022
8e3266d
Removing @access private from Style Engine utility classes
ramonjd Sep 9, 2022
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
Prev Previous commit
Next Next commit
Adding message parameter to assertions where more than one assertion … 
…is used in a test method.
  • Loading branch information
@ramonjd
ramonjd committed Sep 9, 2022
commit 73288d19e3c62e9e6184e36977d12f5f17a4d65b
12 changes: 8 additions & 4 deletions tests/phpunit/tests/style-engine/wpStyleEngineCssDeclarations.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,13 +213,15 @@ public function test_should_remove_single_declaration() {

$this->assertSame(
'color:tomato;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
$css_declarations->get_declarations_string(),
'CSS declarations string does not match the values of `$declarations` passed to the constructor.'
);

$css_declarations->remove_declaration( 'color' );
$this->assertSame(
'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
$css_declarations->get_declarations_string(),
'Output after removing CSS declaration via `remove_declaration()` does not match expectations'
);
}

Expand All @@ -239,13 +241,15 @@ public function test_should_remove_multiple_declarations() {

$this->assertSame(
'color:cucumber;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
$css_declarations->get_declarations_string(),
'CSS declarations string does not match the values of `$declarations` passed to the constructor.'
);

$css_declarations->remove_declarations( array( 'color', 'margin' ) );
$this->assertSame(
'font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
$css_declarations->get_declarations_string(),
'Output after removing multiple CSS declaration via `remove_declarations()` does not match expectations'
);
}
}
8 changes: 4 additions & 4 deletions tests/phpunit/tests/style-engine/wpStyleEngineCssRule.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ public function test_should_instantiate_with_selector_and_rules() {
$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() );
$this->assertSame( $selector, $css_rule->get_selector(), 'Return value of get_selector() does not match value passed to constructor.' );

$expected = "$selector{{$css_declarations->get_declarations_string()}}";
$this->assertSame( $expected, $css_rule->get_css() );
$this->assertSame( $expected, $css_rule->get_css(), 'Value returned by get_css() does not match expected declarations string.' );
}

/**
Expand Down Expand Up @@ -87,11 +87,11 @@ public function test_should_set_selector() {
$selector = '.taggart';
$css_rule = new WP_Style_Engine_CSS_Rule( $selector );

$this->assertSame( $selector, $css_rule->get_selector() );
$this->assertSame( $selector, $css_rule->get_selector(), 'Return value of get_selector() does not match value passed to constructor.' );

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

$this->assertSame( '.law-and-order', $css_rule->get_selector() );
$this->assertSame( '.law-and-order', $css_rule->get_selector(), 'Return value of get_selector() does not match value passed to set_selector().' );
}

/**
Expand Down
52 changes: 14 additions & 38 deletions tests/phpunit/tests/style-engine/wpStyleEngineCssRulesStore.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ public function test_should_create_new_store_on_instantiation() {
*/
public function test_should_not_create_store_without_a_store_name() {
$not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( '' );
$this->assertEmpty( $not_a_store );
$this->assertEmpty( $not_a_store, 'get_store() did not return an empty value with empty string as argument.' );

$also_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( 123 );
$this->assertEmpty( $also_not_a_store );
$this->assertEmpty( $also_not_a_store, 'get_store() did not return an empty value with number as argument.' );

$definitely_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( null );
$this->assertEmpty( $definitely_not_a_store );
$this->assertEmpty( $definitely_not_a_store, 'get_store() did not return an empty value with `null` as argument.' );
}

/**
Expand All @@ -61,11 +61,11 @@ public function test_should_return_existing_store() {
$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
$selector = '.haddock';

$new_fish_store->add_rule( $selector )->get_selector();
$this->assertEquals( $selector, $new_fish_store->add_rule( $selector )->get_selector() );
$new_fish_store->add_rule( $selector );
$this->assertEquals( $selector, $new_fish_store->add_rule( $selector )->get_selector(), 'Selector string of store rule does not match expected value' );

$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
$this->assertEquals( $selector, $the_same_fish_store->add_rule( $selector )->get_selector() );
$this->assertEquals( $selector, $the_same_fish_store->add_rule( $selector )->get_selector(), 'Selector string of existing store rule does not match expected value' );
}

/**
Expand Down Expand Up @@ -100,12 +100,14 @@ public function test_should_remove_all_stores() {
'dolmades' => $dolmades_store,
'tzatziki' => $tzatziki_store,
),
WP_Style_Engine_CSS_Rules_Store::get_stores()
WP_Style_Engine_CSS_Rules_Store::get_stores(),
'Return value of get_stores() does not match expectation'
);
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
$this->assertEquals(
array(),
WP_Style_Engine_CSS_Rules_Store::get_stores()
WP_Style_Engine_CSS_Rules_Store::get_stores(),
'Return value of get_stores() is not an empty array after remove_all_stores() called.'
);
}

Expand All @@ -120,7 +122,7 @@ public function test_should_add_rule_to_existing_store() {
$selector = '.wp-block-sauce a:hover';
$store_rule = $new_pie_store->add_rule( $selector );
$expected = '';
$this->assertEquals( $expected, $store_rule->get_css() );
$this->assertEquals( $expected, $store_rule->get_css(), 'Return value of get_css() is not a empty string where a rule has no CSS declarations.' );

$pie_declarations = array(
'color' => 'brown',
Expand All @@ -132,7 +134,7 @@ public function test_should_add_rule_to_existing_store() {

$store_rule = $new_pie_store->add_rule( $selector );
$expected = "$selector{{$css_declarations->get_declarations_string()}}";
$this->assertEquals( $expected, $store_rule->get_css() );
$this->assertEquals( $expected, $store_rule->get_css(), 'Return value of get_css() does not match expected CSS from existing store rules.' );
}

/**
Expand All @@ -149,33 +151,7 @@ public function test_should_get_all_rule_objects_for_a_store() {
$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->add_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->add_declarations( array( $css_declarations ) );

$expected = array(
$selector => $store_rule,
);
$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
$this->assertEquals( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations.' );

$new_selector = '.wp-block-mushroom a:hover';
$newer_pizza_declarations = array(
Expand All @@ -189,6 +165,6 @@ public function test_should_get_all_rule_objects_for_a_store() {
$selector => $store_rule,
$new_selector => $new_store_rule,
);
$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
$this->assertEquals( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations after adding new rules to store.' );
}
}
15 changes: 11 additions & 4 deletions tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,8 @@ public function test_should_dedupe_and_merge_css_declarations() {
$an_excellent_processor->add_rules( $another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
$an_excellent_processor->get_css( array( 'prettify' => false ) )
$an_excellent_processor->get_css( array( 'prettify' => false ) ),
'Return value of get_css() does not match expectations with new, deduped and merged declarations.'
);

$yet_another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
Expand All @@ -167,7 +168,8 @@ public function test_should_dedupe_and_merge_css_declarations() {
$an_excellent_processor->add_rules( $yet_another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
$an_excellent_processor->get_css( array( 'prettify' => false ) )
$an_excellent_processor->get_css( array( 'prettify' => false ) ),
'Return value of get_css() does not match expectations with deduped and merged declarations.'
);
}

Expand Down Expand Up @@ -270,7 +272,11 @@ public function test_should_combine_previously_added_css_rules() {
)
);
$a_lovely_processor->add_rules( $a_lovelier_rule );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css( array( 'prettify' => false ) ) );
$this->assertEquals(
'.a-lovely-rule,.a-lovelier-rule{border-color:purple;}',
$a_lovely_processor->get_css( array( 'prettify' => false ) ),
'Return value of get_css() does not match expectations when combining 2 CSS rules'
);

$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
'.a-most-lovely-rule',
Expand All @@ -290,7 +296,8 @@ public function test_should_combine_previously_added_css_rules() {

$this->assertEquals(
'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
$a_lovely_processor->get_css( array( 'prettify' => false ) )
$a_lovely_processor->get_css( array( 'prettify' => false ) ),
'Return value of get_css() does not match expectations when combining 4 CSS rules'
);
}
}