Skip to content

Commit

Permalink
chore : add a barebones test case and fix cssClassName assert
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ta5r
Ta5r committed Sep 27, 2024
1 parent 44ebf8a commit 2e1a8d1
Showing 1 changed file with 134 additions and 89 deletions.
223 changes: 134 additions & 89 deletions tests/unit/CoreImageTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,45 +44,68 @@ public function tearDown(): void {
\WPGraphQL::clear_schema();
}

public function test_retrieve_core_image_media_details(): void {
$block_content = '<!-- wp:image {"lightbox":{"enabled":false},"align":"left","width":500,"height":500,"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none", "id":' . $this->attachment_id . ',"className":"is-style-rounded", "style":{"color":{"duotone":"var:preset|duotone|purple-green"}},"borderColor":"vivid-red","lock":{"move":true,"remove":true},"className":"test-css-class-name"} -->
<figure class="wp-block-image size-full is-resized" id="test-anchor">
<a class="test-link-css-class" href="http://decoupled.local/dcf-1-0/" target="_blank" rel="https://www.youtube.com/ noreferrer noopener">
<img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" alt="alt-text" class="wp-image-1432" width="500" height="500" title="test-title"/></figure>
</a>
<figcaption class="wp-element-caption">Align left</figcaption>
<!-- /wp:image -->';

$query = '
public function query() {
return '
fragment CoreImageBlockFragment on CoreImage {
attributes {
id
}
mediaDetails {
height
width
height
alt
align
src
style
sizeSlug
# lightbox # not supported yet
# aspectRatio # not supported yet
# scale # not supported yet
linkClass
linkTarget
linkDestination
borderColor
caption
className
cssClassName
url
rel
href
title
lock
anchor
}
}
query Post( $id: ID! ) {
post(id: $id, idType: DATABASE_ID) {
databaseId
editorBlocks {
# databaseId
apiVersion
blockEditorCategoryName
clientId
cssClassNames
name
innerBlocks {
name
}
parentClientId
renderedHtml
name
...CoreImageBlockFragment
}
}
}
';
}

public function test_retrieve_core_image_fields_attributes(): void {

$block_content = '
<!-- wp:image {"align":"left","id":' . $this->attachment_id . ',"className":"test-css-class-name"} -->
<figure class="wp-block-image">
<img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" class="wp-image-1432"/>
</figure>
<!-- /wp:image -->';

$query = $this->query();

// Set post content.
wp_update_post(
Expand All @@ -98,95 +121,90 @@ public function test_retrieve_core_image_media_details(): void {
];

$actual = graphql( compact( 'query', 'variables' ) );
error_log( print_r( $actual, true ) );
// $actual = $actual['data']['post'];

$node = $actual['data']['post'];

// Verify that the ID of the first post matches the one we just created.
$this->assertEquals( $this->post_id, $node['databaseId'] );
$this->assertEquals( 1, count( $node['editorBlocks'] ) );
$this->assertEquals( 'core/image', $node['editorBlocks'][0]['name'] );

$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' );

// @todo : fix
// $this->assertEquals( $this->post_id, $actual['data']['post']['databaseId'], 'The post ID should match' );
$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( 'media', $block['blockEditorCategoryName'], 'The blockEditorCategoryName should be text' );
$this->assertEquals( 'media', $block['blockEditorCategoryName'], 'The blockEditorCategoryName should be media' );
$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/image', $block['name'], 'The block name should be core/image' );
$this->assertEmpty( $block['parentClientId'], 'There should be no parentClientId' );
$this->assertNotEmpty( $block['renderedHtml'], 'The renderedHtml should be present' );

$this->assertEquals(
[
'width' => 50,
'height' => 50,
'align' => 'left',
'id' => $this->attachment_id,
'className' => 'test-css-class-name',
'src' => 'http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg',
'url' => 'http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg',
'width' => null,
'height' => null,
'alt' => '',
'style' => null,
'sizeSlug' => null,
'linkClass' => null,
'linkTarget' => null,
'linkDestination' => null,
'borderColor' => null,
'caption' => '',
'cssClassName' => 'wp-block-image',
'rel' => null,
'href' => null,
'title' => null,
'lock' => null,
'anchor' => null,
],
$block['mediaDetails']
$node['editorBlocks'][0]['attributes']
);
}

public function test_retrieve_core_image_attributes(): void {

$block_content = '<!-- wp:image {"lightbox":{"enabled":false},"align":"left","width":500,"height":500,"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none", "id":' . $this->attachment_id . ',"className":"is-style-rounded", "style":{"color":{"duotone":"var:preset|duotone|purple-green"}},"borderColor":"vivid-red","lock":{"move":true,"remove":true},"className":"test-css-class-name"} -->
<figure class="wp-block-image size-full is-resized" id="test-anchor">
<a class="test-link-css-class" href="http://decoupled.local/dcf-1-0/" target="_blank" rel="https://www.youtube.com/ noreferrer noopener">
<img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" alt="alt-text" class="wp-image-1432" width="500" height="500" title="test-title"/></figure>
</a>
<figcaption class="wp-element-caption">Align left</figcaption>
<!-- /wp:image -->';
public function test_retrieve_core_image_media_details(): void {
$block_content = '
<!-- wp:image {"lightbox":{"enabled":false},"align":"left","width":500,"height":500,"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none", "id":' . $this->attachment_id . ',"className":"is-style-rounded", "style":{"color":{"duotone":"var:preset|duotone|purple-green"}},"borderColor":"vivid-red","lock":{"move":true,"remove":true},"className":"test-css-class-name"} -->
<figure class="wp-block-image size-full is-resized" id="test-anchor">
<a class="test-link-css-class" href="http://decoupled.local/dcf-1-0/" target="_blank" rel="https://www.youtube.com/ noreferrer noopener">
<img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" alt="alt-text" class="wp-image-1432" width="500" height="500" title="test-title"/></figure>
</a>
<figcaption class="wp-element-caption">Align left</figcaption>
<!-- /wp:image -->';

$query = '
fragment CoreImageBlockFragment on CoreImage {
attributes {
id
width
}
mediaDetails {
height
alt
align
src
style
sizeSlug
# lightbox # not supported yet
# aspectRatio # not supported yet
# scale # not supported yet
linkClass
linkTarget
linkDestination
borderColor
caption
className
cssClassName
url
rel
href
title
lock
anchor
width
}
}
query Post( $id: ID! ) {
post(id: $id, idType: DATABASE_ID) {
databaseId
editorBlocks {
apiVersion
blockEditorCategoryName
clientId
cssClassNames
name
innerBlocks {
name
}
parentClientId
renderedHtml
name
...CoreImageBlockFragment
}
}
Expand All @@ -208,36 +226,64 @@ className

$actual = graphql( compact( 'query', 'variables' ) );

error_log( print_r( $actual, true ) );
$node = $actual['data']['post'];

// Verify that the ID of the first post matches the one we just created.
$this->assertEquals( $this->post_id, $node['databaseId'] );
// There should be only one block using that query when not using flat: true
$this->assertEquals( 1, count( $node['editorBlocks'] ) );
$this->assertEquals( 'core/image', $node['editorBlocks'][0]['name'] );

$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];

$this->assertEquals( 1, count( $actual['data']['post']['editorBlocks'] ) );
$this->assertEquals(
[
'width' => 50,
'height' => 50,
],
$block['mediaDetails']
);
}

$block = $actual['data']['post']['editorBlocks'][0];
public function test_retrieve_core_image_attributes(): void {

$this->assertNotEmpty( $block['apiVersion'], 'The apiVersion should be present' );
$this->assertEquals( 'media', $block['blockEditorCategoryName'], 'The blockEditorCategoryName should be media' );
$this->assertNotEmpty( $block['clientId'], 'The clientId should be present' );
$block_content = '
<!-- wp:image {"lightbox":{"enabled":false},"align":"left","width":500,"height":500,"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none", "id":' . $this->attachment_id . ',"className":"is-style-rounded", "style":{"color":{"duotone":"var:preset|duotone|purple-green"}},"borderColor":"vivid-red","lock":{"move":true,"remove":true},"className":"test-css-class-name"} -->
<figure class="wp-block-image size-full is-resized" id="test-anchor">
<a class="test-link-css-class" href="http://decoupled.local/dcf-1-0/" target="_blank" rel="https://www.youtube.com/ noreferrer noopener">
<img src="http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg" alt="alt-text" class="wp-image-1432" width="500" height="500" title="test-title"/></figure>
</a>
<figcaption class="wp-element-caption">Align left</figcaption>
<!-- /wp:image -->';

// @todo this is not working
// $this->assertNotEmpty( $block['cssClassNames'], 'The cssClassNames should be present' );
$query = $this->query();

// Set post content.
wp_update_post(
[
'ID' => $this->post_id,
'post_content' => $block_content,
]
);

$query = $query;
$variables = [
'id' => $this->post_id,
];

$actual = graphql( compact( 'query', 'variables' ) );

// error_log( print_r( $actual, true ) );
$node = $actual['data']['post'];

$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' );

$block = $actual['data']['post']['editorBlocks'][0];

// WordPress 6.4+ adds layout styles, so `cssClassName` needs to be checked separately.
$this->assertStringContainsString( 'wp-block-image', $block['attributes']['cssClassName'] );
$this->assertStringContainsString( 'size-full', $block['attributes']['cssClassName'] );
$this->assertStringContainsString( 'is-resized', $block['attributes']['cssClassName'] );
unset( $block['attributes']['cssClassName'] );

$this->assertEmpty( $block['innerBlocks'], 'There should be no inner blocks' );
$this->assertEquals( 'core/image', $block['name'], 'The block name should be core/image' );
$this->assertEmpty( $block['parentClientId'], 'There should be no parentClientId' );
$this->assertNotEmpty( $block['renderedHtml'], 'The renderedHtml should be present' );
$this->assertEquals(
[
'width' => '500',
Expand All @@ -259,7 +305,6 @@ className
'align' => 'left',
'caption' => 'Align left',
'className' => 'test-css-class-name',
'cssClassName' => ( ! is_wp_version_compatible( '6.3' ) ) ? 'wp-duotone-varpresetduotonepurple-green-19 wp-block-image size-full is-resized' : 'wp-block-image size-full is-resized wp-duotone-purple-green', // This uses the old class name for WP < 6.3 which is wp-duotone-varpresetduotonepurple-green-19.
'url' => 'http://mysite.local/wp-content/uploads/2023/05/online-programming-course-hero-section-bg.svg',
'borderColor' => 'vivid-red',
'title' => 'test-title',
Expand All @@ -275,7 +320,7 @@ className
'href' => 'http://decoupled.local/dcf-1-0/',

],
$node['editorBlocks'][0]['attributes']
$block['attributes']
);
}
}

0 comments on commit 2e1a8d1

Please sign in to comment.