From ea50cf0a27d4be862bece95cf85c4f1c6b6bfc81 Mon Sep 17 00:00:00 2001 From: Ashutosh Gautam Date: Tue, 24 Sep 2024 16:05:30 +0530 Subject: [PATCH 1/5] feat: Add tests for Code Block --- tests/unit/CoreCodeTest.php | 264 ++++++++++++++++++++++++++++++++++++ 1 file changed, 264 insertions(+) create mode 100644 tests/unit/CoreCodeTest.php diff --git a/tests/unit/CoreCodeTest.php b/tests/unit/CoreCodeTest.php new file mode 100644 index 00000000..3666fec8 --- /dev/null +++ b/tests/unit/CoreCodeTest.php @@ -0,0 +1,264 @@ +post_id = wp_insert_post( + [ + 'post_title' => 'Post with Code Block', + 'post_content' => '', + 'post_status' => 'publish', + ] + ); + + \WPGraphQL::clear_schema(); + } + + /** + * Tear down the test environment. + */ + public function tearDown(): void { + parent::tearDown(); + + wp_delete_post( $this->post_id, true ); + + \WPGraphQL::clear_schema(); + } + + /** + * Provide the GraphQL query for testing. + * + * @return string The GraphQL query. + */ + public function query(): string { + return ' + fragment CoreCodeBlockFragment on CoreCode { + attributes { + align + anchor + backgroundColor + borderColor + className + content + cssClassName + fontFamily + fontSize + gradient + lock + metadata + style + textColor + } + } + query Post( $id: ID! ) { + post(id: $id, idType: DATABASE_ID) { + databaseId + editorBlocks { + name + ...CoreCodeBlockFragment + } + } + } + '; + } + + /** + * Test the retrieval of core/code block attributes. + * + * Attributes covered: + * - content + * - cssClassName + * - backgroundColor + * - textColor + * - fontSize + * - fontFamily + * + * @return void + */ + public function test_retrieve_core_code_attributes() { + $block_content = ' + + 
function hello_world() {
+    console.log("Hello, World!");
+}
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $actual = graphql( + [ + 'query' => $this->query(), + 'variables' => [ 'id' => $this->post_id ], + ] + ); + + $block = $actual['data']['post']['editorBlocks'][0]; + $attributes = $block['attributes']; + + $this->assertEquals( 'core/code', $block['name'] ); + $this->assertEquals( + [ + 'align' => null, + 'anchor' => null, + 'backgroundColor' => 'pale-cyan-blue', + 'borderColor' => null, + 'className' => null, + 'content' => "function hello_world() {\n console.log(\"Hello, World!\");\n}", + 'cssClassName' => 'wp-block-code has-vivid-red-color has-pale-cyan-blue-background-color has-text-color has-background has-large-font-size has-monospace-font-family', + 'fontFamily' => 'monospace', + 'fontSize' => 'large', + 'gradient' => null, + 'lock' => null, + 'metadata' => null, + 'style' => null, + 'textColor' => 'vivid-red', + ], + $attributes + ); + } + + /** + * Test retrieval of core/code block with custom styles and border color. + * + * Attributes covered: + * - borderColor + * - style + * - className + * - align + * + * @return void + */ + public function test_retrieve_core_code_with_custom_styles() { + $block_content = ' + + 
const greeting = "Hello, styled code!";
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $actual = graphql( + [ + 'query' => $this->query(), + 'variables' => [ 'id' => $this->post_id ], + ] + ); + + $block = $actual['data']['post']['editorBlocks'][0]; + $attributes = $block['attributes']; + + $this->assertEquals( + [ + 'align' => 'wide', + 'anchor' => null, + 'backgroundColor' => null, + 'borderColor' => 'vivid-cyan-blue', + 'className' => 'custom-class', + 'content' => 'const greeting = "Hello, styled code!";', + 'cssClassName' => 'wp-block-code alignwide custom-class has-border-color has-vivid-cyan-blue-border-color', + 'fontFamily' => null, + 'fontSize' => null, + 'gradient' => null, + 'lock' => null, + 'metadata' => null, + 'style' => wp_json_encode( + [ + 'border' => [ + 'width' => '2px', + ], + 'spacing' => [ + 'padding' => [ + 'top' => '20px', + 'right' => '20px', + 'bottom' => '20px', + 'left' => '20px', + ], + ], + ] + ), + 'textColor' => null, + ], + $attributes + ); + } + + /** + * Test retrieval of core/code block with gradient and additional attributes. + * + * Attributes covered: + * - gradient + * - anchor + * - lock + * - metadata + * + * @return void + */ + public function test_retrieve_core_code_with_gradient_and_additional_attributes() { + $block_content = ' + + 
console.log("Gradient and locked code block");
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $actual = graphql( + [ + 'query' => $this->query(), + 'variables' => [ 'id' => $this->post_id ], + ] + ); + + $block = $actual['data']['post']['editorBlocks'][0]; + $attributes = $block['attributes']; + + $this->assertEquals( + [ + 'align' => null, + 'anchor' => 'test-anchor', + 'backgroundColor' => null, + 'borderColor' => null, + 'className' => null, + 'content' => 'console.log("Gradient and locked code block");', + 'cssClassName' => 'wp-block-code has-vivid-cyan-blue-to-vivid-purple-gradient-background', + 'fontFamily' => null, + 'fontSize' => null, + 'gradient' => 'vivid-cyan-blue-to-vivid-purple', + 'lock' => '{"move":true,"remove":true}', + 'metadata' => '{"someKey":"someValue"}', + 'style' => null, + 'textColor' => null, + ], + $attributes + ); + } +} From a02e75a6ab528733aa47f087e1de87ec5adb969d Mon Sep 17 00:00:00 2001 From: Ashutosh Gautam Date: Tue, 24 Sep 2024 16:08:44 +0530 Subject: [PATCH 2/5] fix: Add Changeset --- .changeset/silver-actors-retire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silver-actors-retire.md diff --git a/.changeset/silver-actors-retire.md b/.changeset/silver-actors-retire.md new file mode 100644 index 00000000..6377130a --- /dev/null +++ b/.changeset/silver-actors-retire.md @@ -0,0 +1,5 @@ +--- +"@wpengine/wp-graphql-content-blocks": patch +--- + +tests: Add tests for CoreCode Block From 0d0d0ee01e5029b0762fd79aaadc38de63878299 Mon Sep 17 00:00:00 2001 From: Ashutosh Gautam Date: Wed, 25 Sep 2024 00:12:42 +0530 Subject: [PATCH 3/5] fix: Add missing asserts --- tests/unit/CoreCodeTest.php | 213 ++++++++++++++++++++++-------------- 1 file changed, 129 insertions(+), 84 deletions(-) diff --git a/tests/unit/CoreCodeTest.php b/tests/unit/CoreCodeTest.php index 3666fec8..f6248693 100644 --- a/tests/unit/CoreCodeTest.php +++ b/tests/unit/CoreCodeTest.php @@ -45,34 +45,47 @@ public function tearDown(): void { */ public function query(): string { return ' - fragment CoreCodeBlockFragment on CoreCode { - attributes { - align - anchor - backgroundColor - borderColor - className - content - cssClassName - fontFamily - fontSize - gradient - lock - metadata - style - textColor - } - } - query Post( $id: ID! ) { - post(id: $id, idType: DATABASE_ID) { - databaseId - editorBlocks { - name - ...CoreCodeBlockFragment - } - } - } - '; + fragment CoreCodeBlockFragment on CoreCode { + attributes { + align + anchor + backgroundColor + borderColor + className + content + cssClassName + fontFamily + fontSize + gradient + lock + # metadata + style + textColor + } + } + query Post( $id: ID! ) { + post(id: $id, idType: DATABASE_ID) { + databaseId + editorBlocks { + apiVersion + blockEditorCategoryName + clientId + cssClassNames + innerBlocks { + name + } + isDynamic + name + parentClientId + renderedHtml + ... on BlockWithSupportsAnchor { + anchor + } + ...CoreCodeBlockFragment + } + } + } + '; } /** @@ -90,12 +103,12 @@ className */ public function test_retrieve_core_code_attributes() { $block_content = ' - - 
function hello_world() {
-    console.log("Hello, World!");
-}
- - '; + + 
function hello_world() {
+				console.log("Hello, World!");
+			}
+ + '; wp_update_post( [ @@ -104,33 +117,48 @@ public function test_retrieve_core_code_attributes() { ] ); - $actual = graphql( - [ - 'query' => $this->query(), - 'variables' => [ 'id' => $this->post_id ], - ] - ); + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; - $block = $actual['data']['post']['editorBlocks'][0]; - $attributes = $block['attributes']; + $actual = graphql( compact( 'query', 'variables' ) ); + + $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); + $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); + $this->assertArrayHasKey( 'post', $actual['data'], 'The post key should be present' ); + + $this->assertEquals( $this->post_id, $actual['data']['post']['databaseId'], 'The post ID should match' ); + + $this->assertEquals( 1, count( $actual['data']['post']['editorBlocks'] ) ); + + $block = $actual['data']['post']['editorBlocks'][0]; - $this->assertEquals( 'core/code', $block['name'] ); + $this->assertNotEmpty( $block['apiVersion'], 'The apiVersion should be present' ); + $this->assertEquals( 'text', $block['blockEditorCategoryName'], 'The blockEditorCategoryName should be text' ); + $this->assertNotEmpty( $block['clientId'], 'The clientId should be present' ); + + $this->assertEmpty( $block['innerBlocks'], 'There should be no inner blocks' ); + $this->assertEquals( 'core/code', $block['name'], 'The block name should be core/code' ); + $this->assertEmpty( $block['parentClientId'], 'There should be no parentClientId' ); + $this->assertNotEmpty( $block['renderedHtml'], 'The renderedHtml should be present' ); + + $attributes = $block['attributes']; $this->assertEquals( [ 'align' => null, 'anchor' => null, - 'backgroundColor' => 'pale-cyan-blue', + 'backgroundColor' => 'pale-cyan-blue', // previously untested 'borderColor' => null, 'className' => null, - 'content' => "function hello_world() {\n console.log(\"Hello, World!\");\n}", - 'cssClassName' => 'wp-block-code has-vivid-red-color has-pale-cyan-blue-background-color has-text-color has-background has-large-font-size has-monospace-font-family', - 'fontFamily' => 'monospace', - 'fontSize' => 'large', + 'content' => "function hello_world() {\n\t\t\t\tconsole.log(\"Hello, World!\");\n\t\t\t}", // previously untested + 'cssClassName' => 'wp-block-code has-vivid-red-color has-pale-cyan-blue-background-color has-text-color has-background has-large-font-size has-monospace-font-family', // previously untested + 'fontFamily' => 'monospace', // previously untested + 'fontSize' => 'large', // previously untested 'gradient' => null, 'lock' => null, - 'metadata' => null, 'style' => null, - 'textColor' => 'vivid-red', + 'textColor' => 'vivid-red', // previously untested ], $attributes ); @@ -149,10 +177,10 @@ public function test_retrieve_core_code_attributes() { */ public function test_retrieve_core_code_with_custom_styles() { $block_content = ' - - 
const greeting = "Hello, styled code!";
- - '; + + 
const greeting = "Hello, styled code!";
+ + '; wp_update_post( [ @@ -161,31 +189,40 @@ public function test_retrieve_core_code_with_custom_styles() { ] ); - $actual = graphql( - [ - 'query' => $this->query(), - 'variables' => [ 'id' => $this->post_id ], - ] - ); + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; - $block = $actual['data']['post']['editorBlocks'][0]; - $attributes = $block['attributes']; + $actual = graphql( compact( 'query', 'variables' ) ); + + $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); + $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); + $this->assertArrayHasKey( 'post', $actual['data'], 'The post key should be present' ); + $this->assertEquals( $this->post_id, $actual['data']['post']['databaseId'], 'The post ID should match' ); + + $this->assertEquals( 1, count( $actual['data']['post']['editorBlocks'] ) ); + + $block = $actual['data']['post']['editorBlocks'][0]; + + $this->assertEquals( 'core/code', $block['name'], 'The block name should be core/code' ); + + $attributes = $block['attributes']; $this->assertEquals( [ - 'align' => 'wide', + 'align' => 'wide', // previously untested 'anchor' => null, 'backgroundColor' => null, - 'borderColor' => 'vivid-cyan-blue', - 'className' => 'custom-class', + 'borderColor' => 'vivid-cyan-blue', // previously untested + 'className' => 'custom-class', // previously untested 'content' => 'const greeting = "Hello, styled code!";', 'cssClassName' => 'wp-block-code alignwide custom-class has-border-color has-vivid-cyan-blue-border-color', 'fontFamily' => null, 'fontSize' => null, 'gradient' => null, 'lock' => null, - 'metadata' => null, - 'style' => wp_json_encode( + 'style' => wp_json_encode( // previously untested [ 'border' => [ 'width' => '2px', @@ -213,16 +250,15 @@ public function test_retrieve_core_code_with_custom_styles() { * - gradient * - anchor * - lock - * - metadata * * @return void */ public function test_retrieve_core_code_with_gradient_and_additional_attributes() { $block_content = ' - - 
console.log("Gradient and locked code block");
- - '; + + 
console.log("Gradient and locked code block");
+ + '; wp_update_post( [ @@ -231,20 +267,30 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( ] ); - $actual = graphql( - [ - 'query' => $this->query(), - 'variables' => [ 'id' => $this->post_id ], - ] - ); + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; - $block = $actual['data']['post']['editorBlocks'][0]; - $attributes = $block['attributes']; + $actual = graphql( compact( 'query', 'variables' ) ); + + $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); + $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); + $this->assertArrayHasKey( 'post', $actual['data'], 'The post key should be present' ); + + $this->assertEquals( $this->post_id, $actual['data']['post']['databaseId'], 'The post ID should match' ); + + $this->assertEquals( 1, count( $actual['data']['post']['editorBlocks'] ) ); + $block = $actual['data']['post']['editorBlocks'][0]; + + $this->assertEquals( 'core/code', $block['name'], 'The block name should be core/code' ); + + $attributes = $block['attributes']; $this->assertEquals( [ 'align' => null, - 'anchor' => 'test-anchor', + 'anchor' => 'test-anchor', // previously untested 'backgroundColor' => null, 'borderColor' => null, 'className' => null, @@ -252,9 +298,8 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( 'cssClassName' => 'wp-block-code has-vivid-cyan-blue-to-vivid-purple-gradient-background', 'fontFamily' => null, 'fontSize' => null, - 'gradient' => 'vivid-cyan-blue-to-vivid-purple', - 'lock' => '{"move":true,"remove":true}', - 'metadata' => '{"someKey":"someValue"}', + 'gradient' => 'vivid-cyan-blue-to-vivid-purple', // previously untested + 'lock' => '{"move":true,"remove":true}', // previously untested 'style' => null, 'textColor' => null, ], From d5fa769aaf55b73536dc2984c270409042719ba9 Mon Sep 17 00:00:00 2001 From: Ashutosh Gautam Date: Wed, 25 Sep 2024 00:58:14 +0530 Subject: [PATCH 4/5] temp: log breaks --- tests/unit/CoreCodeTest.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/unit/CoreCodeTest.php b/tests/unit/CoreCodeTest.php index f6248693..e70c7c96 100644 --- a/tests/unit/CoreCodeTest.php +++ b/tests/unit/CoreCodeTest.php @@ -123,6 +123,7 @@ public function test_retrieve_core_code_attributes() { ]; $actual = graphql( compact( 'query', 'variables' ) ); + error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); @@ -195,6 +196,7 @@ public function test_retrieve_core_code_with_custom_styles() { ]; $actual = graphql( compact( 'query', 'variables' ) ); + error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); @@ -273,6 +275,7 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( ]; $actual = graphql( compact( 'query', 'variables' ) ); + error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); From 71d97fc0f634bf94bf7770fb1214ef41ca691865 Mon Sep 17 00:00:00 2001 From: Ashutosh Gautam Date: Wed, 25 Sep 2024 01:29:07 +0530 Subject: [PATCH 5/5] fix: Remove align attribute from main query - Align attribute is only supported in WP 6.3+ - Create separate test for align attribute --- tests/unit/CoreCodeTest.php | 91 +++++++++++++++++++++++++++++++++---- 1 file changed, 83 insertions(+), 8 deletions(-) diff --git a/tests/unit/CoreCodeTest.php b/tests/unit/CoreCodeTest.php index e70c7c96..6b6165c2 100644 --- a/tests/unit/CoreCodeTest.php +++ b/tests/unit/CoreCodeTest.php @@ -47,7 +47,6 @@ public function query(): string { return ' fragment CoreCodeBlockFragment on CoreCode { attributes { - align anchor backgroundColor borderColor @@ -123,7 +122,6 @@ public function test_retrieve_core_code_attributes() { ]; $actual = graphql( compact( 'query', 'variables' ) ); - error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); @@ -147,7 +145,6 @@ public function test_retrieve_core_code_attributes() { $attributes = $block['attributes']; $this->assertEquals( [ - 'align' => null, 'anchor' => null, 'backgroundColor' => 'pale-cyan-blue', // previously untested 'borderColor' => null, @@ -172,7 +169,6 @@ public function test_retrieve_core_code_attributes() { * - borderColor * - style * - className - * - align * * @return void */ @@ -196,7 +192,6 @@ public function test_retrieve_core_code_with_custom_styles() { ]; $actual = graphql( compact( 'query', 'variables' ) ); - error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); @@ -213,7 +208,6 @@ public function test_retrieve_core_code_with_custom_styles() { $attributes = $block['attributes']; $this->assertEquals( [ - 'align' => 'wide', // previously untested 'anchor' => null, 'backgroundColor' => null, 'borderColor' => 'vivid-cyan-blue', // previously untested @@ -275,7 +269,6 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( ]; $actual = graphql( compact( 'query', 'variables' ) ); - error_log( print_r( $actual, true ) ); $this->assertArrayNotHasKey( 'errors', $actual, 'There should not be any errors' ); $this->assertArrayHasKey( 'data', $actual, 'The data key should be present' ); @@ -292,7 +285,6 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( $attributes = $block['attributes']; $this->assertEquals( [ - 'align' => null, 'anchor' => 'test-anchor', // previously untested 'backgroundColor' => null, 'borderColor' => null, @@ -309,4 +301,87 @@ public function test_retrieve_core_code_with_gradient_and_additional_attributes( $attributes ); } + + /** + * Test the retrieval of the align attribute for core/code block. + */ + public function test_retrieve_core_code_align_attribute(): void { + // The align attribute is only supported in WP 6.3+ + if ( ! is_wp_version_compatible( '6.3' ) ) { + $this->markTestSkipped( 'This test requires WP 6.3 or higher.' ); + } + + $block_content = ' + + 
function test() { return "aligned code"; }
+