Skip to content
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

Jump to bottom

tests : backfill tests for Core Video Block #29

Merged
merged 1 commit into from
Sep 26, 2024
Merged

tests : backfill tests for Core Video Block #29

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
5 changes: 5 additions & 0 deletions .changeset/good-days-work.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@wpengine/wp-graphql-content-blocks": patch
---

tests : Backfill tests for Core Video block.
238 changes: 190 additions & 48 deletions tests/unit/CoreVideoTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@

final class CoreVideoTest extends PluginTestCase {
public $instance;

/**
* The post ID.
*
* @var int
*/
public $post_id;

public function setUp(): void {
Expand All @@ -12,17 +18,7 @@ public function setUp(): void {
$this->post_id = wp_insert_post(
[
'post_title' => 'Post Title',
'post_content' => preg_replace(
'/\s+/',
' ',
trim(
'
<!-- wp:video {"id":1636} -->
<figure class="wp-block-video"><video autoplay loop poster="http://mysite.local/wp-content/uploads/2023/05/pexels-egor-komarov-14420089-scaled.jpg" preload="auto" src="http://mysite.local/wp-content/uploads/2023/07/pexels_videos_1860684-1440p.mp4" playsinline></video></figure>
<!-- /wp:video -->
'
)
),
'post_content' => '',
'post_status' => 'publish',
]
);
Expand All @@ -38,64 +34,210 @@ public function tearDown(): void {
parent::tearDown();
}

public function test_retrieve_core_video_attributes() {
$query = '
public function query(): string {
return '
fragment CoreVideoBlockFragment on CoreVideo {
attributes {
align
anchor
autoplay
tracks
muted
caption
preload
src
playsInline
controls
loop
poster
id
}
align
anchor
autoplay
className
lock
tracks
muted
caption
preload
src
style
playsInline
controls
loop
poster
id
}

query GetPosts {
posts(first: 1) {
nodes {
}

query Post( $id: ID! ) {
post(id: $id, idType: DATABASE_ID) {
databaseId
editorBlocks {
editorBlocks {
apiVersion
blockEditorCategoryName
clientId
cssClassNames
name
innerBlocks{
name
...CoreVideoBlockFragment
}
parentClientId
renderedHtml
...CoreVideoBlockFragment
}
}
}
';
$actual = graphql( [ 'query' => $query ] );
$node = $actual['data']['posts']['nodes'][0];
}';
}

/**
* Test to retrieve core video block attributes.
*
* Covers:
* - align
* - anchor
* - autoplay
* - caption
* - className
* - controls
* - id
* - lock
* - loop
* - muted
* - playsInline
* - poster
* - preload
* - src
* - style
*/
public function test_retrieve_core_video_attributes(): void {
$block_content = '
<!-- wp:video {"id":1636,"align":"wide","lock":{"move":true,"remove":true},"className":"test-css-class","style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}}} -->
<figure id="test-anchor" class="wp-block-video" style="margin-top:var(--wp--preset--spacing--50);margin-right:var(--wp--preset--spacing--50);margin-bottom:var(--wp--preset--spacing--50);margin-left:var(--wp--preset--spacing--50)">
<video autoplay controls loop muted poster="http://mysite.local/wp-content/uploads/2023/05/pexels-egor-komarov-14420089-scaled.jpg" preload="auto" src="http://mysite.local/wp-content/uploads/2023/07/pexels_videos_1860684-1440p.mp4" playsinline></video>
<figcaption class="wp-element-caption">Sample caption</figcaption></figure>
<!-- /wp:video -->';

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

$query = $this->query();
$variables = [
'id' => $this->post_id,
];
$actual = graphql( compact( 'query', 'variables' ) );

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

$this->assertEquals( $this->post_id, $actual['data']['post']['databaseId'], 'The post ID should match' );

// 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/video', $node['editorBlocks'][0]['name'] );
$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->assertNotEmpty( $block['clientId'], 'The clientId should be present' );
$this->assertNotEmpty( $block['cssClassNames'], 'The cssClassNames should be present' );
$this->assertEmpty( $block['innerBlocks'], 'There should be no inner blocks' );
$this->assertEquals( 'core/video', $block['name'], 'The block name should be core/video' );
$this->assertEmpty( $block['parentClientId'], 'There should be no parentClientId' );
$this->assertNotEmpty( $block['renderedHtml'], 'The renderedHtml should be present' );

$this->assertEquals(
[
'align' => null,
'anchor' => null,
'align' => 'wide',
'anchor' => 'test-anchor',
'autoplay' => true,
'tracks' => [],
'muted' => false,
'caption' => '',
'muted' => true,
'caption' => 'Sample caption',
'className' => 'test-css-class',
'preload' => 'auto',
'src' => 'http://mysite.local/wp-content/uploads/2023/07/pexels_videos_1860684-1440p.mp4',
'style' => wp_json_encode(
[
'spacing' => [
'margin' => [
'top' => 'var:preset|spacing|10',
'bottom' => 'var:preset|spacing|10',
'left' => 'var:preset|spacing|20',
'right' => 'var:preset|spacing|20',
],
],
]
),
'playsInline' => true,
'controls' => false,
'controls' => true,
'loop' => true,
'lock' => wp_json_encode(
[
'move' => true,
'remove' => true,
]
),
'poster' => 'http://mysite.local/wp-content/uploads/2023/05/pexels-egor-komarov-14420089-scaled.jpg',
'id' => 1636.0,
],
$node['editorBlocks'][0]['attributes']
$block['attributes']
);
}

/**
* Test to retrieve core video 'tracks' attribute.
*
* Covers `tracks`
*/
public function test_retrieve_core_video_tracks_attribute(): void {
$block_content = '
<!-- wp:video {"id":1636,"tracks":[{"src":"https://example.com/subtitles.vtt","kind":"subtitles","label":"English","srclang":"en"}],"lock":{"move":true,"remove":true}} -->
<figure class="wp-block-video">
<video src="http://mysite.local/wp-content/uploads/2023/07/pexels_videos_1860684-1440p.mp4" playsinline></video>
</figure>
<!-- /wp:video -->';

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

$query = '
fragment CoreVideoBlockFragment on CoreVideo {
attributes {
tracks
}
}

query Post( $id: ID! ) {
post(id: $id, idType: DATABASE_ID) {
databaseId
editorBlocks {
name
...CoreVideoBlockFragment
}
}
}';

$actual = graphql( [ 'query' => $query ] );
$variables = [
'id' => $this->post_id,
];

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

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

$this->assertCount( 1, $tracks );
$this->assertEquals(
wp_json_encode( // Previously untested.
[
'src' => 'https://example.com/subtitles.vtt',
'kind' => 'subtitles',
'label' => 'English',
'srclang' => 'en',
]
),
$tracks[0]
);
}
}