diff --git a/.changeset/pink-months-flash.md b/.changeset/pink-months-flash.md new file mode 100644 index 00000000..72d261dc --- /dev/null +++ b/.changeset/pink-months-flash.md @@ -0,0 +1,5 @@ +--- +"@wpengine/wp-graphql-content-blocks": patch +--- + +tests: backfill tests for `CoreTable` attributes. diff --git a/tests/unit/CoreTableTest.php b/tests/unit/CoreTableTest.php index 56dee256..388af663 100644 --- a/tests/unit/CoreTableTest.php +++ b/tests/unit/CoreTableTest.php @@ -3,29 +3,15 @@ namespace WPGraphQL\ContentBlocks\Unit; final class CoreTableTest extends PluginTestCase { - public $instance; - public $post_id; + private $post_id; public function setUp(): void { parent::setUp(); $this->post_id = wp_insert_post( [ - 'post_title' => 'Post Title', - 'post_content' => preg_replace( - '/\s+/', - ' ', - trim( - ' - -
- -
Header 1Header 2
Footer 1Footer 2
-
Caption
- - ' - ) - ), + 'post_title' => 'Table', + 'post_content' => '', 'post_status' => 'publish', ] ); @@ -40,42 +26,534 @@ public function tearDown(): void { parent::tearDown(); } - public function test_retrieve_core_table_attribute_fields() { - $query = ' + private function query(): string { + return ' fragment CoreTableBlockFragment on CoreTable { attributes { - caption align anchor + backgroundColor + body { + cells { + align + colspan + content + rowspan + scope + tag + } + } + borderColor + caption + className + fontFamily + fontSize + foot { + cells { + align + colspan + content + rowspan + scope + tag + } + } + gradient + hasFixedLayout + head { + cells { + align + colspan + content + rowspan + scope + tag + } + } + lock + # metadata + style + textColor } } - - query GetPosts { - posts(first: 1) { - nodes { - editorBlocks { + query Post( $id: ID! ) { + post(id: $id, idType: DATABASE_ID) { + databaseId + editorBlocks { + apiVersion + blockEditorCategoryName + clientId + cssClassNames + innerBlocks { name - ...CoreTableBlockFragment } + isDynamic + name + parentClientId + renderedHtml + ... on BlockWithSupportsAnchor { + anchor + } + ...CoreTableBlockFragment } } } '; + } - $actual = graphql( [ 'query' => $query ] ); + /** + * Test that the CoreTable block can be retrieved and basic fields are present. + * + * Tested attributes: + * - caption + * - hasFixedLayout + * - body > cells > tag (Rest are not working) + */ + public function test_retrieve_core_table_attribute_fields() { + $block_content = ' + +
Cell 1Cell 2
Cell 3Cell 4
Caption
+ + '; - $node = $actual['data']['posts']['nodes'][0]; + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; + + $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->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' ); + + // @todo this is not working + // $this->assertNotEmpty( $block['cssClassNames'], 'The cssClassNames should be present' ); + + $this->assertEmpty( $block['innerBlocks'], 'There should be no inner blocks' ); + $this->assertEquals( 'core/table', $block['name'], 'The block name should be core/table' ); + $this->assertEmpty( $block['parentClientId'], 'There should be no parentClientId' ); + $this->assertNotEmpty( $block['renderedHtml'], 'The renderedHtml should be present' ); + + // We'll test the body cells separately. + $body = $block['attributes']['body']; + unset( $block['attributes']['body'] ); - $this->assertEquals( 'core/table', $node['editorBlocks'][0]['name'] ); - // There should be only one block using that query when not using flat: true - $this->assertEquals( 1, count( $node['editorBlocks'] ) ); $this->assertEquals( [ - 'caption' => 'Caption', + 'align' => null, + 'anchor' => null, + 'backgroundColor' => null, + 'borderColor' => null, + 'caption' => 'Caption', + 'className' => null, + 'fontFamily' => null, + 'fontSize' => null, + 'foot' => [], + 'gradient' => null, + 'hasFixedLayout' => true, + 'head' => [], + 'lock' => null, + 'style' => null, + 'textColor' => null, + ], + $block['attributes'] + ); + + // Test the body cells. + $this->assertNotEmpty( $body, 'The body should have cells' ); + $this->assertCount( 2, $body, 'There should be 2 rows' ); + + // Test the first row + $this->assertCount( 2, $body[0]['cells'], 'There should be 2 cells in the first row' ); + $this->assertEquals( + [ // @todo These should be filled in 'align' => null, - 'anchor' => null, + 'colspan' => null, + 'content' => null, + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $body[0]['cells'][0], + 'The first cell in the first row does not match' + ); + $this->assertEquals( + [ // @todo These should be filled in + 'align' => null, + 'colspan' => null, + 'content' => null, + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $body[0]['cells'][1], + 'The second cell in the first row does not match' + ); + + // Test the second row + $this->assertCount( 2, $body[1]['cells'], 'There should be 2 cells in the second row' ); + $this->assertEquals( + [ // @todo These should be filled in + 'align' => null, + 'colspan' => null, + 'content' => null, + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $body[1]['cells'][0], + 'The first cell in the second row does not match' + ); + $this->assertEquals( + [ // @todo These should be filled in + 'align' => null, + 'colspan' => null, + 'content' => null, + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $body[1]['cells'][1], + 'The second cell in the second row does not match' + ); + } + + /** + * Tests additional attributes of the CoreTable block along with the header and footer cells. + * + * Tested attributes: + * - align + * - borderColor + * - fontFamily + * - fontSize + * - style + * - head > cells > tag (Rest are not working) + * - foot > cells > tag (Rest are not working) + */ + public function test_retrieve_core_table_attribute_fields_header_footer() { + $block_content = ' + +
Header labelHeader label
This column has "align column left"This column has "align column center"
Cell 3Cell 4
Footer labelFooter label
Caption
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; + + $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' ); + + $block = $actual['data']['post']['editorBlocks'][0]; + + // We'll test the cells separately. + $body = $block['attributes']['body']; + $head = $block['attributes']['head']; + $foot = $block['attributes']['foot']; + unset( $block['attributes']['body'] ); + unset( $block['attributes']['head'] ); + unset( $block['attributes']['foot'] ); + + $this->assertEquals( + [ + 'align' => 'wide', // Previously untested + 'anchor' => null, + 'backgroundColor' => null, + 'borderColor' => 'accent-4', // Previously untested + 'caption' => 'Caption', + 'className' => null, + 'fontFamily' => 'system-serif', // Previously untested + 'fontSize' => 'medium', // Previously untested + 'gradient' => null, + 'hasFixedLayout' => false, + 'lock' => null, + 'style' => wp_json_encode( + [ // Previously untested + 'border' => [ + 'width' => '1px', + ], + ] + ), + 'textColor' => null, + ], + $block['attributes'], + 'The block attributes do not match' + ); + + // Test the head cells. + $this->assertNotEmpty( $head, 'The head should have cells' ); + $this->assertCount( 1, $head, 'There should be 1 row in the head' ); + $this->assertCount( 2, $head[0]['cells'], 'There should be 2 cells in the head' ); + + // Test the foot cells. + // @todo This is duplicated after the `markTestIncomplete` call and should be removed once fixed. + $this->assertNotEmpty( $foot, 'The foot should have cells' ); + $this->assertCount( 1, $foot, 'There should be 1 row in the foot' ); + $this->assertCount( 2, $foot[0]['cells'], 'There should be 2 cells in the foot' ); + + $this->markTestIncomplete( 'Cell attributes are not returned' ); + + $this->assertEquals( + [ + 'align' => 'left', + 'colspan' => null, + 'content' => 'Header label', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'th', + ], + $head[0]['cells'][0], + 'The first cell in the head does not match' + ); + $this->assertEquals( + [ + 'align' => 'right', + 'colspan' => null, + 'content' => 'Header label', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'th', + ], + $head[0]['cells'][1], + 'The second cell in the head does not match' + ); + + // Test the body cells. + $this->assertNotEmpty( $body, 'The body should have cells' ); + $this->assertCount( 2, $body, 'There should be 2 rows' ); + + // Test the left cell. + $this->assertEquals( + [ + 'align' => 'left', + 'colspan' => null, + 'content' => 'This column has "align column left"', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $body[0]['cells'][0], + 'The first cell in the first row does not match' + ); + + // Test right cell. + $this->assertEquals( + [ + 'align' => 'right', + 'colspan' => null, + 'content' => 'This column has "align column center"', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + ); + + // Test the foot cells. + $this->assertNotEmpty( $foot, 'The foot should have cells' ); + $this->assertCount( 1, $foot, 'There should be 1 row in the foot' ); + $this->assertCount( 2, $foot[0]['cells'], 'There should be 2 cells in the foot' ); + + $this->assertEquals( + [ + 'align' => 'left', + 'colspan' => null, + 'content' => 'Footer label', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $foot[0]['cells'][0], + 'The first cell in the foot does not match' + ); + + $this->assertEquals( + [ + 'align' => 'right', + 'colspan' => null, + 'content' => 'Footer label', + 'rowspan' => null, + 'scope' => null, + 'tag' => 'td', + ], + $foot[0]['cells'][1], + 'The second cell in the foot does not match' + ); + } + + /** + * Tests additional style attributes of the CoreTable block. + * + * Tested attributes: + * - backgroundColor + * - className + * - textColor + */ + public function test_retrieve_core_table_attribute_styles() { + $block_content = ' + +
Caption
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; + + $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' ); + + $block = $actual['data']['post']['editorBlocks'][0]; + + // No need to test the cells again. + unset( $block['attributes']['body'] ); + unset( $block['attributes']['head'] ); + unset( $block['attributes']['foot'] ); + + $this->assertEquals( + [ + 'align' => null, + 'anchor' => null, + 'backgroundColor' => 'base', // Previously untested + 'borderColor' => null, + 'caption' => 'Caption', + 'className' => 'is-style-stripes', // Previously untested + 'fontFamily' => null, + 'fontSize' => null, + 'gradient' => null, + 'hasFixedLayout' => false, + 'lock' => null, + 'style' => wp_json_encode( + [ + 'elements' => [ + 'link' => [ + 'color' => [ + 'text' => 'var:preset|color|vivid-red', + ], + ], + ], + ] + ), + 'textColor' => 'vivid-red', // Previously untested + ], + $block['attributes'], + 'The block attributes do not match' + ); + } + + /** + * Tests the `lock` and gradient attributes of the CoreTable block. + * + * Tested attributes: + * - lock + * - gradient + */ + public function test_retrieve_core_table_attribute_lock_gradient(): void { + $block_content = ' + +
Header labelHeader label
Cell 1Cell 2
Cell 3Cell 4
Footer labelFooter label
Caption
+ + '; + + wp_update_post( + [ + 'ID' => $this->post_id, + 'post_content' => $block_content, + ] + ); + + $query = $this->query(); + $variables = [ + 'id' => $this->post_id, + ]; + + $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' ); + + $block = $actual['data']['post']['editorBlocks'][0]; + + // No need to test the cells again. + unset( $block['attributes']['body'] ); + unset( $block['attributes']['head'] ); + unset( $block['attributes']['foot'] ); + + $this->assertEquals( + [ + 'align' => null, + 'anchor' => null, + 'backgroundColor' => null, + 'borderColor' => null, + 'caption' => 'Caption', + 'className' => null, + 'fontFamily' => null, + 'fontSize' => null, + 'gradient' => 'gradient-3', // Previously untested + 'hasFixedLayout' => false, + 'lock' => wp_json_encode( + [ // Previously untested + 'move' => true, + 'remove' => false, + ] + ), + 'style' => wp_json_encode( + [ + 'typography' => [ + 'letterSpacing' => '7px', + ], + ] + ), + 'textColor' => null, ], - $node['editorBlocks'][0]['attributes'] + $block['attributes'], + 'The block attributes do not match' ); } }