Skip to content

Commit

Permalink
Merge pull request #29 from rtCamp/core-video-test
Browse files Browse the repository at this point in the history 
tests : backfill tests for `Core Video` Block
  • Loading branch information
@justlevine
justlevine authored Sep 26, 2024
2 parents 521551b + d4d7374 commit 60d9f13
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 48 deletions.
5 changes: 5 additions & 0 deletions .changeset/good-days-work.md
View file
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
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]
);
}
}

0 comments on commit 60d9f13

Please sign in to comment.